如何从模态提交引导程序表单

时间:2014-11-25 18:03:25

标签: javascript php jquery twitter-bootstrap codeigniter

我在bootstrap模式的主体中有以下形式:

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

表单正在提交但不是正确的codeigniter控制器和功能。它似乎从codeigniter视图中获取了模态所在的URL并且对序列化的表单值进行了处理,忽略了我的jquery post请求。我做错了什么?

2 个答案:

答案 0 :(得分:2)

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

您忘记了序列号中的(

答案 1 :(得分:1)

您的点击事件需要在文档中添加。就像这样:

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

});