1

我试图阻止页面重新加载，并且我想在提交表单时在表单的某处显示一条小消息，说“成功注册”。我可以通过返回 false 来做到这一点，但用户的输入不会发布到我的数据库中。

先感谢您

这是我的代码：

        <script>

    function validate(form) {
        fail  = validateName(form.name.value)
        fail += validateEmail(form.email.value)
        fail += validateCity(form.city.value)
        if (fail == "") { 
   alert("You have been successfully registered."); return true }
        else { 
   document.getElementById('errors').innerHTML = fail;}
   return false
}

        function validateName(field) {
            if (field == "") return "No name was entered.<br/>"
            else if (field.length < 3) return "Name must be at least 3 characters.<br/>"
            else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
            return ""
            }
        function validateEmail(field) {
            if (field == "") return "No email was entered.<br/>"
            else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
            return ""
            }
        function validateCity(field) {
            if (field == "") return "No city was entered.<br/>"
            else if (field.length < 3) return "City must be at least 3 characters.<br/>"
            else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
            return ""
            }

    </script>


<form action="<?php echo $editFormAction; ?>" name="subscribe" onSubmit="return validate(this)" id="subscribe" method="POST" autocomplete="off">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>


<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>

<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>

<div id="buttons">
            <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">

            <input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!">

            <br style="clear:both;">
        </div>
<input type="hidden" name="MM_insert" value="subscribe">
  </form>

！（https://docs.google.com/file/d/0B69C1JAAohvcYmIyOFdZRGlPRFk/edit?usp=sharing）

4

3 回答 3

1

正如之前的海报所指出的，您应该编写一个 Ajax 函数来异步提交表单。表单处理程序将返回一条消息，该消息可以附加到您页面上的 div 中。这是一个例子：

$(function() {

    $('#submitbtn').click(function(event) {
        event.preventDefault();
        var form = $(this).closest('form'),
            action = form.attr('action');
        $.post(action, form.serialize(), function(data) {
            $('#form-message').html(data);
        })
    });

});

根据 OP 的回复进行更新：
我发布的代码是您如何使用 Ajax 的示例，而不是完整的解决方案。为了使其成为一个完整的解决方案，您可以将您的原始代码与我发布的代码结合起来，以便表单提交仅在表单通过您的验证例程时触发。验证例程将在 event.preventDefault() 之后进行，这是阻止表单立即提交的原因。

我会为您的错误消息创建一个数组。每次缺少必填字段时，您都可以向数组添加错误。在验证例程结束时，您可以检查数组的大小。如果它是空的，意味着没有错误，您将提交表单。如果它包含一个或多个错误，您将不会提交该表单。相反，您会将错误打印到屏幕上。

我的代码示例建议后端表单处理程序返回包含状态消息的数据以显示给用户。例如“感谢您注册！” 或“糟糕，出了点问题！请重试。” 状态消息将附加到 ID 为“form-message”的 div 中。您必须向后端表单处理程序添加一个 return 语句，并向您的标记添加一个类似的 div 元素才能创建该功能。

于 2013-10-16T04:28:11.603 回答
0

提交form时您可以使用AJAX并返回false

在AJAX您可以将所有form值传递给服务器script

这是你必须做的，

<form id="formID" onsubmit="return mformPost('your_php_action.php', '#formID');">
    <input type="text" name="test" id="test" value=""/>
</form>

在AJAX

function mformPost(destinationUrl, formID) {

    var formData = $(formID).serialize(); // serialize your form data
    $.ajax({
        type: 'POST',
        url: destinationUrl,
        data: formData,
        cache: true,
        async:false,
        error: function(error) {
            alert(error.responseText + error.responseStatus);
        },
        success: function(data){ // return data from your php file
            if(data){
                alert('Successfully registered');
            }

        }
    });
    return false;
}
于 2013-10-16T04:21:13.933 回答
0

如果您希望页面不重新加载，请不要使用带有提交操作的表单 - 使用 AJAX 将数据发送到单独的 PHP 脚本，并让浏览器在回调函数中启动通知或弹出窗口。

使用jQuery 的 post 功能：

$("#submitbtn").click(function() { 
    $.post("yourphpscript.php", {name: $("#name").val(), email: $("#email").val(), city: $("#city").val() }, 
    function(){
        $("#submitbtn").after("<p>Successfully registered.</p>");        
    });
});
于 2013-10-16T04:27:37.687 回答