web-dev-qa-db-ja.com

Bootstrap=フォーム送信前のモーダル

私はモーダルを初めて使用します。フォームがあり、ユーザーが送信をクリックすると、ユーザーが送信するかどうかを確認するモーダルが表示されます。モーダルにはフォームフィールドからのユーザー入力も含まれます。インターネットで検索しましたが、ニーズに合ったものが見つかりません。そして、私が見るのは、リンク上でモーダルを開くためにクリックイベントにタグを付けることだけです。入力タイプのサブミットがあります。例やアイデアを教えてください。ありがとう！これが私のサンプルフォームです。

<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post"  enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" /> 

       <div class="form-group">
         <label>Last Name</label><span class="label label-danger">*required</span>
         <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
       </div>

        <div class="form-group">
          <label>First Name</label><span class="label label-danger">*required</span>
          <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
       </div>

  <input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
  <input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>
javascriptjquerytwitter-bootstrapmodal-dialog
32
user3651491

そのため、ボタンをクリックすると、ユーザーが入力した値を一覧表示するモーダルを開き、送信することができます。

このために、最初に_input type="submit"_を_input type="button"_に変更し、_data-toggle="modal" data-target="#confirm-submit"_を追加して、クリックするとモーダルがトリガーされるようにします。

_<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
_

次に、モーダルダイアログ：

_<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to submit the following details?

                <!-- We display the details entered by the user here -->
                <table class="table">
                    <tr>
                        <th>Last Name</th>
                        <td id="lname"></td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td id="fname"></td>
                    </tr>
                </table>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>
_

最後に、少しのjQuery：

_$('#submitBtn').click(function() {
     /* when the button in the form, display the entered values in the modal */
     $('#lname').text($('#lastname').val());
     $('#fname').text($('#firstname').val());
});

$('#submit').click(function(){
     /* when the submit button in the modal is clicked, submit the form */
    alert('submitting');
    $('#formfield').submit();
});
_

関数validateForm()の動作を指定していませんが、これに基づいて、フォームの送信を制限する必要があります。または、フォームのボタン_#submitBtn_クリックでその関数を実行し、検証の確認後にモーダルをロードできます。

[〜＃〜] demo [〜＃〜]

49
AyB
$('form button[type="submit"]').on('click', function () {
   $(this).parents('form').submit();
});
0
Abdo-Host

いくつかの答えがHTML5 required属性をトリガーしていないことに気づきました（clickingのアクションではなく、 form sendのアクションで、入力が空の場合はそれをバイパスします）：

  1. 必要な属性を持ついくつかの入力を持つ_<form id='xform'></form>_を用意し、最後に_<input type='submit'>_を配置します。
  2. 「ok」と入力する必要がある確認入力_<input type='text' name='xconf' value='' required>_
  3. modal_1_confirmをHTMLに追加します（送信の形式を確認するため）。
  4. （modal_1_confirmで）id _modal_1_accept_を承認ボタンに追加します。
  5. 2番目のmodal_2_errMsgをHTMLに追加します（フォーム検証エラーを表示するため）。
  6. （modal_2_errMsgで）id _modal_2_accept_を受け入れボタンに追加します。
  7. （modal_2_errMsgで）表示されるテキストホルダーにid _m2_Txt_を追加します。

  8. フォームが送信される前にインターセプトするJS：

    _$("#xform").submit(function(e){
    var msg, conf, preventSend;

    if($("#xform").attr("data-send")!=="ready"){
        msg="Error."; //default error msg
        preventSend=false;

        conf=$("[name='xconf']").val().toLowerCase().replace(/^"|"$/g, "");

        if(conf===""){
            msg="The field is empty.";
            preventSend=true;
        }else if(conf!=="ok"){
            msg="You didn't write \"ok\" correctly.";
            preventSend=true;
        }

        if(preventSend){ //validation failed, show the error
            $("#m2_Txt").html(msg); //displayed text on modal_2_errMsg
            $("#modal_2_errMsg").modal("show");
        }else{ //validation passed, now let's confirm the action
            $("#modal_1_confirm").modal("show");
        }

        e.preventDefault();
        return false;
    }
});
_

`9。モーダルからボタンをクリックするときにもいくつかのもの：

_$("#modal_1_accept").click(function(){
    $("#modal_1_confirm").modal("hide");
    $("#xform").attr("data-send", "ready").submit();
});

$("#modal_2_accept").click(function(){
    $("#modal_2_errMsg").modal("hide");
});
_

重要な注意：したがって、追加ボタン$("#modal_1_accept")をクリックするだけで検証がパスしたと見なされ、_"ready"_属性：

  • この理由は、検証に合格したときに$("#modal_1_confirm").modal("show");が表示されるonlyであるため、$("#modal_1_accept")をクリックする必要があるからです。最初にフォームを検証せずに到達できません。
0
ajax333221

ブラウザのデフォルトのプロンプトウィンドウを使用できます。基本的な<input type="submit" (...) > tryの代わりに：

<button onClick="if(confirm(\'are you sure ?\')){ this.form.submit() }">Save</button>
0
Matt