需要一个复选框，该复选框将自动完成同一页面上不同表单中的表单答案

【问题标题】：Need a checkbox that will autocomplete a form from a different form on same page需要一个复选框，该复选框将自动完成同一页面上不同表单中的表单
【发布时间】：2014-12-03 18:54:50
【问题描述】：

我正在使用 ASPX Web 应用程序。基本上有一个页面有 2 个表单，它们的输入几乎都相同。我想要一种方法来设置一个复选框，一旦它被点击，它就会调用一些 javascript 代码（或者你建议的任何东西，它只能是客户端）来自动填充第二个表单，其中输入的信息来自第一种形式。请记住，并非所有表单输入在两个表单上都匹配。

实际上，我要做的只是某些网站在您购买商品时所做的事情，您必须输入您的送货地址以及您的帐单地址，然后它会询问您的帐单地址是否与您的送货地址相同旁边的复选框，单击复选框后，帐单地址表单将自动填充送货地址表单中的信息。

这都是从同一个页面完成的，所以应该很简单。我不擅长 javascript，但我不介意用它来做。

【问题讨论】：

你应该使用你知道的技术。在这种情况下，您可能希望复选框自动回发，以便更新第二个表单。

标签： javascript forms autofill

【解决方案1】：

我用 DOM 做这个，或者可以用 JQuery

<!DOCTYPE html>
<html>
<head>
    <title>Insert title here</title>
    <script>
        function fillForm2() {
            document.getElementById( 'Form2Field1' ).value = document.getElementById( 'Form1Field1' ).value;
            document.getElementById( 'Form2Field2' ).value = document.getElementById( 'Form1Field2' ).value;
            document.getElementById( 'Form2Field3' ).value = document.getElementById( 'Form1Field3' ).value;
        }
        function clearForm2() {
            document.getElementById( 'Form2Field1' ).value = "";
            document.getElementById( 'Form2Field2' ).value = "";
            document.getElementById( 'Form2Field3' ).value = "";
        }
    </script>
</head>
<body>
    <h1>Form 1</h1>
    <form name = "Form1" id = "Form1" accept-charset = "UTF-8" method = "get" action = "#">
        Field 1:&nbsp;
        <input type = "text" name = "Form1Field1" id = "Form1Field1" value = "" size = "10" /><br />
        Field 2:&nbsp;
        <input type = "text" name = "Form1Field2" id = "Form1Field2" value = "" size = "10" /><br />
        Field 3:&nbsp;
        <input type = "text" name = "Form1Field3" id = "Form1Field3" value = "" size = "10" /><br /><br />
        <button id = "btnForm1" type = "button" onclick = "document.Form1.submit();" autofocus >Form 1 Submit</button>
    </form>
    <br /><br />
    Check this to fill Form 2 with Form 1 info&nbsp;
    <input type = "checkbox"
name    =    "SomeName"
id        =    "SomeName"
onclick    =    "if( this.checked ) { fillForm2(); } else { clearForm2(); }"
value        =    "1" />
    <h1>Form 2</h1>
    <form name = "Form2" id = "Form2" accept-charset = "UTF-8" method = "get" action = "#"><br />
        Field 1:&nbsp;
        <input type = "text" name = "Form2Field1" id = "Form2Field1" value = "" size = "10" /><br />
        Field 2:&nbsp;
        <input type = "text" name = "Form2Field2" id = "Form2Field2" value = "" size = "10" /><br />
        Field 3:&nbsp;
        <input type = "text" name = "Form2Field3" id = "Form2Field3" value = "" size = "10" /><br /><br />
        <button id = "btnForm2" type = "button" onclick = "document.Form2.submit();" autofocus >Form 2 Submit</button>
    </form>
</body>
</html>

【讨论】：

这就是我要找的！谢谢！现在最困难的部分是将它与 aspCheckBoxes 和 aspTextBoxes 集成：S.

【解决方案2】：

你说的时候并没有具体说明问题是什么

请记住，并非所有表单输入在两个表单上都匹配

但是，对于匹配的字段，您可以简单地将原始字段的 value property 复制到自动填充字段的 value 属性中。如下所示。

<script>
  function autofillFields() { 
    getElementById("corresponding_field").value=getElementById("original_field").value;
  }
</script>
<form>
<input name="original_field" id="original_field"><br>
<input name="corresponding_field" id="corresponding_field"><br>
<input type="checkbox" name="autofill" id="autofill" onclick="autofillFields()">Autofill
</form>

您可以做的还有很多，但这只是一个开始。

【讨论】：