Question

我有一个PHP表单，用于处理处理。它有基本的javascript验证（客户端），如果它通过那些测试，表单提交给自己进行PHP验证（服务器端）等。一旦完成它重定向到＆＃34;谢谢你＆＃34;页。

问题在于，由于上传图像，表单可能需要一段时间来处理，我正试图向用户显示一条消息，以便等待！＆＃34;等等！直到它完成。我以为我使用javascript基于另一个SO帖子的帮助，但是当完全实现它不工作： -

当我尝试使用内联Javascript显示方框时，＃34;提交＆＃34;当页面重新加载进行处理时会被擦除。

当我尝试PHP时，表单处理必须完成才能返回任何显示＆＃34;等等！＆＃34;功能，无论如何它都会重定向。

我是在尝试做一些不可能的事情，还是我错过了一些愚蠢的事情？请原谅我在陡峭的学习曲线上的任何不正确的术语。我试图避免使用第三方库，如jQuery。

我已在下面发布了最小化代码：

<form id="contact_form" method="post" action="" autocomplete="off">
<input name="contact_us" type="hidden" value="1" />
<input name="full_name" type="text" id="qq_full_name" placeholder="Full Name*">
<input type="submit" id="submit" name="submit">
</form>


<style>
#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; 
}
</style>
<div id="processing" class="hidden">
 <div id="popup">
    <img width="60" height="60" src="../processing.gif" />
     <h3>Please Wait!</h3>
     <p>The form is processing...</p>
 </div>
</div>

的Javascript

<script>

function validate_Contact(evt) {

var error = '';
var wait = document.getElementById("processing");

// Form Fields
var full_name = document.getElementById("qq_full_name");

// ------------ 

// Full Name
if(full_name.value == ""){
    error += '- Please enter your Full Name \n';
}


// ------------

// Show Error Notice
if(error != '') {
    error = 'The form has not been completed correctly, please check the following:\n\n' + error;
    alert(error);
    evt.preventDefault();  // Stop the event

} else {
    wait.classList.remove("hidden"); // Display Processing Message
    //evt.preventDefault();     

}
}



// DOM elements
var contact_form = document.getElementById("contact_form");

// Set Events (the modern, standards-based way)
contact_form.addEventListener("submit", validate_Contact);

</script>

我发布这是一个新问题，因为我无法看到扩展我的其他SO帖子的方法。如果这不正确，我道歉。

谢谢

PHP自我处理表单，重定向前有等待通知

0 个答案: