提交表格后会怎样? [英] what happens after a form is submitted?
问题描述
这可能是一个宽泛的答案，但我会尽量缩短.我想做的是使用表单从用户那里获取一些信息，并使用JavaScript验证表单".如果验证成功，则提交表单.一旦发生这种情况，我将尝试使用Java脚本检索输入到表单的数据并显示在同一页面上.(使用模式)
This might be a broad answer to give but i'l try to shorten it up. What i am trying to do is use a form to get some information from the user and "validate the form" using JavaScript. If the validation is a success the form gets submitted. Once this has happened , i am trying to retrieve the data that was entered to the form using java script and display on the same page.(using a modal)
尽管我认为我背后的逻辑是错误的.表单验证后即可提交吗?提交后，页面会刷新吗?因此输入数据丢失了吗?这可能是为什么我在模态中不断获取空的空值的原因吗?
Although i think my logic behind this is wrong. Once the form validates it gets submitted ? once it is submitted the page refreshes ? thus the input data is lost? could this be the reason why i keep on getting empty empty values in the modal ?
在此处获取表单的html
Heres the html for the form
<div class="feedback-background">
<div class="feedback-content">
<div class="close">+</div>
<img src="../Images/Images2/feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
<form name="FeedbackForm" action="/action_page.php" onsubmit="return validateForm();displayContent();"
method="get">
Name:
<input id="Name" name="Name" type="text" placeholder="Name">
E-Mail:
<input id="E-mail" name="E-mail" type="email" placeholder="E-mail">
What do you think about us?<br>
<textarea id="comment" rows="6" cols="33" name="comment"></textarea>
<br>
How would you rate us ?
<br>
<label><input type="radio" name="rating" id="rating1" value="Excellent" checked>Excellent</label>
<label><input type="radio" name="rating" id="rating2" value="Very Good">Very Good</label>
<label><input type="radio" name="rating" id="rating3" value="Average">Average</label>
<label><input type="radio" name="rating" id="rating4" value="Poor">Poor</label>
<label><input type="radio" name="rating" id="rating5" value="Extreamly Poor">Extremely Poor</label>
<input type="submit" id="submit" value="Submit">
</form>
</div>
这是模式的HTML，输入数据将再次显示给客户
Here is the HTML for the modal where the input data will be shown again to the customer
<div class="popup">
<div class="popuptext" id="myPopup"><p>Thank you <span id="username"></span> ,<br>Your feedback has been
recorded.<br>
<br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span
id="userrating"></span>".
<br><br>Thank you
for taking your time to do so.<br><br>You will now be re-directed automatically</p>
</div>
</div>
这是我用于表格的css
Here is the css i used for the form
/*----------comment form----------*/
.feedback-background{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display:none;
}
.feedback-content{
width: 500px;
height: 550px;
background-color: white;
border-radius: 4px;
padding: 20px;
position:relative;
}
#submit{text-transform:uppercase;
padding:6px 2px;
margin-right: 40px;
margin-top: 20px;
background: #ee0c6e;
font-weight:600;
color:white;
border-radius: 3px;
font-size: 10px;
min-width: 100px;
text-decoration:none
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
label {
display: block;
}
input[type="radio"]{
width: auto;
display: inline;
}
input[type="submit"]{
width:10em;height: 2em;
cursor:pointer;
}
.close{
position:absolute;
top:0px;
right:14px;
transform:rotate(45deg);
font-size:42px;
cursor:pointer;
}
#feedbacksubmit{
margin-left:600px;
margin-bottom:50px;
background-color:#484848;
border-radius:14px;
padding:10px;
cursor:pointer;
color:white;
outline:none;
}
这是我用于弹出模式的CSS
This is the CSS i used for the pop up modal
/*-----popup----*/
.popup{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display:none;
}
.popuptext{
width: 100px;
height: 350px;
background-color: #000025;
border-radius: 4px;
padding: 20px;
position:relative;
color:#fff;
width: 20%;
height:30%;
display: block;
margin: 10px 0px;
text-align:center;
margin-left:0px;
margin-bottom:80px;
}
#logo{
margin-right:100px;
float:left;
}
这是我使用过的JavaScript.
Here are the javascripts i have used.
/*------comments form-----*/
document.getElementById('feedbacksubmit').addEventListener('click',
function () {
document.querySelector('.feedback-background').style.display = 'flex';
}
)
document.querySelector('.close').addEventListener('click',
function () {
document.querySelector('.feedback-background').style.display = 'none';
}
)
function displayContent() {
var name = document.getElementById("Name").value;
var comment = document.getElementById("comment").value;
var ratings = document.getElementById('rating');
var rate_value;
for (var i = 0; i < rating.length; i++) {
if (rating[i].checked) {
rate_value = rating[i].value;
}
}
/*these lines are used to write the details into the new modal*/
document.getElementById("username").textContent = name;
document.getElementById("usercomment").textContent = comment;
document.getElementById("userrating").innerHTML = rate_value;
return "";
}
function closePopup() {
document.querySelector('.popup').style.display = 'none';
}
/*-------validation-----*/
function validateForm() {
var x = document.forms["FeedbackForm"]["Name"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var z = document.forms["FeedbackForm"]["E-mail"].value;
if (z == "") {
alert("Please enter your E-mail address to proceed");
return false;
}
var y = document.forms["FeedbackForm"]["comment"].value;
if (y == "") {
alert("Comment section can not be empty");
return false;
}
var a = 0, rdbtn = document.getElementsByName("rating")
for (i = 0; i < rdbtn.length; i++) {
if (rdbtn.item(i).checked == false) {
a++;
}
}
if (a == rdbtn.length) {
alert("Please select a rating according to you");
return false;
}
document.getElementById('submit').addEventListener('click',
function () {
document.querySelector('.feedback-background').style.display = 'none';
document.querySelector('.popup').style.display = 'flex';
}
)
}
有更好的方法吗?我该怎么做呢?我做错了什么
Is there a better way ? how can i go about doing this? what have i done wrong
推荐答案
在不仔细查看您的代码的情况下，这是所请求的大图".概述提交表单时会发生什么，以及如何验证表单.
Without looking at your code too closely, here is the requested "big picture" overview of what happens when a form is submitted, and how to validate a form.
首先，表单以及提交表单时发生的事情.
First, the form and what happens when it is submitted.
当您单击提交按钮时，您的表单数据将被发送到在表单标签上指定的文件-在您的情况下为"/action_page.php".到达的地方有许多变量(又名键-值对"-但它们是具有名称和值的变量).注意，变量名"是指变量名".是在(例如)输入栏位的name=属性中指定的内容，是输入(例如)输入字段的任何内容.
When you click the submit button, your form data will be sent to the file specified on the form tag - in your case, "/action_page.php". What arrives there are a number of variables (aka "key-value pairs" - but they are variables with a name and a value). Note that the "variable name" is what is specified in the name= attribute of the (for e.g.) input field, and the "variable contents" is whatever is typed into the (for e.g.) input field.
您的后端PHP文件将需要使用$ _POST或$ _GET命令为这些项目中的每一个创建正确的PHP $变量，具体取决于您在"method ="方法中使用的方法.表单标签的属性.例如，您的表单具有一个名为name=comment的textarea元素.在PHP方面，您可以编写:
Your back-end PHP file will need to create proper PHP $variables for each of these items, using either the $_POST or $_GET command, depending what method you used in the "method=" attribute of the form tag. As an example, your form has a textarea element called name=comment. On the PHP side, you can write:
$cmt = $_GET['comment'];
然后保存！您在PHP变量$ cmt中有用户的注释.
and presto! you have the user's comment in a PHP variable $cmt.
您可以在此阶段进行验证，也可以在提交文件之前验证javascript中的代码(请注意，javascript可以拦截表单提交过程并将其停止或继续.
You can do the validation at this stage, or you can validate the code in javascript before the file is even submitted (note that javascript can intercept the form submit process and stop it, or continue it.
然后，您的PHP文件可以将用户发送回同一页面(在这种情况下，您需要在顶部使用<? php>部分来进行处理)，也可以将其完全转到另一页面.
Then, your PHP file can either send the user back to the same page (in which case, you need a <? php> section at the top to handle that), or on to another page entirely.
重要说明:
-
重要提示:从PHP文件的指定
action=位置，您可能会遇到一些麻烦，因为您以斜杠开始了它.这会将操作系统发回到文件系统的根目录以查找您的文件，而这可能不是您想要的.现在，将"action_page.php"文件放置在与index.php文件相同的位置，并放下斜杠.
Important: From your specified
action=location of the PHP file, you might have some trouble because you started it with a slash. That sends the OS back to the root of the file system to find your file, and is probably not what you want. For now, put the"action_page.php"file in the same location as yourindex.phpfile and drop the leading slash.
在开始时，请勿使用相同的PHP文件来接收用于向用户显示表单的表单. AJAX也一样(到此为止).首先做一些事情，这样您就可以轻松理解该过程，然后使其变得更酷.
At the beginning, do not use the same PHP file to receive the form that you are using to display the form to the user. Same goes for AJAX (getting to that). Do things at first so it is easy for you to understand the process, then make it cooler.
您可以在提交前在JS中或在提交后在PHP中验证用户数据.但是，可以在DevTools(F12)控制台中读取，调试甚至更改javascript-因此，除了诸如字段是否为空白"之类的超基本内容外，不要在javascript中进行重要的验证.
You can validate the user data either in JS before you submit, or in PHP after submitting. However, javascript can be read, debugged, and even changed in the DevTools (F12) console - so other than super basic stuff like "Was the field left blank", do not do your important validation in javascript.
从不信任用户数据.有些用户是黑客，如果您不清理他们输入的数据，他们可以拥有您.研究对用户数据进行消毒和这也可以帮助您开始理解. >
NEVER TRUST USER DATA. Some users are hackers and they can OWN you if you do not sanitize the data they enter. Research sanitizing user data and this also will get you started on the understanding part.
AJAX
提交表单时，屏幕将刷新.那么，那些您在其中填写表格，提交并没有任何刷新的网站会发生什么，但是更改会在现有页面上进行更新.这是通过AJAX完成的.
AJAX
When you submit a form, the screen will refresh. So what about those websites where you fill-in a form, submit, and nothing refreshes but the changes are updated on the existing page. That is done through AJAX.
AJAX确实非常简单-几乎比表单更简单.开始使用AJAX的基本规则与我上面的注释相同:具有与用户当前使用的后端PHP文件不同的后端PHP文件.
AJAX is really very simple - almost simpler than a form. The cardinal rule of getting started with AJAX is the same as my note above: have a different back-end PHP file than the one the user is presently on.
坦白说，这些天来，我们真的不再使用表格了.以前我们使用AJAX进行表单处理的几乎所有内容-一切都很简单！
Frankly, these days, we don't really use forms very much anymore. Almost everything we used to do with forms we now do with AJAX - and It Is Easy!
那么AJAX如何工作?本质上，javascript将表单数据(请参见以下示例！)发送到指定的PHP文件，该文件处理数据并echo返回响应.您收到该响应，将其分解为变量，然后相应地更改页面.有关更多信息，请参见下面的参考.
So how does AJAX work? Essentially, javascript sends the form data (see below examples!) to the specified PHP file, which processes the data and echo's back a response. You receive that response, break it up into variables, and change the page accordingly. See references below for more.
注意:如果您花10分钟时间尝试以下参考文章中的示例，则可以节省数小时的头部抓挠时间.只需在您自己的服务器上重现示例并进行一些操作即可.
NOTE: If you take ten minutes to try the examples in the referenced posts below, you will save yourself HOURS of head scratching. Just reproduce the examples on your own server and play with them a bit.
参考:
这篇关于提交表格后会怎样?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
