shrike202 Posted April 14, 2009 Share Posted April 14, 2009 This is what I want to do... I have a user registration page and I'd like to pass the values of 3 drop down menus into a text box field on the same page. When they finish the form and hit submit the value in the text box field is used to populate the user record and the text box data is discarded. In addition, the user could override this by typing in the box or deleting some or all of the text generated by the drop down selections. What I don't get is how to pass the values from the dropdown to the text field without a page reload. I am a noooooooooooob and I'm sorry if this is obvious but I would really appreciate a push in the right direction. Thanks Would this be better done with Ajax? Quote Link to comment Share on other sites More sharing options...
shrike202 Posted April 14, 2009 Author Share Posted April 14, 2009 onChange seems to be the important function here? Quote Link to comment Share on other sites More sharing options...
Psycho Posted April 14, 2009 Share Posted April 14, 2009 <html> <head> <script type="text/javascript"> function updateText() { var field1Value = document.getElementById('field1').value; var field2Value = document.getElementById('field2').value; var field3Value = document.getElementById('field3').value; var newText = field1Value + '\n' + field2Value + '\n' + field3Value document.getElementById('output').value = newText; return; } </script> </head> <body> Field 1 <select name="field1" id="field1" onchange="updateText();"> <option value="">--SELECT--</option> <option value="line1-A">line1-A</option> <option value="line1-B">line1-B</option> <option value="line1-C">line1-C</option> </select><br> Field 2 <select name="field2" id="field2" onchange="updateText();"> <option value="">--SELECT--</option> <option value="line2-A">line2-A</option> <option value="line2-B">line2-B</option> <option value="line2-C">line2-C</option> </select><br> Field 3 <select name="field3" id="field3" onchange="updateText();"> <option value="">--SELECT--</option> <option value="line3-A">line3-A</option> <option value="line3-B">line3-B</option> <option value="line3-C">line3-C</option> </select><br><br> Textarea:<br> <textarea name="output" id="output" rows="5"></textarea> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.