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

Question

I am working with an ASPX web application. Basically there is a page that has 2 forms that have almost all of the same from inputs. I would like for a way to have a checkbox that once it's clicked, it would call some javascript code (or whatever you guys suggest, it has to be client side only though) to auto-fill the second form with the inputted information from the first form. Keep in mind not all form inputs match on both forms.

Really all I'm trying to do is exactly what some websites do when you purchase something and you have to input your shipping address as well as your billing address, then it asks if your billing address is the same as your shipping address next to a checkbox, and once the checkbox is clicked, the billing address form gets auto-filled with the information from the shipping address form.

This is all done from the same page, so it should be simple. I am not good with javascript, but I don't mind doing it with it.

You should use the tech you know. In this case, you might want to have the checkbox auto-postback so you can update the second form. — Malk, Dec 03 '14 at 19:00

score 1 · Accepted Answer · answered Dec 03 '14 at 19:43

I do this with DOM or can use 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>

This is what I was looking for! Thanks! Now the hard part is integrating it with aspCheckBoxes and aspTextBoxes :S. — Carlo71, Dec 03 '14 at 20:11

score 0 · Answer 2 · answered Dec 03 '14 at 19:48

You didn't really specify what the issue was when you said

Keep in mind not all form inputs match on both forms

however for the fields that do match you can simply copy the value property of the original field to the value property of the autofilled field. It would look something like the following.

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

There's a lot more you can do with this but it's a start.

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

2 Answers2