3

こんにちは。ページにフォームが1つしかない場合は、更新せずにフォームを送信するのは非常に簡単ですが、ページに複数のフォームがある場合はどうでしょうか。フォームの送信に次のコードを使用していますが、ページにフォームが1つしかない場合は問題なく機能します。ページに複数のフォームがある場合に機能するように変更するにはどうすればよいですか。前もって感謝します。

function processForm() { 
        $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
            success: function(data) {
                $('#message').html(data);
            }
        } );
}

<form action="" method="post" onsubmit="processForm();return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>
4

4 に答える 4

7

formid関数をカスタマイズし、関数内でフォームデータを取得して渡すようなパラメータを追加するだけですprocessForm("id of the form");

function processForm(formId) { 
    //your validation code
    $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: $("#"+formId).serialize(), 
            success: function(data) {
                $('#message').html(data);
            }
        } );
    }

<form action="" id="form1" method="post" onsubmit="processForm('form1');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>

<form action="" id="form2" method="post" onsubmit="processForm('form2');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<form action="" id="form3" method="post" onsubmit="processForm('form3');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>
于 2012-08-19T21:39:53.557 に答える
3

あなたが持っているものは複数のフォームで動作するはずですが、代わりにjQueryを使用してイベントリスナーを適用すると、デバッグがより良く、はるかに簡単になります。

$('form').submit(processForm); // listen to each form’s submit

function processForm(e) { 
    e.preventDefault(); // prevents default submit action
    $.ajax( {
        type: 'POST',
        url: form_process.php,
        data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
        success: function(data) {
            $('#message').html(data);
        }
    } );
}

HTML（醜いonsubmit属性なし）：

<form action="" method="post">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
于 2012-08-19T12:54:09.400 に答える
2

フォームのシリアル化を呼び出しprocessForm(form_id)て使用しているときにform_idを追加します。id

function processForm(form) { 
    $.ajax( {
        type: 'POST',
        url: form_process.php,
        data: $(form).serialize(),
        success: function(data) {
            $('#message').html(data);
        }
    } );
    return false;
}
<form action="" method="post" onsubmit="processForm(this)">
  <input type="text" name="user_name" id="user_name1" value="">
  <input type="submit" name="submit" value="submit" >
</form>
<form action="" method="post" onsubmit="processForm(this)">
  <input type="text" name="user_name" id="user_name2" value="">
  <input type="submit" name="submit" value="submit" >
</form>
<div id='message'></div>

jsFiddle

于 2012-08-19T16:26:45.023 に答える
2

これに追加しようと思ったのですが、1ページに複数のフォームがある場合は、フォームのaction値を取得することで、すべてのフォームを個別に処理する関数を設定できます。次のように（jQuery 1.8.3でテスト済み）：

 $('form').submit(function(){
   var action = $(this).attr("action")
   $.ajax({
     url: action,
     type:'POST',
     data: $(this).serialize(),
     success: function(){
            //alert message
        }                   
     })
   return false
 })

これが誰かを助けることを願っています！

于 2013-02-11T17:51:19.800 に答える