Alert box shows form data when clicking button

2019-09-16 19:36发布

站内问答 / JavaScript
1864 3 5

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

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>

3条回答
我命由我不由天
2楼-- · 2019-09-16 20:01

html code:

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

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);
}
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
3楼-- · 2019-09-16 20:06

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.

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
4楼-- · 2019-09-16 20:08

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.

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

The formAlert function would look something like:

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.

Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).

Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)