重用html表单值

Question

I have a two forms in the same page. The first form is just a abbreviated version of the second form, ie, the first form has three fields and the second form has the same three fields plus an additional eight fields.

When the submit button is pressed on the first form it navigates to the second form location. Is it possible to use the values from the first form to populate the three repeated values on the second form?

Answer 1

You can utilize the "submit" event of the first form (or just the "click" event for a non-submitting button). Capture the value of the first three fields with Javascript, and set the value of the next form's fields. Then you can transition to the next form.

$('#form-1').submit(function(e) {
    // Set the value of the 2nd form to the values of the 1st form's fields
    // Add as many as you like. You can also do validation here.
    $('#field-1-ext').val( $('#field-1').val() );
    $('#field-2-ext').val( $('#field-2').val() );

    // Show the second form, hide the first
    $('#form-1').fadeOut();
    $('#form-2').fadeIn();

    // Prevent normal form submission (navigating away from page)
    e.preventDefault();
    return false;
});

Here is a JSFiddle example: http://jsfiddle.net/muof06a0/1/

Answer 2

I believe there are several ways for your problem.. The first ugly one would be to put your <form> tag above both form.. Like this:

<form action="#">
<input type="text" class="first" />
<input type="text" class="first" />
<input type="button" />

<!-- Put anything you need here -->

<input type="text" class="second" />
<input type="text" class="second" />
<input type="submit" />
</form>

The second one would be preparing some <input type="hidden" /> in the second form and upon clicking the first button, you can copy the value to the <input type="hidden" /> .

<input type="text" class="first" />
<input type="text" class="first" />
<input type="button" />

<!-- Put anything you need here -->

<form action="#">
<input type="hidden" class="first" />
<input type="hidden" class="first" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="submit" />
</form>

Answer 3

OK, here's my simple JQuery version. Function below. See http://jsfiddle.net/x7879Lt1/ for work test

// Parameters form1 and form2 are the ids of the form you're interested in.
function populate(form1, form2) {
    Loop through every element of form2
    $(':input', '#'+form2).each(function() {
//      alert(this.name + ': ' + this.value);

        // Look for form1 value
        var sub_value = ( $('#'+form1+' input[name='+this.name+']').val() );

        // If defined, set it, else move along, nothing to see
        if (sub_value) {
            this.value = sub_value;
        }
    });
}