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，并且在发送邮件后，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(""); } }); }会自动隐藏。但是，当我点击按钮时，它不能正常工作。

表单JS ：

<?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';
?>

表单PHP ：

{{1}}

如何解决？

Answer 1

您必须使用preventDefault()

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

或代替按钮类型＆＃39; submit＆＃39;使用＆＃39; button＆＃39;

<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()
            })

不需要所有这些变量，但我没有尝试过你的具体案例。

另外，如果您想阻止页面重新加载：

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

使用此表单，您需要在表单中设置操作：

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

它更好，因为你最终将关注点分离为HTML / JS

如何使用ajax通过按钮在表单中提交数据

2 个答案: