如何在同一弹出框中要求用户输入并返回结果？

Question

Flow is as below:

1. User clicks on a button and a pop up box will be displayed
2. User will be required to enter a pincode in the pop up box
3. Server will search the database and return the results
4. Display the results in the same pop up box as step 1. 

I am currently facing difficulty in step 4 which is displaying the results in the same pop up box.

html code for pop up box:

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Enter Pincode</h4>
      </div>
      <div class="modal-body">
        <p>Please request for the pincode from the customer.</p>
        <form class="form-horizontal" method="POST" action="/users/home/dashboard" role="form">
          <div class="form-group">
            <label  class="col-sm-2 control-label">Pincode:</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" 
                name="pinCode" placeholder="Pincode from customer"/>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Confirm</button>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

When user clicks on submit, I will run the node.js code below:

   var sql = "SELECT * FROM customers WHERE pincode = ?";
      db(function(err,conn){
        conn.query(sql,[pinCode],function(err,results){
          if(err){
            console.log("Error at dashboard:" + err);
            //res.render('dashboard',{data:results});
          }else{
            console.log(results);
          }
        });
      });

The question is how can I return the results from server which contains customer details in the same pop up box ?

Answer 1

Instead POSTing using form do it using AJAX. On .success get PIN and change modal text using data returned.

Example (add some ID to your form, for example "form-horizontal1", and call POST on button click:

$.post( "/users/home/dashboard", $("#form-horizontal1").serialize(), function( data))
  .done(function(data) {
    $(".modal-body").html(data);
  });