web-dev-qa-db-ja.com

javascript 1つのボタンで複数のフォームを送信する

私のhtmlには、複数のフォーム（テキスト入力、ラジオボタン、チェックボックス、選択）と1つのボタンがあります。これらすべてのフォームに入力して、phpファイルに値を送信したいと思います。今のところ、テキスト入力と選択から値を送信しようとしていますが、この時点で行き詰まっています。

私はjs送信ファイルを持っています：

 submitForms = function(){
  document.getElementById("form1").submit();
  document.getElementById("form2").submit();
 }

そして私のフォームは次のようなものです：SELECT：

 <form id ="form1" name="dists" action="solve.php" method="post">
        <select id="demo" name="sadzba" onchange="selectElement1(this.value)>
                <option value="">-- vyberte oblasť --</option>
        </select>
    </form>

テキスト入力フォーム+ボタン：

 <form id="form2" action="solve.php" method="post">
    <input type="text" name="spotVT" ><label>kWh za rok VT</label>
    <div id="nt" style='display:none'><input type="text" name="spotNT"  ><label>kWh za rok NT</label></div>

    </form>
 <input id="sub" type="button" value="Ok" style="margin-left:15px;" onclick="submitForms()"/>

しかし、これは機能していません。手伝ってくれませんか？ありがとうございました

javascriptjqueryformssubmitform-submit
9
user2886091

1つのフォームを送信すると、そのフォームの送信後にページがJavaScriptをリロードまたは終了するため、Ajaxを使用して同時に複数のフォームを送信することをお勧めします

jqueryを使って

$("#sub").click(function(){
    $("form").each(function(){
        var fd = new FormData($(this)[0]);
        $.ajax({
            type: "POST",
            url: "solve.php",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data,status) {
               //this will execute when form is submited without errors
           },
           error: function(data, status) {
               //this will execute when get any error
           },
       });
    });
});

上記のコードは、ID subのボタンをクリックすると、すべてのフォームを送信します

1
Vikas Kandari

これは、ネイティブJavaScript実装の簡単な例です。

<!DOCTYPE html>
<html>
<head>
    <title>Multiform - JAVASCRIPT</title>
</head>
<body>

<fieldset>
    <legend>Form 1</legend>
    <form name="f1" id="f1" onsubmit="return validate(this)">
        <input type="text" name="username" placeholder="Username" />
    </form>
</fieldset>

<fieldset>
    <legend>Form 2</legend>
    <form name="f2" id="f2" onsubmit="return validate(this)">
        <input type="text" name="email" placeholder="Email" />
    </form>
</fieldset>

<fieldset>
    <legend>Form 3</legend>
    <form name="f3" id="f3" onsubmit="return validate(this)">
        <input type="text" name="password" placeholder="Password" />
    </form>
</fieldset>

<button onclick="submitAll();">SUBMIT ALL</button>

<script>
'use strict';

function validate(form){
    //forms processsing goes here...
    console.log(form, form.name)
    return false;
}

function submitAll(){
    for(var i=0, n=document.forms.length; i<n; i++){
        document.forms[i].onsubmit();
    }

}

</script>

</body>
</html>
1
Jhan Mateo

1つのフォームのみを送信する方が簡単です。 form = "your-form-id"を割り当てることで、selectタグとinputタグに同じフォーム名を付けることができます。

1
Pei Guo

あなたはこれを試すことができます。すべてのフォームを送信することがページで問題ない場合

 $('form').submit();

実際に使用されている関数：

function trySubmitAllForms() {
    if ($('.saveSpinner').is(':visible')) {
        return;
    }
    if ($('form').valid()) {
        $('.saveSpinner').show();
        $('form').submit();
    } else {
        showValidationErrorMessages();
    }
}
1
Frog