重用html表单值

Question

我在同一页面中有两种形式。 第一种形式只是第二种形式的缩写形式，即，第一种形式具有三个字段，第二种形式具有相同的三个字段以及另外的八个字段。

在第一个表单上按下提交按钮时，它将导航到第二个表单位置。 是否可以使用第一种形式的值来填充第二种形式的三个重复值？

Answer 1

您可以利用第一种形式的“提交”事件（或仅对非提交按钮使用“单击”事件）。 使用Javascript捕获前三个字段的值，并设置下一个表单的字段的值。 然后，您可以转换到下一个表格。

$('#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;
});

这是一个JSFiddle示例： http : //jsfiddle.net/muof06a0/1/

Answer 2

我相信有几种方法可以解决您的问题。.第一个丑陋的方法是将您的<form>标记放在这两种形式之上。

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

第二个将以第二种形式准备一些<input type="hidden" /> ，然后单击第一个按钮，您可以将值复制到<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

好的，这是我简单的JQuery版本。 功能如下。 参见http://jsfiddle.net/x7879Lt1/进行工作测试

// 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;
        }
    });
}