Question

在服务器端处理开始于PHP之前，我有一个使用javascript onSubmit进行非常基本的输入验证的表单。

但是，由于PHP脚本处理（上传图像等）的时间，我试图使用相同的onSubmit函数来显示“请稍候”通知，如果它通过验证。或者，还有更好的方法？我在PHP中尝试过，但是在我可以回显任何输出之前必须完成处理。我从其他SO帖子尝试的任何内容都会停止验证过程。

<form id="form" method="post" action="" onsubmit="return Validate(this)" autocomplete="off">

当前的Javascript示例

function Validate(myForm) {
    var error = '';

    // Example Filed
    if(myForm.name.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {

        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        return false;

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here
        return true;
    }
}

CSS＆amp; HTML等待通知（最初隐藏）

<style>
    #processing {
        display:block;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.8);
        width: 100%;
        height: 100%;
    }

    #popup {
        width: 300px;
        min-height: 160px;
        padding:20px;
        background-color: #fff;
        border: 5px solid #06C;
        text-align: center;
        color: #202020;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -100px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #popup img { 
        height:60px; 
        width:60px; 
    }

</style>
<div id="processing">
     <div id="popup">
         <img width="60" height="60" src="../waiting.gif" />   
         <h3>Please Wait!</h3>
         <p>The form is processing...</p>
     </div>
</div>

任何帮助将不胜感激

Answer 1

在您的javascript验证中，您可以通过显示简单消息让用户知道图片正在加载。

<div class="loading" style="display:none;">Loadin ...</div>

function Validate(myForm) {
    var error = '';

    // Example Filed
    if(myForm.name.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {

        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        return false;

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here

        // show the user the image is loading
        $('#form .loading').show();
        return true;
    }
}

加载后，您可以在收到服务器的响应后删除该消息。

$('#form .loading').hide();

Answer 2

您需要做的就是在文档中已经存在“... Please Wait ...”元素，但隐藏了，然后在提交时显示它。您可以通过将CSS类应用于HTML中的元素（最初隐藏它，然后在表单有效时删除该类）来执行此操作。

几个旁注......

请勿使用内联HTML事件属性（onsubmit，onclick等）。这就是20年前事件的登记方式and there are many drawbacks to using them。不幸的是，因为大多数人只是复制别人所做的事情，所以使用这种方法不会死。相反，请遵循现代标准并使用 .addEventListener() 。

此外，不要将元素或变量name命名为name是全局window对象的属性，并且使用该名称可能会导致代码出现问题

// Get references to the DOM elements that your code will need
var frm = document.getElementById("form");
var wait = document.getElementById("processing");
var userName = document.getElementById("txtName");

frm.addEventListener("submit", validate);  // Set up events the modern, standards-based way

// All event handlers will automatically be passed a reference 
// to the event object for that event
function validate(evt) {
    var error = '';

    // Example Filed
    if(userName.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {
        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        evt.preventDefault();  // Stop the event

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here
        wait.classList.remove("hidden");  // Remove the hidden class
    }
}

#processing {
        display:block;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.8);
        width: 100%;
        height: 100%;
    }
    
    #processing.hidden { display:none } /* This hides the message by default */

    #popup {
        width: 300px;
        min-height: 160px;
        padding:20px;
        background-color: #fff;
        border: 5px solid #06C;
        text-align: center;
        color: #202020;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -100px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #popup img { 
        height:60px; 
        width:60px; 
    }

<form id="form" method="post" action="#" autocomplete="off">
  <input type="text" id="txtName">
  <input type="submit">
</form>
<div id="processing" class="hidden">
     <div id="popup">
         <img width="60" height="60" src="../waiting.gif" />   
         <h3>Please Wait!</h3>
         <p>The form is processing...</p>
     </div>
</div>

onSubmit在表单验证后添加第二个Javascript操作

2 个答案: