Moving data from <select> to <input>

by **popeye** » Fri Jul 08, 2005 12:40 pm

I have a <input> in a form that when I double click on it a second form will open with a select option. I need to populate the input from the first form with the selected item from the second form. Is there a JavaScript routine or technique to help me with this? Thanks

by **gesf** » Fri Jul 08, 2005 5:24 pm

Can you be more specific on what you want to do ?
Do you want to fill an input and then after a submittion it will populate a select in another form ?

by **popeye** » Fri Jul 08, 2005 6:05 pm

Thanks for the respond.
I have a PHP script that retrieves data from a MySQL table and present them using a bunch of <input> tags. I need to be able to change some of these data by selecting values from a <select> tag. The options of the <select> tag come from a different table which has over 16000 records.
I like the user to be able to change the <input> tag values by double clicking on the <input> area and than I present them with the second form and the <select> options. They will select one of the options and that option should replace the <input> value of the first form.
It all works fine except I can not move the selected option from the second form to the <input> tag from the first form.

by **gesf** » Fri Jul 08, 2005 8:49 pm

Try using the selectedIndex property:

Code: Select all: document.FormName.InputName.value = document.FormName.SelectName.selectedIndex

You can take better advantage over the select options through its option property.
Example:

Code: Select all: 1. SelectName.option[i].selected 2. SelectName.option[i].value 3. SelectName.option[i].name // not sure about name :P // Where i, is the index of the option. Just like an array

I can't make something now, but will get back soon with a great example if you need.

by **popeye** » Sat Jul 09, 2005 6:11 pm

This is great. I will give it a try and will let you know. An example would be even better.
Thanks a lot.

by **popeye** » Sat Jul 09, 2005 7:23 pm

I gave it a try and it did not work. It seems that I am missing something. Here are my examples:

Code: Select all: <html> <head> <title>test1.html</title> </head> <body> <form name='test1f' method='POST'> Change me:<input name='test1i' value='JavaScript'> <input type="button" value="Click here to Change the Input Value" onclick="window.open('test2s.html')"> </form> </body> </html>

and

Code: Select all: <html> <head> <title>test2s.html</title> <script type="text/javascript"> function changeinputvalue(){ document.test1f.test1i.value = document.test2f.test2s.selectedIndex; } </script> </head> <body> <form name="test2f"> <select name="test2s" onChange="changeinputvalue()"> <option>HTML</option> <option>PHP</option> <option>MySQL</option> </select> <input type='submit' value='Submit'> </form> </body> </html>

by **gesf** » Mon Jul 11, 2005 11:54 am

Oh, you'll need to use window opener property in this case.
Try this test2s.html:

Code: Select all: <html> <head> <title>test2s.html</title> <script type="text/javascript"> function SetCategory(theForm) { if(window.opener && !window.opener.closed) { data = theForm.options[theForm.selectedIndex].value; window.opener.document.test1f.test1i.value = data; window.close(); } } </script> </head> <body> <form name="test2f" onchange="SetCategory(this)"> <select name="test2s"> <option>HTML</option> <option>PHP</option> <option>MySQL</option> </select> </form> </body> </html>

However i could test it... can't make first file open the 2nd one :p
It should work anyways.

by **popeye** » Mon Jul 11, 2005 7:34 pm

It should work. I will try it.
Thanks again.

Moving data from <select> to <input>

Moving data from <select> to <input>

Who is online