Javascript 表单提交前的引导模式

我是Modals新手，我有一个表单，当用户单击submit时，它将显示一个确认用户是否要提交的模式，该模式还包含来自表单字段的用户输入。我在互联网上到处搜索，但找不到符合我需要的。我所看到的是，他们标记了点击事件以打开链接上的模式。我有一个输入类型提交。你能举个例子或想法吗？谢谢这是我的表格样本

<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>

姓氏*必填项
姓名*必填项

因此，如果我答对了，单击一个按钮，您希望打开一个模式，列出用户输入的值，然后提交

为此，您首先将您的

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" />

您尚未指定函数

validateForm（）

的作用，但基于此，您应该限制表单的提交。或者，您可以在表单的按钮

#submitBtn

上运行该功能，然后在检查验证后加载模式

---

这很容易解决，只需创建一个隐藏提交：

<button id="submitCadastro" type="button">ENVIAR</button>
<input type="submit" id="submitCadastroHidden" style="display: none;" >

---

我注意到一些答案没有触发HTML5

required

属性（因为在单击操作而不是表单发送操作时执行了stuff，导致在输入为空时绕过它）：

使用带有必需属性的一些输入的

，并在末尾放置一个

一种确认输入，其中需要键入“ok”

在html中添加一个模式\u 1\u确认（以确认发送的形式）

（在模式1_确认时）将id

模式1_接受

添加到接受按钮

在html中添加第二个模式2\u errMsg（以显示表单验证错误）

（在modal_2_errMsg上）将id

modal_2_accept

添加到accept按钮

（在modal_2_errMsg上）将id

m2_Txt

添加到显示的文本保持架中

发送表单前要拦截的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;
    }
});

`九,。单击modals中的按钮时，还有一些内容：

$("#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”）仅在通过时显示
  验证，因此单击
  $（“#modal_1_accept”）
  应该
  未先验证表单就无法访问

---

您可以使用浏览器默认提示窗口。 尝试以下操作，而不是基本的

：

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

保存

您能告诉我们您使用引导模式和jQuery做了哪些尝试吗？我正在尝试这个。我想把它应用到我的身上。你能帮我吗？你有没有试过用引导平台打开一个模态框？使用此文档：您好，非常感谢这正是我所需要的。：）但我有问题，当我更改@ USS3651491时，你在哪里得到空白数据？如果这与您的验证有关，您应该在单击按钮时运行

validateForm（）

，如果仅满足验证，则加载模式。回答得很好。但是请不要使用.html（）来输出值。改为使用.text。用户不希望能够在字段中输入html。另一方面，如果用户实际输入了一些浏览器不理解的标记，则可能会丢失输入。@Jeff感谢您解释原因。更正。如果有多个表单，并且希望为每个表单提交显示确认模式（可以是表单，也可以是带有删除操作的列表），则此方法将失败，因为在

$（“#提交”）。单击
处理程序，没有关于提交哪个表单的信息。Me ajudou。。。。我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们。。。以形式解决问题，解决问题。
$("#submitCadastro").click(function(){
    if($("#checkDocumentos").prop("checked") == false){
        //alert("Aceite os termos e condições primeiro!.");
        $("#modalERROR").modal("show");
    }else{
        //$("#formCadastro").submit();
        $("#submitCadastroHidden").click();                     
    }
});

$("#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;
    }
});

$("#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");
});

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