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>

ボタンをクリックすると、Form1 の jQuery 検証が機能し、Form2 の jQuery 検証に合格すると機能します。それも成功した場合は、フォームをバックエンドに送信する必要があります。ここでの問題は、一度に 1 つのフォームしか送信できないことです。ただし、両方のフォームが jQuery 検証に合格したら、Form1 と Form2 の両方でフォーム値を送信する必要があります。どうすればこれを達成できますか？JavaScript で新しいフォームを作成し、すべてのフォーム要素を新しいフォームに追加して、そのフォームを送信できることがわかりました。しかし、各フォームには最低 100 個のフォーム フィールドが含まれており、IE と FF の両方で動作する必要があるため、このソリューションがどれだけ実現可能かはわかりません。

4

2 に答える 2

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 に答える
0

Javascript 検証を実行したら、シリアル化を使用して各フォームからデータを取得し、ajax または post を使用して送信するだけです。

このようなものが動作するはずです:

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