Ajax不起作用，而是啟動默認方法和操作

所以我的問題是ajax（或其他東西）不適用于表單，最奇怪的是有一種表單可以與AJAX完美配合。我已經嘗試了很多事情：改變input與button和它的型別"submit" to "button"，試圖用jQuery的，從另一種方法.post()和.get()，試圖使用xmlHttpRequest。我現在很困惑。也許你能看到我看不到的東西。謝謝

編輯：所以，我對它做了一些修改，并在控制臺中出現了這個錯誤（現在那里沒有任何錯誤）。 錯誤

html格式

<form action="./contactAction.php" method="POST" class="contact_form" id="cform"name="contactForm">
        <input type="text" name="contactFname" placeholder="Prenumele" />
        <input type="text" name="contactLname" placeholder="Numele" />
        <input type="text" name="contactEmail" placeholder="Emailul tau" />
        <textarea name="contactSubject" placeholder="Scrie mesajul tau" style="height: 200px"></textarea>
        <button type="submit" name="contactBtn">Submit</button>
      </form>

JS

$(document).ready(function () {
$("#contactBtn").click(() => {
    contactFormValidation();
});

});

function contactRequest() {
let fname = $("#contactFname");
let lname = $("#contactLname");
let email = $("#contactEmail");
let subj = $("#contactSubject");

$.ajax({
    type: "POST",
    url: "../../contactAction.php",
    data: ({"constactFname": fname, "contactLname": lname, "contactEmail": email, "contactSubject": subj}),
    dataType: "html",
    success: (response) => {
        alert("Request success");
        //$("#loginPage").html(response);
    },
    error: () => {
        alert("Error :(");
    }
});
return false;

}

function contactFormValidation() {
let $form2 = $("#contactForm");
$form2.validate({
    wrapper: "div",
    debug: false,
    rules: {
        contactFname: {
            required: true
        },
        contactLname: {
            required: true
        },
        contactEmail: {
            required: true,
            email: true
        },
        contactSubject: {
            required: true
        }
    },
    submitHandler: () => {
        alert("Submit calledd");
        contactRequest();
    }
});

}

uj5u.com熱心網友回復：

您的代碼中有一些語法錯誤。

1. 您的選擇器無效。

從它的外觀來看，您正在嘗試根據name屬性獲取值。為此，您需要專門為此使用選擇器語法。

2. 使用您當前的邏輯，您也永遠不會實際獲取輸入欄位的值。您只是持有對元素的參考。您需要訪問輸入欄位的值才能檢索它。

3. 您沒有使用有效的變數宣告。您需要使用var, let,來指定變數宣告const。

以正確方式獲取值的示例是：

const fname   = $('input[name="contactFname"]').val();
const lname   = $('input[name="contactLname"]').val();
const email   = $('input[name="contactEmail"]').val();
const subject = $('input[name="contactSubject"]').val();

另一種方法是使用serialize()jQuery 中的方法。更多關于這里。

uj5u.com熱心網友回復：

你可以試試這個方法。

    <form action="./contactAction.php" method="POST" class="contact_form" id="cform" name="contactForm">
        <input type="text" id="contactFname" placeholder="Prenumele" />
        <input type="text" id="contactLname" placeholder="Numele" />
        <input type="text" id="contactEmail" placeholder="Emailul tau" />
        <textarea name="contactSubject" placeholder="Scrie mesajul tau" style="height: 200px"></textarea>
        <button type="submit" name="contactBtn">Submit</button>
    </form>
    <div id="contactPage">Hello</div>

Javascript

<script>
    $('#cform').submit(function() {
      contactFormValidation();
      return false;
    });
    
    function contactRequest() {
    fname = $("#contactFname").val();
    lname = $("#contactLname").val();
    email = $("#contactEmail").val();
    subj  = $("#contactSubject").val();
    $.ajax({
        type: "POST",
        url: "../../contactAction.php",
        data: {contactFname: fname, contactLname: lname, contactEmail: email, contactSubject: subj},
        dataType: "html",
        success: function (response) {
            $("#contactPage").html(response);
        }
    });
    return false;
    }
    
    function contactFormValidation() {
        $('#contactFname').attr('required',true);
        $('#contactLname').attr('required',true);
        $('#contactEmail').attr('required',true);
        return false;
    }
</script>

標籤：查询 阿贾克斯 表单提交

上一篇：JQuery克隆元素

下一篇：當我的輸入值使用JavaScript日期選擇器更改時，如何呼叫事件？