单击按钮时，警报框显示表单数据答案

【问题标题】：Alert box shows form data when clicking button单击按钮时，警报框显示表单数据
【发布时间】：2013-07-15 06:31:44
【问题描述】：

我希望在表单底部创建一个按钮，该按钮将创建一个警报框，该框将显示输入的表单数据。表格包括：名姓地址1 地址2 城市状态压缩电话传真

一旦表单完成，点击按钮，会弹出一个警告框，显示输入的表单数据。

有没有人知道如何在没有实际提交或验证表单的情况下完成？没有用于提交表单数据的数据库，因此没有可以从中提取信息的数据库。

任何帮助将不胜感激。

由于它的长度，我没有包含表单代码，但我正在为警报框使用的当前代码如下所示：

 <script>
 function display_alert()
 {
 alert("");
 }
 </script>

 <body>
 <input type="button" onclick="display_alert()" value="Display alert box">
 </body>

【问题讨论】：

你在使用像 jQuery 这样的 java 脚本库吗？
如果表单不应该被提交，那么你需要从提交按钮的 onclick 事件中返回 false 。就在模式对话框中显示表单数据而言，您只能以编程方式进行。我不认为你会发现这样做有任何困难。
@Lekhnath：我相信你应该注意标签并理解问题:)

标签： javascript onclick alert

【解决方案1】：

如果我做对了，你需要这样的东西：

<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>

我真的不明白您对从数据库中提取信息的意思，但该示例使用点击事件从表单字段中获取数据，并在没有提交的情况下将其显示在警报中。

【讨论】：

这正是我要找的，但是使用此功能，如何在警报框中显示多个字段？
只需添加输入字段，如名称字段，并像示例一样用他们的 id 提醒他们。

【解决方案2】：

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代码：

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);
}

【讨论】：

欢迎来到 SO。感谢您的贡献。您能否编辑以解释您的答案与此处的现有答案有何不同？
最终这里的所有代码都是为了产生相同的输出而编写的......但我认为我的答案很容易理解（特别是对于初学者来说），所以我发布了它。 ps-我认为我保持简单......这就是我认为它与其他人的不同......

【解决方案3】：

要停止表单提交，您可以在标签内创建 onsubmit 事件并返回 false - 例如...表单元素....当有人通过按 enter 键以及按提交按钮提交表单时，这具有工作的好处。

因此，为了实现您的愿望，您可以创建一个函数（我们称之为 formAlert）并从 onsubmit 事件中调用它，例如...表单元素...

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);
}

这将对应于如下形式：

<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>

注意1，这不会是一个漂亮的模态框 - 它只会在 Javascript 警报框中显示“fred blogs”。

注意2，如果出现 Javascript 错误，您的表单仍将提交（尽管在此处的示例中，它会提交给自己）。

这是一个演示上述代码的 JS Fiddle：http://jsfiddle.net/D59su/

【讨论】：

【解决方案4】：

我认为这可能是您正在寻找的：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
    <form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
                      <div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
                      <div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
                      <div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
                      <div id="sub-button"><button onclick="getdetails();">submit</button></div></form>

    </div>

    <script>
        function getdetails()
        {
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;

alert("Your name is "+a+" "+b+". Your e-mail is "+c);

        }
    </script>
</body>
</html>

【讨论】：

【解决方案5】：

很简单

使用.value 会有所帮助。

HTML：

<form onsubmit="return myFunction()> <input type="text" id="name> <input type="submit" value="SEND">

在你的函数之前使用 return

Javascript：

function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}

提交后会显示为（如果我写 Alex 并提交）

嗨亚历克斯

希望能成功

【讨论】：