Question

I want to fill and submit a form like below:

<form action="http://www.test.com/school" method="post">
<select name="days">
   <option value="2">Monday</option>
   <option value="1">Tuesday</option>
   <option value="3">Wednesday</option>
   <option value="4">Thursday</option>
   <option value="5">Friday</option>
   <option value="6">Saturday</option>
   <option value="7">Sunday</option>
</select>
<input type="submit" value="submit" id="submitday">

I don’t want to select from option so I have to create another form.

<form action="http://www.test.com/school" method="post">
  <input type="text" name="days">
  <input type="submit" value="submit" id="submitday">

When I want to choose Wednesday, I need to type the value 3 in a text box then click submit. It works.

But I want to know if any method that can make me just type Wednesday in text box and not the value and post it without any problem?

Answer 1

Your question isn’t well defined enough and having an explicit goal always helps.

1.) Even though we’re pretty much if not outright beyond the point where it’s important to use id=”same_as” name=”same_as” having the same values I still highly recommend this practice (old Internet Explorer bug). You’ll want to make good use of the label element (clicky clicky) as it gives users more area to click to give focus (element, checkbox, text, etc).

2.) You’ll want to use the in operator to discover what tools you have available…

XHTML

<textarea id="dom_methods"></textarea>

JavaScript

for (i in document.getElementById('select_element_id')
{
 document.getElementById('methods').value = document.getElementById('methods').value+'\n'+i;
}

This will let you discover different methods/functions/objects/etc that are associated with in example the select element. Keep in mind that each object may have it’s own children. You can do…

for (i in window) {}
for (i in window.document) {}
for (i in document.getElementById('select_element_id')) {}

Good resources including Mozilla Developer Network here…

https://developer.mozilla.org/en/

My absolute biggest piece of advice is do not use frameworks as you will quickly veer off from learning the actual language and immediately inherit some high level issues you will not become aware of. People posting dollar signs ($) in JavaScript posts are usually good give-aways that they have not answered your question unless you have explicitly asked for a framework related answer.

If you revise your question and reply to my answer I’ll be happy to append my answer to apply more directly to what you’re trying to accomplish.

---

PART TWO

If you want to create an element you should use the createElement method…

Create the element and give it the value you want…

var d = document.getElementById('days');
var input_day = document.createElement('input');
input_day.setAttribute('id','days');
input_day.setAttribute('name','days');
input_day.setAttribute('type','text');
input_day.setAttribute('value',d.options[d.selectedIndex].text);

IMPORTANT! JavaScript has QUIET errors that you will battle for days before posting about them and someone casually pointing them out. So be exceptionally wary of using short names for variables (e.g. do not use var in = ”; as “in” is an operator and will cause a silent error) where your code simply won’t execute or do odd stuff.

Now you have some VALID choices for putting this new element in to the page…

1.) Using appendChild will put the element at the end of the parent container…

document.getElementById('form_id').appendChild(d);

You should use fieldsets (usually one is fine) as a direct child to a form element…

<form action="" method="post">
<fieldset>
<!--everything form related goes here -->
</fieldset>
</form>

…in which case you could do the following (to help you get comfortable with examples and see them actually work before you)…

document.getElementById('form_id').getElementsByTagName('fieldset')[0].appendChild(d);

Notice the [0], it refers to the first fieldset element, if there were two and you wanted to append the new element in to the second you would use [1] (and [2] for the third and so forth). Also if the page only includes a single form and a single fieldset you could drop the first part (just so you can see how things are constructed)…

document.getElementsByTagName('fieldset')[0].appendChild(d);

2.) You’ll usually want to use insertBefore…

var f = document.getElementById('form_id');
var element_parent = f.getElementsByTagName('fieldset')[0];
var element_before = f.getElementsByTagName('select')[0];
parent_element.insertBefore(d,element_before);

A little more information here…
https://developer.mozilla.org/en/insertBefore

NEVER EVER FOR ANY REASON USE INNERHTML!!! Lazy programmers use it all the time and fail to realize that it does NOT correctly register the DOM so elements associated with that proprietary Microsoft JScript method will NOT be seen when you try to work with them. For this reason alone you should avoid using frameworks such as jQuery as they jump to use the easiest things. Easy doesn’t get the job done, easy makes the job look done long enough to make a single paycheck and then if you don’t one day end up rewriting ALL of your code in that given area (long after you remember working with it and what you were trying to do) you’ll be in a world of hurt.

---

PART THREE

JavaScript is an EVENT driven language, events are DOM based. The DOM and JavaScript are different things very closely tied together.

You can read more about DOM events here…

https://developer.mozilla.org/en/DOM/event

…and there is a good list of DOM events here…

http://en.wikipedia.org/wiki/DOM_events#HTML_events

In order to take advantage of the code you need to determine the event that best fits with your goal. Are you trying to do this when the form is submitted? That would be onsubmit. Are you trying to do this when the page loads? That would be onload.

Generally you can reuse events endlessly though you can only execute the onload event once.

If you visit my site and look at the JavaScript code you’ll notice THREE things…

1.) An index.js file that is nothing but functions.

2.) An onload.js file with limited number of global variables (variables defined outside of a function) and the anonymous onload function.

Since you can only execute the onload event once if you want to do multiple things (e.g. execute multiple unrelated functions) you can use an anonymous function which is simply a function without a name…

window.onload = function()
{
 my_func1();
 my_func2();
 my_func3();
}

Keep in mind that you should always keep script elements inside of the <head> element and not the <body> element otherwise it will lead you down a path of poor coding practices.

So if you create a standalone test file it may look something like this…

example.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Page</title>
<script type="application/javascript">
//<![CDATA[
function form_days()
{
 var d = document.getElementById('days');
 var input_day = document.createElement('input');
 input_day.setAttribute('id','days');
 input_day.setAttribute('name','days');
 input_day.setAttribute('type','text');
 input_day.setAttribute('value',d.options[d.selectedIndex].text);
 d.parentNode.insertBefore(input_day,d.nextSibling);
}

function get_methods(o)
{
 var m = document.getElementById('dom_methods');
 var dom_list = new Array();

 for (i in o) 
 {
  dom_list.push(i);
 }

 dom_list.sort();

 for (var i=0; i<dom_list.length; i++)
 {
  m.value = m.value+dom_list[i]+'\n';
 }
}

window.onload = function()
{
 form_days();
 get_methods(document.getElementById('days').options[document.getElementById('days').selectedIndex]);
}
//]]>
</script>
<style type="text/css">
label {border: #000 dotted 1px; padding: 0px 2px 0px 2px;}
label:hover {border: #000 solid 1px;}
textarea {height: 500px; width: 400px;}
</style>
</head>

<body>

<form action="http://www.test.com/school" method="post">
<fieldset>
<label for="days">Day:</label>
<select id="days" name="days">
 <option value="2">Monday</option>
 <option value="1">Tuesday</option>
 <option value="3">Wednesday</option>
 <option value="4">Thursday</option>
 <option value="5">Friday</option>
 <option value="6">Saturday</option>
 <option value="7">Sunday</option>
</select>

<div><textarea id="dom_methods"></textarea></div>

<div><input type="submit" value="submit" id="submitday" /></div>

</fieldset>
</form>

</body>
</html>

You should be able to copy-and-paste this to a file, name it example.xhtml. It’s all functional, tested and working at the highest standards. Keep in mind that Internet Explorer 8 and older is not capable of XHTML (application/xhtml+xml) or comprehending the CORRECT media type/mime for JavaScript which is application/javascript so if you require backwards compatibility using text/javascript on script elements is not valid though will work.