Question

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

我真正想要做的就是一些网站在您购买商品时所做的事情，您必须输入您的送货地址以及您的帐单邮寄地址，然后它会询问您的帐单邮寄地址是否与您的送货地址相同在复选框旁边，点击该复选框后，帐单邮寄地址表单会自动填写来自送货地址表单的信息。

这一切都是在同一页面上完成的，所以应该很简单。我对javascript不好，但我不介意用它做。

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

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

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

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

2 个答案: