需要一个复选框，该复选框将在同一页面上自动填写来自不同表单的表单

Need a checkbox that will autocomplete a form from a different form on same page

本文关键字：复选框 表单 一页 一个      更新时间：2023-09-26

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

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

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

我用 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>

当你说时，你并没有真正指定问题是什么

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

但是，对于匹配的字段，您只需将原始字段的值属性复制到自动填充字段的值属性即可。它看起来像下面这样。

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

你可以做更多的事情，但这是一个开始。

相关文章：