Question

我的表单提交无效。提交表格时没有任何反应。我尝试了一切但没有结果。我已经查看了我能找到的所有内容，但我无法弄清楚为什么我无法完善此代码。

我的代码

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {
        $('contact_queryf').bind('click', function (event) {

event.preventDefault();

          $.ajax({
            type: 'POST',
            url: 'Views/query_send.php',
            data: $('contact_queryf').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });
      });
    </script>

我的表单代码

<form role="form"  method="post" id="contact_queryf" name="contact_queryf">
    <div class="form-group">
        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
    </div>
    <div class="form-group">
        <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
    </div>
    <div class="form-group">                
        <div class="radio-inline">
            <label class="radio-inline">
                <input type="radio" name="qtype" id="qtype" value="Android" required>Android
            </label>
            <label class="radio-inline">
                <input type="radio" name="qtype" id="qtype" value="iOS" required>iOS
            </label>
            <label class="radio-inline">
                <input type="radio" name="qtype" id="qtype" value="Web" required>Web
            </label>

            <label class="radio-inline">
                <input type="radio" name="qtype" id="qtype" value="other" required>Other
            </label>                                    
         </div>
     </div>

     <div class="form-group">
        <textarea class="form-control" rows="3" name="text" id="text" required></textarea>
     </div>               

    <button type="submit" class="btn btn-custom bleft" id="contact_query" name="contact_query">Submit</button>

Answer 1

首先要尝试：

data: $('#contact_queryf').serialize()

而不是

data: $('contact_queryf').serialize()

（你错过了＃）

此外，您希望将click事件绑定到“#contact_query”（提交按钮），而不是绑定到表单本身，所以

$('#contact_query').bind(...

而不是

$('contact_queryf').bind(...

Answer 2

$(function () {
    $('#contact_queryf').on('click', function (event) {

      event.preventDefault();

      $.ajax({
        type: 'POST',
        url: 'Views/query_send.php',
        data: $(this).serialize(),
        success: function (response) {
          // response
          alert('form was submitted');
        }
      });

    });
  });

查看文档 - .on()

Answer 3

如果您使用<button type="submit"提交表单，则不需要AJAX。

或者我错过了什么？

现在，当用户点击表单时，您就会提交表单。

这里你是猫爸爸

这可以让你开始通过AJAX提交表单但是在较低的级别。

这就是你正在尝试做的事情。

<button type="submit" class="btn btn-custom bleft" id="contact_query" name="contact_query" onclick="btnSubmitForm(event)">Submit</button>


    var btnSubmitForm = function (event) {

       event.preventDefault();

        var newForm = new FormData(document.forms[0]),
            xhr = new XMLHttpRequest(),
            that = this;

        xhr.onload = function () { /*do something when response is back from server*/ };
        xhr.open('GET|POST|PUT|DELETE', 'YOUR URL', true);
        xhr.send(newForm);
        return false;
    };

Answer 4

您缺少jquery选择器中的＃

$('contact_queryf').bind('click', function (event) {

应该是

$('#contact_queryf').bind('click', function (event) {

Answer 5

selector不正确，请更改选择器的

$(function () {
        $('#contact_query').bind('click', function (event) {

event.preventDefault();

          $.ajax({
            type: 'POST',
            url: 'Views/query_send.php',
            data: $('#contact_queryf').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });
      });

OR

$(function () {
        $('#contact_queryf').submit(function (event) {
          $.ajax({
            type: 'POST',
            url: 'Views/query_send.php',
            data: $(event.target).serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });

在HTML中，缺少表单close </form>标记

表格提交不起作用

5 个答案: