how to send form data using AJAX in Bootstrap?

Question

I have a web application which is designed by twitter bootstrap. There is a JSP page with a small form, and I need to send its data to a Servlet without reloading the page. Below is my form.

<!--add custom item -->

<div class="modal fade" id="customItemModel" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"> <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png"  width="30px" height="30px"> <small>Back</small></a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add Custom Item</b></font></span> </div>
      <div class="modal-body">
          <form class="form-horizontal" method="get" action="PastSurgicalCustomItem" id="customItemForm"  onsubmit="formSubmit(); return false;">
        <fieldset id="modal_form">

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-1 control-label" for="textinput">Name</label>
            <div class="col-md-8">
              <input name="customName" type="text" placeholder="" class="form-control input-md">
            </div>
          </div>


          <div class="modal-footer">
              <button id="additional" class="btn btn-primary" data-dismiss="modal">Submit</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

<!-- /add custom item -->  

I use the below ajax query to send data to the servlet. This code is in the same page where the above form also in.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
   var form = $('#customItemForm');
   var counter=0;

  function formSubmit(){

 $.ajax({
     url:'PastSurgicalCustomItem',
     data: $("#customItemForm").serialize(),
     success: function (data) {



            //alert($textbox.attr("id"));
    }
});
}
</script>

We have loaded the below scripts to the JSP page as well.

!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
<!-- jQuery -->

<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

Below is my servlet.

import DB.PastSurgicalHistoryTypeTable;
import beans.main.PastSergicalHistoryTypeBean;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 *
 * @author Yohan
 */
public class PastSurgicalCustomItem extends HttpServlet {

    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code>
     * methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/plain");  // Set content type of the response so that jQuery knows what it can expect.
        response.setCharacterEncoding("UTF-8");

        String name = request.getParameter("customName");
        System.out.println(name);

    }


    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }


    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }


    @Override
    public String getServletInfo() {
        return "Short description";
    }

}

The problem I am having is that the ajax is not sending data to the servlet. I used the same code without bootstrap as well, so I am thinking whether bootstrap has to do something with this. How can I solve this problem?

Solution

I managed to solve the issue. The way it works with bootstrap is different. Below is my new code.

<script>
 $(function() {
//twitter bootstrap script
 $("button#submit").click(function(){
         $.ajax({
     type: "POST",
 url: "PastSurgicalCustomItem",
 data: $('form.form-horizontal').serialize(),
         success: function(msg){
                  alert(msg);
         },
 error: function(){
 alert("failure");
 }
       });
 });
});
</script>

You can get more idea from here - http://www.krizna.com/jquery/jquery-ajax-form-submit-using-twitter-bootstrap-modal/

Comments

[Abdelouahab]

if your button is input then $(yourForm).submit if it is a normal div you use $(yourButton).click