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

Question

I have a requirement and trying to write code for Where user enters/selects some information in form then clicks on Submit button then a popup window(bootstrap modal) appears with just one single input box where user just types a name for that selection. What I am doing here is once user gives some information in form & after clicks on submit button I am storing that form before popup modal opens(in the middle of after user clicks on submit button and a popup window opens I am storing the given form inputs and fetching that last inserted record id and binding that id to a hidden input field in the popup modal), after popup window opens user types a name and clicks on Save button then I will be updating that record by using the same record id. The problem Am facing here is after user enters all form data and he clicks on submit button I am storing this data in the database before a popup window opens, after popup window opens in popup window if user clicks on close or Esc button without giving a name then that form data is already saved with empty name becoz user didn't give a name in popup box because as he clicks on 'close' or 'Esc' button but my requirement is if user doesn't give a name then that record shouldn't be stored in the database.

My Form code:

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

My bootstrap modal code:

<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 question here is how to carry the form input data along with a name which user is going to give in the popupbox, if user doesn't give a name then I will not save that previous form data? Any help would be appreciated.

Edited :

What I am doing is after user gives the input to the form "my_form_id" he clicks on 'save_run_setup' button then in ajax call I am storing this form values into a table and getting the last inserted row id and putting that row id in popup modal(which opens after this ajax call) asking user to enter a name for this form selection and updating that revious record with this 'name' given in modal popup. But If user doesn't give a any name then I already saved a record after user clicks on 'Save Run Setup' button. My requirement is I have to either append 'my_form_id' form data to bootstrap modal or modal input value to this form.

Answer 1

If I got you correct

my requirement is if user doesn't give a name then that record shouldn't be stored in the database.

with bootstrap modal close event and validate the input field you can make sure that if user does't fill the input field either modal remain open and show a message and if user fill the input field you can run an Ajax call to add the data to database or do what ever you like to do with it....

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

Note you don't need "Save Run Setup" button in modal, modal close button will take care of everything.

Fiddle Example