重用html表单值

Question

I have a two forms in the same page. The first form is just a abbreviated version of the second form, i.e., 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/