2

如何将输入框 ( ) 中的值回显form name="form1"到输入框 ( form name="form2")

我想出了如何在第一种形式中回显输入..以及在 div 中..但我不知道如何将输入从第一种形式的输入框 ( form1).. 传递到输入框中在第二种形式 ( 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>

我希望这不是一个愚蠢的问题.. 答案应该很明显.. 但我在 JS 的开头.. 所以谢谢你的帮助。

4

2 回答 2

1

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.

于 2012-11-04T16:29:29.490 回答
0

这是一个将字段值从一个表单复制到另一个表单的示例函数。text如果两者都是类型输入并且具有相同的输入名称，它只会复制字段。

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;
        }
      }
    }
  }
}

这是一个基于提供的 HTML 代码复制form1到的示例用法。form2它会将billingname和的billingcity字段复制form1到 上的字段form2。和of不会被复制，shippingname因为.shippingcityformform2

var src, dest;
src = document.getElementsByName('form1');
if (src.length) {
  dest = document.getElementsByName('form2');
  if (dest.length) {
    copyForm(src, dest);
  }
}
于 2012-11-05T20:11:58.520 回答