表格提交無效

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