0

我有一个 HTML 页面，它有多个表单和一个表单之外的按钮，如下所示：-

<html>    
<body>

<div class="error" style="display:none;">
    <span></span>            
</div>
<form id="form1" name="form1"> 
Field 1: <input name="field1" id="field1" type="text" class="required">
</form>
<form id="form2" name="form2"> 
Field 2: <input name="field2" id="field2" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>
</body>
</html>

当我单击按钮时，jQuery 验证适用于 Form1，如果它通过 jQuery 验证，则适用于 Form2。如果这也成功，我需要将表格提交到后端。这里的问题是我一次只能提交一份表格。但是一旦两个表单都通过了 jQuery 验证，我需要在 Form1 和 Form2 中发送表单值。我怎样才能做到这一点？我发现我们可以在 javascript 中创建一个新表单并将所有表单元素添加到新表单并提交该表单。但我不确定这个解决方案的可行性有多大，因为每个表单至少包含 100 个表单字段，并且它需要在 IE 和 FF 中工作。

4

2 回答 2

0

执行 Javascript 验证后，您可以简单地使用序列化从每个表单中获取数据，然后使用 ajax 或 post 提交。

像这样的东西应该工作：

$.ajax({
    type: 'POST',
    url: url,
    data: $("#form1,#form2").serialize(),
});
于 2012-12-03T14:48:03.120 回答
0

您提交的只是最后一个隐藏表单。使用 jquery，您可以将所有值作为 json 字符串放入隐藏表单中。您可以使用 DeserializeJSON 方法在服务器端脚本中获取它。

希望这可以帮助：

<form id="form1" name="form1"> 
    Field 1: <input name="field1" id="field1" type="text" class="required">
</form> 
<form id="form2" name="form2"> 
    Field 2: <input name="field2" id="field2" type="text" class="required">
</form>
<form id="form3" name="form3"> 
    Field 3: <input name="field3" id="field3" type="text" class="required">
</form>
..........//After all your forms, just make a hidden form
<form id="hiddenForm" action="your required url">
    <input name="finalField" id="finalField" type="text" style="display:none;" class="required">
</form>
<script type="text/javascript">
    function submit(){
        var data = new Object();
        $('form').each(function(){
            if($(this).attr('id') != 'hiddenForm')
                data[$(this).attr('id')] = $(this).serialize();
        });
        $('#finalField').val(JSON.stringify(data));
        $('#hiddenForm').submit();
    }
</script>
于 2012-12-03T15:14:46.153 回答