Moving data from <select> to <input>
Moderators: egami, macek, gesf
-
popeye
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
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 ?
Do you want to fill an input and then after a submittion it will populate a select in another form ?
Sincerely,
Gonçalo "gesf" Fontoura
Gonçalo "gesf" Fontoura
-
popeye
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.
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.
Try using the selectedIndex property:You can take better advantage over the select options through its option property.
Example:I can't make something now, but will get back soon with a great example if you need.
Code: Select all
document.FormName.InputName.value = document.FormName.SelectName.selectedIndexExample:
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 arraySincerely,
Gonçalo "gesf" Fontoura
Gonçalo "gesf" Fontoura
-
popeye
This is great. I will give it a try and will let you know. An example would be even better.
Thanks a lot.
Thanks a lot.
-
popeye
I gave it a try and it did not work. It seems that I am missing something. Here are my examples:
and
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>
Oh, you'll need to use window opener property in this case.
Try this test2s.html:However i could test it... can't make first file open the 2nd one :p
It should work anyways.
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>It should work anyways.
Sincerely,
Gonçalo "gesf" Fontoura
Gonçalo "gesf" Fontoura
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT