如何从模态提交引导表单


How to submit bootstrap form from a 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>

表单正在提交,但未提交到正确的代码点火器控制器和功能。 它似乎从代码点火器视图中获取 URL,即模态在内并附加序列化表单值,忽略我的 jQuery POST 请求。我做错了什么?

尝试更改您的 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");
        }
    });
});

您忘记了序列化上的(

您的点击事件需要添加到文档中,如下所示:

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