Javascript 从模态引导调用操作

我的HTML代码如下所示：

<form action="form2_action.php" method="post">
    <table>
        <tr>
            <td>First Name </td>
            <td>:</td>
            <td><input type="text" id="first_name" name="first_name" required></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>:</td>
            <td><input type="text" id="last_name" name="last_name" required></td>
        </tr>
        <tr>
            <td>Age</td>
            <td>:</td>
            <td><input type="text" id="age" name="age" required></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><input type="submit" value="Submit" id="submit"></td>
        </tr>
    </table>
</form> 


<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
            </div>

            <div class="modal-body">
                <table style="width:100%">
                    <tr>
                        <td style="width:30%">First Name</td>
                        <td height top="40" style="width:70%" id="first_name_modal"></td>
                    </tr>
                    <tr>
                        <td>Last Name</td>
                        <td height="40" id="last_name_modal"></td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td height="40" id="age_modal"></td>
                    </tr>                 
                </table>        

                <p class="debug-url"></p>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save changes</button>&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>  
            </div>
        </div>
    </div>
</div>

演示如下：

$('#submit').on('click',function(e){

        var first_name_modal = document.getElementById("first_name").value;
        var last_name_modal = document.getElementById("last_name").value;
        var age_modal = document.getElementById("age").value;

        if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
            $("#confirm-save").modal("show");
            $('#first_name_modal').text(first_name_modal);
            $('#last_name_modal').text(last_name_modal);
            $('#age_modal').text(age_modal);
          return false;
        }
    });

如何从模式引导调用操作

因此，当点击模式引导中的“保存更改”按钮时，如何让系统调用动作

form2_action.php

非常感谢

• 为表单提供一个

  id

  ，以便在javaScript代码中引用

• 然后定义一个函数，如下所示：

  function formSubmit(){
     $('#form1').submit();
  }
  

• 点击保存按钮，调用

  formSubmit

提交表格

$（“#模式提交btn”）。单击（函数（）{ $（'modal-dialog-id'）.modal（'hide'）； $（'#表单id'）。提交（）； });

---

检查我的脚本，它工作正常。。只需将form标记置于bootstrap模式，并从输入中获取值到bootstap模型。这是小提琴，你可以检查一下：

名字
:
姓
:
年龄
:
提交
&时代；
你确定要预订这次旅行吗？
名字
姓
年龄

取消
$（“#提交”）。在（'click'，函数（e）{
document.getElementById（“first\u name\u modal”）.value=document.getElementById（“first\u name”）.value；
document.getElementById（“姓氏”）.value=document.getElementById（“姓氏”）.value；
document.getElementById（“age_modal”）.value=document.getElementById（“age”）.value；
如果（名字模式！=“”&姓氏模式！=“”&年龄模式！=“”）{
$（“确认保存”）.modal（“显示”）；
$（'first#u name_modal'）。文本（first_name_modal）；
$（'last\u name\u model'）。文本（last\u name\u model）；
$（'age#u model'）。文本（age#u model）；
返回false；
}
});

只需提交该表格即可。试试

$（你的表单选择器）。submit（）

你想通过ajax或表单提交吗？你可以用任何一种方式来做。@RayonDabre。我试过了，但没有成功。试着看看这里：@Raj，通过表单提交，没有什么比小提琴更管用的了..试着让它管用。。

<table>
    <tr>
        <td>First Name </td>
        <td>:</td>
        <td><input type="text" id="first_name" name="first_name" required>          </td>
    </tr>
     <tr>
        <td>Last Name</td>
        <td>:</td>
        <td><input type="text" id="last_name" name="last_name" required></td>
    </tr>
    <tr>
        <td>Age</td>
        <td>:</td>
        <td><input type="text" id="age" name="age" required></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td><button type="button" id="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#confirm-save">Submit</button></td>
    </tr>
</table>



       <div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
    <div class="modal-content">
    <form action ="action.php">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
        </div>

        <div class="modal-body">
            <table style="width:100%">
                <tr>
                    <td style="width:30%">First Name</td>

                 <td height top="40" style="width:70%"  >  <input type="text" id ="first_name_modal"></td> 
                </tr>
                <tr>
                    <td>Last Name</td>

                     <td height="40" > <input type="text" id ="last_name_modal"> </td>
                </tr>
                <tr>
                    <td>Age</td>

                     <td height="40">  <input type="text" id ="age_modal"> </td>
                </tr>                 
            </table>        

            <p class="debug-url"></p>
        </div>

        <div class="modal-footer">
           <input type="submit" /> &nbsp;
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>  
        </div>
     </div>
     </div>
     </div>
  </form>

   </body>
      <script>
          $('#submit').on('click',function(e){

   document.getElementById("first_name_modal").value = document.getElementById("first_name").value;
    document.getElementById("last_name_modal").value= document.getElementById("last_name").value;
     document.getElementById("age_modal").value = document.getElementById("age").value;

    if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
        $("#confirm-save").modal("show");
        $('#first_name_modal').text(first_name_modal);
        $('#last_name_modal').text(last_name_modal);
        $('#age_modal').text(age_modal);
           return false;
              }
               });
     </script>