0

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

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

顺便说一句，以防万一，myform.html 使用 jQuery .load() 在 index.html 上动态显示。

谢谢你的帮助！

我的表格.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>

下载.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
}
?>
4

5 回答 5

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");
    });
});

可以对此进行很多改进，但希望这足以让您入门。

于 2013-07-21T23:39:24.240 回答
0

对我来说，我会使用 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
于 2013-07-22T00:28:13.787 回答
0

我个人会使用 $.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>
于 2013-07-21T23:42:26.357 回答
0

我会使用一个空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 -->

希望这可以帮助！

于 2013-07-21T23:46:34.613 回答
0

您可以使用文本框的一些 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>
于 2013-07-23T07:20:36.453 回答