Question

我在同一页面中有两个表单。第一种形式只是第二种形式的缩写版本，即第一种形式有三个字段，第二种形式有三个相同的字段加上另外八个字段。

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

Answer 1

您可以使用＆＃34;提交＆＃34;第一个表单的事件（或者只是＆＃34;单击＆＃34;非提交按钮的事件）。使用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;
        }
    });
}

重用html表单值

3 个答案: