Copy select option values from one form to another
Question
I have this jQuery code:
<script type="text/javascript" >
$(function(){
var form1 = $('#form1'),
form2 = $('#form2');
$(document).ready(function() {
$(':select[name]', form2).val(function(){
return $(':input[name='+ this.name +']', form1).val();
});
});
});
</script>
and I have these two HTML forms
<form id="form1">
<select id="a" name="a" size="5" style="width: 400px;">
<option value="01">001</option>
<option value="02">002</option>
<option value="03">003</option>
<option value="04">004</option>
</select>
</form>
<form id="form2">
<input name="a" type=text>
</form>
I'd like that when the user selects an option from a list it immediately updates the input box in form2. It works in between two input boxes but not with a select - http://jsbin.com/jalomeyu/4/edit?html,js,output
4 answers
solution1
1 2015-01-21 14:47:41
You can simply listen to the change event on the select element. Also, there are some issues with your original code:
-
:selectis not a valid pseudo-class. Just useselect[name]. - You are nesting
$(document).ready(function() {...}in another one.$(function() {...}is a shorthand ;)
Here is the corrected JS:
$(function(){
var form1 = $('#form1'),
form2 = $('#form2');
$('select[name]', form1).change(function(){
$(':input', form2).val(this.value);
});
});
See updated JSbin here: http://jsbin.com/tajijajife/1/
solution2
1 2016-04-07 09:27:19
Try this code below,
HTML,
<form id="form1">
<select id="a" name="a" style="width: 185px;">
<option value="Ali">Ali</option>
<option value="Ahmad">Ahmad</option>
<option value="Osama">Osama</option>
<option value="Zain">Zain</option>
<option value="Ahad">Ahad</option>
<option value="Bakar">Bakar</option>
<option value="Arish">Arish</option>
<option value="Anjum">Anjum</option>
</select>
</form>
<form id="form2">
<input name="a" type=text>
</form>
JQuery
<script type="text/javascript" >
$(function(){
var form1 = $('#form1'),
form2 = $('#form2');
$('#form1').change(function(){
$(':input[name]', form2).val(function(){
return $(':input[name='+ this.name +']', form1).val();
});
});
});
</script>
solution3
0 2015-01-21 14:47:53
You'll need to do the update when the first select element changes. For example:
$(function() {
var form1 = $('#form1'),
form2 = $('#form2');
$(form1).change(function() {
$(':select[name]', form2).val(function() {
return $(':input[name='+ this.name +']', form1).val();
});
});
});
solution4
0 2015-01-21 14:50:50
You can use a keyup function to run every time a key is pressed.
Example:
$(document).ready(function() { var form1 = $('#form1'), form2 = $('#form2'); $('input').keyup(function() { $(':input[name]', form2).val(function() { return $(':input[name=' + this.name + ']', form1).val(); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Testing</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> </head> <body> <form id="form1"> <input name="a" type=text value="test"> <input name="b" type=text> <input name="c" type=text> <input name="d" type=text> </form> <form id="form2"> <input name="a" type=text> <input name="b" type=text> <input name="c" type=text> <input name="d" type=text> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.