问如何使用jQuery将表单数据添加到同一页面中的引导模式中？
EN

Stack Overflow用户

提问于 2017-03-13 23:31:35

回答 1查看 3.5K关注 0票数 0

我有一个要求，试图为用户输入/选择一些形式的信息编写代码，然后单击Submit按钮，然后出现一个弹出窗口(引导模式)，其中只有一个输入框，用户只需键入该选择的名称。我在这里要做的是，一旦用户在表单中提供一些信息&单击submit按钮后，我将在弹出模式打开之前存储该表单(在用户单击submit按钮和弹出窗口之后，我将存储给定的表单输入，并获取最后插入的记录id，并将该id绑定到弹出模式中的一个隐藏输入字段)，在弹出窗口打开用户键入名称并单击Save按钮之后，我将使用相同的记录id更新该记录。这里面临的问题是，在用户输入所有表单数据并单击submit按钮后，我将在弹出窗口打开之前将这些数据存储在数据库中，在弹出窗口中打开弹出窗口后，如果用户单击close或Esc按钮而不指定名称，则该表单数据已经用空名称保存，因为用户在弹出框中没有指定名称，因为当用户单击“close”或“Esc”按钮时，我的要求是如果用户不指定名称，则不应该将该记录存储在数据库中。

我的表格代码：

<form method="post" action="" id="my_form_id" class="my_form_class"> 
 <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="radio" name="my_input_name_116" class="all select_option" data-id="116" value="all">
     <label for="all">All</label>
     <input type="radio" name="my_input_name_116" class="yes select_option" data-id="116" value="yes">
     <label for="yes">Yes</label>
     <input type="radio" name="my_input_name_116" class="no select_option" data-id="116" value="no" checked>
      <label for="no">No</label>
 </div>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#rsModal" data-backdrop="static" data-keyboard="false" id="save_run_setup">SAVE RUN SETUP</button>

我的引导模态代码：

<div class="modal fade" id="rsModal" 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">Run Setup Name</h4>
            </div>
            <div class="modal_failure run_setup_error">
                <p><span class="add_failure_msg"></span></p>
            </div>
            <div class="popup_success run_setup_success">
                <p><span class="add_success_msg"></span></p>
            </div>
            <form method="post" action="" id="add_rs_modal">
                <div class="modal-body">
                    <input type="hidden" class="form-control modal_user_id" id="user_id" name="user_id" value="">
                    <input type="hidden" class="form-control modal_rs_row_id" id="rs_row_id" name="rs_row_id" value="">
                    <div class="form-group">
                        <!--<label for="module-name">Run setup name</label>-->
                        <input type="text" class="form-control modal_runsetup_name" name="modal_runsetup_name" placeholder="Enter Run Setup Name" value="" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                    <button type="button" class="btn btn-success" class="add_runsetup_name" id="add_runsetup_name">Save Run Setup</button>
                </div>
            </form>
        </div>
    </div>
</div>

我在这里的问题是，如何携带表单输入数据以及用户将在弹出框中指定的名称，如果用户不提供名称，那么我将不保存以前的表单数据？任何帮助都将不胜感激。

编辑：

我要做的是，在用户将输入输入到表单"my_form_id“之后，他单击'save_run_setup‘按钮，然后在ajax调用中将此表单值存储到一个表中，并获取最后插入的行id，并将该行id放入弹出模式(在ajax调用之后打开)，要求用户为该表单选择输入一个名称，并使用该模式弹出的' name’更新该回溯记录。但是如果用户没有给出任何名称，那么在用户单击“保存运行安装程序”按钮后，我已经保存了一条记录。我的要求是，我必须将'my_form_id‘表单数据添加到引导模式，或者将模态输入值添加到该表单中。

php

jquery

ajax

forms

bootstrap-modal

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-14 03:42:48

如果我让你正确的话

我的要求是，如果用户不提供名称，那么该记录不应该存储在数据库中。

使用引导模式关闭事件和验证输入字段，您可以确保如果用户不填充输入字段，则其中一个模式保持打开并显示消息，如果用户填充输入字段，则可以运行Ajax调用将数据添加到数据库或任意使用它.

$('#rsModal').on('hide.bs.modal', function() {
  var UserName = $("#modal_runsetup_name").val();
  if (UserName == '') {
    alert('Enter User Name');
    return false;
  } else {
    alert('do what ever you like to do');
  }
});