How to echo value from input box (<form name=“form1”>) to input box (<form name=“form2”>)
Question
How to echo value from input box ( form name="form1" ) to input box ( form name="form2" )
I figured out how to echo the input within the first form.. and also withind the div.. but I can't figure it out how to pass the inpus from the input boxes in the first form ( form1 ).. into the input boxes in the second form ( form2 ).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function FillBilling(f) {
f.billingname.value = f.shippingname.value;
f.billingcity.value = f.shippingcity.value;
}
function changeRadius1(){
var name_input = document.getElementById('name_input').value;
document.getElementById('radius1').innerHTML = name_input;
}
function changeRadius2(){
var city_input = document.getElementById('city_input').value;
document.getElementById('radius2').innerHTML = city_input;
}
</script>
</head>
<body>
<b>Mailing Address FORM1</b><br><br>
<form name="form1">
Name:<input type="text" name="shippingname" onkeyup="FillBilling(form1); changeRadius1()">
<br>City:<input type="text" name="shippingcity" onkeyup="FillBilling(form1); changeRadius2()">
<br><br>
Name:<input type="text" id="name_input" class="name_input" name="billingname" onkeyup="FillBilling(form2)"><br>
City:<input type="text" id="city_input" class="city_input" name="billingcity" onkeyup="FillBilling(form2)">
</form>
<br>
<P>
<b>Billing Address FORM2</b><br><br>
<form name="form2">
Name:<input type="text" id="name_input" class="name_input" name="billingname"><br>
City:<input type="text" id="city_input" class="city_input" name="billingcity">
</form>
<br><b>Billing Address TEXT</b><br><br>
<div class="yourcode">Name: <span id="radius1"></span></div>
<div class="yourcode">City: <span id="radius2"></span></div>
</body>
</html>
I hope this is not a dumb question.. and the answer should be obvious.. but I'm at the beginning of JS.. so thank you for your help.
2 answers
solution1
1 ACCPTED 2012-11-04 16:29:29
I'm not entirely sure what you're trying to accomplish, but I think I can help you:
When you make the function calls in your 2nd set of fields in form1, FillBilling(form2), you are calling your FillBilling function with "f" being a reference to form2. form2 does not have inputs with the names "shippingname" and "shippingcity". These are returning undefined.
You need to rewrite your function so that it is accessing the forms you want to modify more specifically.
You should also try not to reuse HTML names and IDs for the sake of the HTML's validity and clarity when you're programming. These things happen as a result.
solution2
0 2012-11-05 20:11:58
Here's an example function to copy field values from one form to another. It will only copy the fields if both are text type inputs and has the same input name.
function copyForm(srcForm, destForm) {
var srcFields = srcForm.elements, destFields = destForm.elements, i, j;
for (i = 0; i < srcFields.length; i++) {
var srcField = srcFields[i];
if (srcField.type && (srcField.type.toLowerCase() === 'text')) {
for (j = 0; j < destFields.length; i++) {
var destField = destFields[j];
if (destField.type && (destField.type.toLowerCase() === 'text') && (destField.name === srcField.name)) {
destField.value = srcField.value;
break;
}
}
}
}
}
And here's an example usage to copy form1 to form2 based on the provided HTML code. It'll copy the billingname and billingcity fields of form1 to the fields on form2 . The shippingname and shippingcity of form won't be copied since there's no equivalent one in form2 .
var src, dest;
src = document.getElementsByName('form1');
if (src.length) {
dest = document.getElementsByName('form2');
if (dest.length) {
copyForm(src, dest);
}
}
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.