Question

我有一个简单的html表单，其中有一个字段提交到download.php，它验证表单并最终向我发送一封包含用户输入的电子邮件。到目前为止，一切都很好 - 但我希望错误消息和感谢消息显示在原始的html表单中，而不是在新页面上（现在正在发生）。

您是否可以告诉我在单击提交按钮后如何保持myform.html可见，并在“通知”div中加载错误并感谢您的消息？

BTW，为了防止它相关，myform.html使用jQuery .load（）在index.html中动态显示。

感谢您的帮助！

myform.html

<html>
<head>...</head>
<body>

    <div id="notification"></div> <!-- want to load errors and thank you, here -->

    <form id="downloadForm" method="post" action="_php/download.php">

        <label for="biz_email">Business Email:</label><input type="text" name="biz_email">

        <div id="submit" class="submit_button"></div>
        <!-- FYI submit function called in separate jQuery file -->

    </form>

</body>
</html>

的download.php

<?php
if(isset($_POST['biz_email'])) {


    $email_to = "foo@bar.com"; //my email
    $email_subject = "form submission";
    $email_from ="form test";

    $biz_email = $_POST['biz_email'];
    $error_message = "";


    // validation
    ...


    //error code 
    function died($error) {
        echo "There are errors in your submission:<br /><br />";
        echo $error."<br /><br />";
        echo "Please go back and fix these errors.<br /><br />";
        die();
    }


    //email message (sent back to me)
    $email_message = "Form details below.\n\n";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "Email: ".clean_string($biz_email)."\n";

    // create email headers
    $headers = 'From: '.$biz_email."\r\n".
    'Reply-To: '.$biz_email."\r\n" .
    'X-Mailer: PHP/' . phpversion();

    @mail($email_to, $email_subject, $email_message, $headers);  
    ?>

    <!-- thank you message -->

    Success!

<?php
}
?>

Answer 1

您可以使用以下内容通过AJAX发布表单：

$('#downloadForm').submit(function (e) {
    e.preventDefault(); // Don't let the form get submitted the normal way

    $.post("download.php", $('#downloadForm').serializeArray()).then(function (data) {
        $('notification').html(data);
    }, function (error) {
        $('notification').html("Network error submitting form - please try again");
    });
});

可以对此做出很多改进，但希望这足以让你开始。

Answer 2

我个人会使用$ .post函数。

所以它看起来像这样：

    <label for="biz_email">Business Email:</label><input type="text" name="biz_email" id="biz_email">

    <div id="submit" class="submit_button" onclick="submitForm();"></div>
    <!-- FYI submit function called in separate jQuery file -->

<script type="text/javascript">
function submitForm(){

var biz_email = $("#biz_email").val();

$.post('THE URL OF THE PHP FILE YOUR POSTING TO', {biz_email: biz_email}, function(result){

$("#notification").html(result);

});
}
</script>

Answer 3

我使用空的action并将表单发布给自己。这样，您就可以在同一页面中显示错误：

结构：

<?php

if(isset($_POST['submit'])){
//validation
}

<form action="" method="post">
<!-- input fields here -->
</form

完整代码：

<?php

if(isset( $_POST['submitbutton']) ){
$email_to = "foo@bar.com"; //my email
$email_subject = "form submission";
$email_from ="form test";
$biz_email = $_POST['biz_email'];
$error_message = "";

function died($error) {
echo "There are errors in your submission:<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}

$email_message = "Form details below.\n\n";

function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}

$email_message .= "Email: ".clean_string($biz_email)."\n";
$headers = 'From: '.$biz_email."\r\n".
'Reply-To: '.$biz_email."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);          
}    
?>

<!-- form start -->
<div id="notification"></div>
<form id="downloadForm" method="post" action="">
<label for="biz_email">Business Email:</label><input type="text" name="biz_email">
<input type="submit" id="submit" name="submitbutton" class="submit_button"></div>
</form>
<!-- form end -->

希望这有帮助！

Answer 4

对我来说，我会使用php的服务器端功能，即$ _SERVER ['PHP_SELF']。

只需更改代码中的表单操作，例如

 <form id="downloadForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

然后将download.php代码粘贴到myform.html中，并将扩展名更改为.php

但请将代码附加到if以进行验证，如：

if(isset($_POST['biz_email'])) { 
    //your download.php code here
}

然后只需在div notification

中进行验证

<div id="notification">
   <?php echo $error_message; ?>
</div> <!-- want to load errors and thank you, here -->

//this is all php code

Answer 5

您可以使用文本框的某些ajax验证 onblur 或 onchange 事件。

否则您可以调用提交按钮的 onsubmit 事件。您可以使用以下功能进行上述操作。

jQuery(function($) {
$('body').on('blur','#filedname',function()  {jQuery("#validation").html('Validating data.....');jQuery.ajax({'type':'POST','url':'download.php','cache':false,'data':{data: $('#formid').serializeArray()},'success':function(html)       {jQuery("#validation").html(html)}});return false;});
}); 

<div id='validation'>Validation result</div>

如何在与表单本身相同的页面上显示表单验证消息？

5 个答案: