| | |
Select Box populates text field
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Oct 2006
Posts: 23
Reputation:
Solved Threads: 0
I would like some help on creating a function that on clicking a submit button will allow the user to add the data of the selection box into an uneditable text box and hidden file.
IE:
User selects option 5 , then clicks the "add Option" button. It will then add a new row with an uneditable text box [Option 5] and a hidden field . Each click on the Add Option Button will take the Text and Value of the selected drop down option. I would need this to be done without request from the server, ie client side. Is this possible? Does Ajax or DHTML need to be involved?
Thanks,
IE:
User selects option 5
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<option value="5">Option 5</option>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<input type="hidden" value="5">
Thanks,
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
Simple JavaScript will do the trick. The parts you need to understand:
1. the "return" keyword, and how it is used with a submit button to either perform or cancel a form submission (that is to say, if you really meant "submit" button in your question, as a normal button can do the same thing)
2. the "id" attribute... you'll need to give each HTML element a unique id, so that it can be referenced via JavaScript
3. the "document.getElementById()" method
4. how selects are referenced, their attributes and methods.
If you have a textbox and a select element in your form:
[html]<form>
<input id="myText"/><br/>
<select id="mySelect"/>
<option value="Volvo"/>Volvo
<option value="Saab"/>Saab
<option value="Fiat"/>Fiat
<option value="Audi"/>Audi
</select>
</form> [/html]
Then you could add an "onChange" handler to the select:
[html]<form>
<input id="myText"/><br/>
<select id="mySelect" onChange="javascript:doSelect(this);"/>
<option value="Volvo"/>Volvo
<option value="Saab"/>Saab
<option value="Fiat"/>Fiat
<option value="Audi"/>Audi
</select>
</form> [/html]
The "doSelect()" function might look like this:
[html]function mySelect(x)
{
document.getElementById("myText").value = x.options[x.selectedIndex].value;
}[/html]
Each time the user selects a new option in the select, the value of the selected option is copied to the textbox. The same technique could be done for hidden elements, and of course the function could be wired to the submit event of the form instead of the change event of the select.
1. the "return" keyword, and how it is used with a submit button to either perform or cancel a form submission (that is to say, if you really meant "submit" button in your question, as a normal button can do the same thing)
2. the "id" attribute... you'll need to give each HTML element a unique id, so that it can be referenced via JavaScript
3. the "document.getElementById()" method
4. how selects are referenced, their attributes and methods.
If you have a textbox and a select element in your form:
[html]<form>
<input id="myText"/><br/>
<select id="mySelect"/>
<option value="Volvo"/>Volvo
<option value="Saab"/>Saab
<option value="Fiat"/>Fiat
<option value="Audi"/>Audi
</select>
</form> [/html]
Then you could add an "onChange" handler to the select:
[html]<form>
<input id="myText"/><br/>
<select id="mySelect" onChange="javascript:doSelect(this);"/>
<option value="Volvo"/>Volvo
<option value="Saab"/>Saab
<option value="Fiat"/>Fiat
<option value="Audi"/>Audi
</select>
</form> [/html]
The "doSelect()" function might look like this:
[html]function mySelect(x)
{
document.getElementById("myText").value = x.options[x.selectedIndex].value;
}[/html]
Each time the user selects a new option in the select, the value of the selected option is copied to the textbox. The same technique could be done for hidden elements, and of course the function could be wired to the submit event of the form instead of the change event of the select.
•
•
Join Date: Oct 2006
Posts: 23
Reputation:
Solved Threads: 0
Thank you TGreer.
Now the next piece is how can I make this work on an "array" of text boxes.
IE:
after user makes their selection, the click the add button (button input type) and it will create another textbox/hidden field pair that will be also manipulated by the same select box.
I have the code to add new text box/hidden field on hittin the add button. The piece I'm unsure about is how to pass the dynamic textbox id.
Currently my "add fields" function creates the id like so equipment_1, equipment_2, etc... But how can I get this doSelect() function know which field pair is the active one (which would always be the latest pair).
Thanks in advance,
Now the next piece is how can I make this work on an "array" of text boxes.
IE:
after user makes their selection, the click the add button (button input type) and it will create another textbox/hidden field pair that will be also manipulated by the same select box.
I have the code to add new text box/hidden field on hittin the add button. The piece I'm unsure about is how to pass the dynamic textbox id.
Currently my "add fields" function creates the id like so equipment_1, equipment_2, etc... But how can I get this doSelect() function know which field pair is the active one (which would always be the latest pair).
Thanks in advance,
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
Simply maintain a counter variable. Each time the "Add" button is clicked, it increments the counter. The "mySelect" function can use the variable to reference the proper text box(es).
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function mySelect(x) { document.getElementById("equipment_" + myCounter).value = x.options[x.selectedIndex].value; }
Last edited by tgreer; Oct 12th, 2006 at 12:35 pm.
•
•
Join Date: Oct 2006
Posts: 23
Reputation:
Solved Threads: 0
the add button already has a counter that it runs, but how do I pass this counter variable from my add button function to the doselect function?
Thanks,
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script language="JavaScript"> function doSelect(x) { document.getElementById("equipment_"+count).value = x.options[x.selectedIndex].text; document.getElementById("equipment_"+count+"h").value = x.options[x.selectedIndex].value; } </script>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function addField(area,field,limit) { if(!document.getElementById) return; //Prevent older browsers from getting any further. var field_area = document.getElementById(area); var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area. //Find the count of the last element of the list. It will be in the format '<field><number>'. If the // field given in the argument is 'friend_' the last id will be 'friend_4'. var last_item = all_inputs.length - 1; var last = all_inputs[last_item].id; var count = Number(last.split("_")[1]) + 1; //If the maximum number of elements have been reached, exit the function. // If the given limit is lower than 0, infinite number of fields can be created. if(count > limit && limit > 0) return; if(document.createElement) { //W3C Dom method. var li = document.createElement("li"); var input = document.createElement("input"); input.id = field+count; input.name = field+count; input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc. li.appendChild(input); field_area.appendChild(li); } else { //Older Method field_area.innerHTML += "<li><input disabled name='"+(field+count)+"' id='"+(field+count)+"' type='text' readonly />"; field_area.innerHTML += "<input name='"+(field+count)+"h' id='"+(field+count)+"h' type='text' readonly /></li>"; } }
Thanks,
•
•
Join Date: Oct 2006
Posts: 23
Reputation:
Solved Threads: 0
ok....now I have to figure out how to make the count work correctly, but my bigger problem is being able to access these fields via another php form.
current code i'm using only seems to work on static input boxes, but doesn't work on these new dynamic boxes. Is there anyway to get the value of these dynamic boxes? so that i can print them out on a page.
thank you,
current code i'm using only seems to work on static input boxes, but doesn't work on these new dynamic boxes. Is there anyway to get the value of these dynamic boxes? so that i can print them out on a page.
thank you,
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
It's the same technique. As long as every element has a unique "id" attribute, the element can be retrieved via the
The trick is to have a rational system of providing unique ids to your dynamic elements, as well as a method of storing them and/or recreating them as needed.
Please be more careful with your terminology. There is no such thing as a "PHP Form" (or "fields" in HTML, for that matter), so I cannot provide quality help without resorting to guesswork as to what you really mean.
document.getElementById() method. Once retrieved, its attributes, including value, can be set.The trick is to have a rational system of providing unique ids to your dynamic elements, as well as a method of storing them and/or recreating them as needed.
Please be more careful with your terminology. There is no such thing as a "PHP Form" (or "fields" in HTML, for that matter), so I cannot provide quality help without resorting to guesswork as to what you really mean.
•
•
Join Date: Oct 2006
Posts: 23
Reputation:
Solved Threads: 0
thank you for your help, my apologies on my wording.
Currently the form that I am using does a GET submission to a PHP file that gets the fields values from the Users' input. such as:
print $textbox1; //which will print out the value inputed into textbox1
But it's not printing anything as I am assuming this field is dynamic so it doesn't "exist". So my question is, how do I get the value of these dynamic textboxes so that i can print them out using PHP?
Customer will select an item from the drop down list, then it will fill the textbox1 with the values of the option selected. They will then click the "add" button which will "save" the values in textbox1 and create textbox2 underneath textbox1 and so on. Once customer is happy with the number of items "added" he/she will then submit the form. The file that will process the form will be in PHP. I will then run some calculations based of the textbox values and forward the user to another form (with fields filled out from the form I am currently working on) where they will fill out their contact info.
I hope this was clearer this time.
Thank You for your help.
Currently the form that I am using does a GET submission to a PHP file that gets the fields values from the Users' input. such as:
print $textbox1; //which will print out the value inputed into textbox1
But it's not printing anything as I am assuming this field is dynamic so it doesn't "exist". So my question is, how do I get the value of these dynamic textboxes so that i can print them out using PHP?
Customer will select an item from the drop down list, then it will fill the textbox1 with the values of the option selected. They will then click the "add" button which will "save" the values in textbox1 and create textbox2 underneath textbox1 and so on. Once customer is happy with the number of items "added" he/she will then submit the form. The file that will process the form will be in PHP. I will then run some calculations based of the textbox values and forward the user to another form (with fields filled out from the form I am currently working on) where they will fill out their contact info.
I hope this was clearer this time.
Thank You for your help.
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
I understand. This has turned into a PHP question. You want to process the results of a form submission, and author a new page, populating the new page's form with the results from the previous form.
I suggest you ask a question about getting values from the Response object in the PHP forum. In short, PHP automatically creates an associative array named
To create a textbox element that is populated with a value from a previous GET might look like this:
[php]
<input type="text" id="new_textbox1" value="<? echo $_GET['textbox1'] ?>" />
[/php]
That assumes you've built a URL with
I suggest you ask a question about getting values from the Response object in the PHP forum. In short, PHP automatically creates an associative array named
$_GET in which it stores all your query string values.To create a textbox element that is populated with a value from a previous GET might look like this:
[php]
<input type="text" id="new_textbox1" value="<? echo $_GET['textbox1'] ?>" />
[/php]
That assumes you've built a URL with
?textbox1=somevalue as a query string. Last edited by tgreer; Oct 13th, 2006 at 6:37 pm.
![]() |
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Javascript Popup Window
- Next Thread: Automatically populate text box with browser info...
| Thread Tools | Search this Thread |
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser calendar captchaformproblem cart close codes column css date debugger decimal dependent design dom download dropdown element embed enter error events firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe image() index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onerror onmouseover paypal php player position post problem programming prototype rating redirect regex safari scale scriptlets search security select software sql starrating synchronous text textarea toggle unicode validation variables w3c webservice website window windowofwords windowsxp xml






