javascript 单击按钮时，警报框显示表单数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17648010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alert box shows form data when clicking button
提问by 4LeafFather
I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes: First Name Last Name Address 1 Address 2 City State Zip Phone Fax
我希望在表单底部创建一个按钮，该按钮将创建一个警报框，显示输入的表单数据。表格包括： 名字 姓氏 地址 1 地址 2 城市 州 邮编电话传真
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
表单完成后，单击该按钮并弹出一个警告框，显示输入的表单数据。
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
有谁知道如何在没有实际提交或验证表单的情况下完成？没有用于提交表单数据的数据库，因此没有可从中提取信息的数据库。
Any help would be greatly appreciated.
任何帮助将不胜感激。
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
由于表单代码的长度，我没有包含表单代码，但我正在为警报框使用的当前代码如下所示：
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
回答by randomizer
If I get it right you need something like this:
如果我做对了，你需要这样的东西：
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
我真的不明白你的意思是从数据库中提取信息，但该示例使用单击事件从表单字段中获取数据，并在没有提交的情况下将其显示在警报中。
回答by programmer
html code:
html代码：
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
javascript代码：
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
回答by stefancarlton
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
要停止提交表单，您可以在标签内创建一个 onsubmit 事件并返回 false - 例如 ...表单元素.... 当有人通过按 Enter 键和按提交提交表单时，这有好处按钮。
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
因此，为了实现您的愿望，您可以创建一个函数（我们称之为 formAlert）并从 onsubmit 事件调用它，例如 ...form 元素...
The formAlert function would look something like:
formAlert 函数看起来像：
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
这将对应于一个看起来像这样的表格：
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
注意 1，这不会是一个漂亮的模式框 - 它只会在 Javascript 警报框中显示“fred blogs”。
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
注意 2，如果出现 Javascript 错误，您的表单仍将提交（尽管在此处的示例中它会提交给自己）。
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
这是演示上述代码的 JS Fiddle：http: //jsfiddle.net/D59su/
