2

ここから素敵なコードを検索して見つけました。jQueryを使用してフォームを送信する

    <input type='button' value='Submit form' onClick='submitDetailsForm()' />
<script language ="javascript" type = "text/javascript" >
    function submitDetailsForm()
    {
       $("#formId").submit();
    }
</script>

しかし、そのようなページ内の複数のフォームを処理する方法を教えていただけますか？

<form id="myForm1" action="comment.php" method="post"></form>
<form id="myForm2" action="comment.php" method="post"></form>
<form id="myForm3" action="comment.php" method="post"></form>
<form id="myForm4" action="comment.php" method="post"></form>
4

3 に答える 3

8

このように送信したいすべての入力ボタンにクラスを配置することをお勧めします。

たとえば、次のようなフォームを作成できます。

<form id="form1">
  <!--Form elements-->
  <input class="submitButton" type="button" value="submit" />
</form>
<form id="form2">
  <!--Form elements-->
  <input class="submitButton" type="button" value="submit" />
</form>

次に、jQueryを使用して次のように送信できます。

$(".submitButton").click(function() {

  //Select the parent form and submit
  $(this).parent("form").submit();

});
于 2012-07-23T09:06:37.583 に答える
1

Ajaxなしでこれを達成する方法はありません。フォームを送信すると、実際にはhttpリクエストが行われるため、まったく新しいhtmlページが読み込まれます。

これを回避する唯一の方法は、Ajaxを介してフォームを送信することです。これにより、請願の応答を制御できます（したがって、この方法で複数のフォームを送信することを妨げるものはありません）。

このjQueryプラグインでこれを実現できます

于 2012-07-23T09:06:22.640 に答える
1 

/* get all form and loop foreach */
$( "form" ).each( function() {

    /* addEventListener onsubmit each form */
    $( this ).bind( "submit", function(event) {

        /* return false */
        event.preventDefault();

        /* display each props of forms */
        console.log( event.target ); // object formHTML
        console.log( "form id: " + event.target.id );
        console.log( "form action: " + event.target.action );
        console.log( "form method: " + event.target.method );

    } );

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm1" action="comment1.php" method="post">
    <input type="submit" value="Submit Form1" />
</form>
<form id="myForm2" action="comment2.php" method="post">
    <input type="submit" value="Submit Form2" />
</form>
<form id="myForm3" action="comment3.php" method="post">
    <input type="submit" value="Submit Form3" />  
</form>
<form id="myForm4" action="comment4.php" method="post">
    <input type="submit" value="Submit Form4" />  
</form>

Codepen

Repl（DEMO）

于 2019-12-13T06:46:13.177 に答える