How to submit bootstrap form from a modal

Question

I have the following form within the body of a bootstrap modal:

    <form id="contact" class="contact" name="contact">

<fieldset>

<!-- Form Name -->
<legend>Free Contact</legend>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="To">To</label>
  <div class="controls">
    <input id="To" name="To" placeholder="placeholder" class="input-xlarge" required="" type="text">

  </div>
</div>

<!-- Textarea -->
<div class="control-group">
  <label class="control-label" for="Message">Message</label>
  <div class="controls">                     
    <textarea id="Message" name="Message"></textarea>
  </div>
</div>

 <!--Button (Double)--> 
<div class="control-group">
  <label class="control-label" for="Send"></label>
  <div class="controls">
    <button id="Send" name="Send" class="btn btn-success">Send</button>
    <button id="Cancel" name="Cancel" class="btn btn-danger">Cancel</button>
  </div>
</div>

</fieldset>
</form>

<script>

 $("input#Send").click(function(e){


  e.preventDefault();

    $.ajax({
        type: "POST",
        url: "Update/contact", //process to mail
        data: $('form.contact').serialize(),
        success: function(msg){
                    console.log($('form.contact').serialize);

        },
        error: function(){
            alert("failure");
        }
    });
});




</script>

The form is submitting but not to the correct codeigniter controller and function. it appears to take the URL from the codeigniter view that the modal is within and tack on the serialized form values, ignoring my jquery post request. What am I doing wrong?

Answer 1

try to change your ajax

$("#Send").click(function(e){
  e.preventDefault();

    $.ajax({
        type: "POST",
        dataType: "html"
        url: "Update/contact", //process to mail
        data: $('form.contact').serialize(),
        success: function(data){
                    console.log($('form.contact').serialize();

        },
        error: function(){
            alert("failure");
        }
    });
});

You forgot the ( on your serialize.

Answer 2

Your click event need to be add in the document.ready like so :

$(document).ready(function () {
     $("input#Send").click(function(e){


          e.preventDefault();

          $.ajax({
               type: "POST",
               url: "Update/contact", //process to mail
               data: $('form.contact').serialize(),
               success: function(msg){
                   console.log($('form.contact').serialize);

               },
               error: function(){
               alert("failure");
               }
           });
      });

});