如何通過表單中的按鈕使用Ajax提交數據

Question

我正在嘗試制作一個使用HTML5驗證並使用ajax顯示郵件發送狀態的表單。 但是，當我單擊send按鈕時，它不起作用。

表單HTML ：

<div class="contactForm">
    <form onSubmit="onSubmitForm()" id="form">
        <div style="font-size:36px;">Contact Me</div>
        <br>
        <br>
        <label>Name*</label>
        <input name="name" id="name" type="text" required>
        <label>Subject*</label>
        <input name="subject"  id="subject" type="text" required>
        <br>
        <br>
        <label>Email*</label>
        <input name="email"  id="email" type="email" required>
        <label>Contact</label>
        <input name="subject"  id="number" type="number">
        <br>
        <br>
        <label>Your Message*</label>
        <br>
        <textarea id="message" cols=86 rows=10></textarea>
        <br>
        <button type="submit" style="float:right;"></button>
    </form>
    <div class="sendingImage">Mail Sending</div>
</div>

它包含一個div ，當我單擊網站上的按鈕時將顯示該div ，在發送郵件后，該div將自動隱藏。 但是，當我單擊按鈕時，它無法按我的要求工作。

表格JS ：

function onSubmitForm() {
    var name = $("#name").val();
    var subject = $("#subject").val();
    var email = $("#email").val();
    var number = $("#number").val();
    var msg = $("#message").val();
    $("#form").hide();
    $(".sendingImage").show();
    $.ajax({
        type: "post",
        url: "mailme.php",
        data: { "name": name, "subject": subject, "email": email, "message": message }
    })
    .done(function(msg) {
        if (msg == "1")
        {
            alert("");
        }
    });
}

表格PHP ：

<?php
$name_id = $_POST['name'];
$email_id = $_POST['email'];
$subject_id = $_POST['subject'];
$message_id = $_POST['message'];

$message = "Name: $name_id\n
 Email Address: $email_id\n
 Subject: $subject_id\n
 Message: $message_id";

//mail('xyz@gmail.com','message from website',$message);
// made above line comment to test functionality
echo '1';
?>

如何解決？

Answer 1

您必須使用preventDefault()

<input type="submit" onclick="onSubmitForm(event);" value="Submit">

或代替按鈕類型為' submit '使用' button '

<input type="button" onclick="onSubmitForm(event)" value="Submit">

另一件事是，由於您使用表單，因此最好使用serialize()來提高性能並簡化代碼

您的客戶端代碼；

function onSubmitForm(event){
 event.preventDefault();
var mydata = $("#form").serialize();
$("#form").hide();
$(".sendingImage").show();
 $.ajax({
            type: "post",
            url: "mailme.php",
            data: mydata,
            })
            .done(function(msg) 
            {
            if(msg=="1")
            {
                alert("");
            }
            });
}

並在您的服務器端php中像這樣訪問它

<?php
$data = $_POST['serialize'];
$name_id=$data['name'];
$email_id=$data['email'];
$subject_id=$data['subject'];
$message_id=$data['message'];

$message="Name: $name_id\n
 Email Address: $email_id\n
 Subject: $subject_id\n
 Message: $message_id";

//mail('xyz@gmail.com','message from website',$message);
 // made above line comment to test functionality
echo '1';
?>

希望這可以幫助

Answer 2

不是答案，但這可能有助於減少代碼：

代替

var name=$("#name").val();
var subject=$("#subject").val();
var email=$("#email").val();
var number=$("#number").val();
var msg=$("#message").val();
$("#form").hide();
$(".sendingImage").show();
 $.ajax({
            type: "post",
            url: "mailme.php",
            data: {"name":name,"subject":subject,"email":email,"message":message}
            })

嘗試：

$("#form").hide();
$(".sendingImage").show();
 $.ajax({
            type: "post",
            url: "mailme.php",
            data: $('#form').serialize()
            })

不需要所有這些var，不過我沒有嘗試您的特定情況。

另外，如果要防止頁面重新加載：

$('#form').submit(function(evt){
  evt.preventDefault()
  $.post(this.action,$(this).serialize(),function(){
    // do something on success
  });
})

使用此表單，您需要在表單中設置操作：

<form action='mailme.php' ...\

更好，因為您最終將關注點很好地分離了HTML / JS