表格提交无效

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');
            }
          });

        });
      });

要么

$(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中，缺少表单关闭</form>标记