469,936 Members | 2,466 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,936 developers. It's quick & easy.

How to display form input on the same page using Javascript?

I would like to display the details of all the Input fileds entered by user back in the same page. is it possible? if so, i would also like to alert user not to keep the field empty.
Jan 27 '11 #1
2 1192
I'm not a 100% sure what you want but I think this is what you want:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function formcheck(){
  5.     var blankfields = new Array()
  6.     if(document.getElementById("country").value == "Country"||document.getElementById("country").value == ""){
  7.         blankfields.push("Country")
  8.     }
  9.     if(document.getElementById("email").value == "Email"||document.getElementById("email").value == ""){
  10.         blankfields.push("Email")
  11.     }
  12.     if(blankfields == ""){
  13.         alert("Thank You For Filling Out Our Survey!")
  14.     }
  15.     else{
  16.         blankfieldsjn = blankfields.join("\n")
  17.         alert("You need to fill out the following fields before proceeding:" + "\n" + blankfieldsjn)
  18.     }
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <form>
  24. <input id="country" type=text value="Country"><br />
  25. <input id="email" type=text value="Email"><br />
  26. <input type=button value="Submit" onClick=formcheck()>
  27. </form
  28. </body>
  29. </html>
Jan 27 '11 #2
Dear Mad Genius,

Below is my code. I would like to alert the user not to keep any field blank and the cursor should point to the field where the user is trying to skip the field when he presses enter key or submit key.

Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2.   <HEAD>
  3.     <TITLE>Basic Details</TITLE>
  4.  
  5.     <script type="text/javascript">
  6.       function details()
  7.       {
  8.         var name1 = document.myform.name.value;
  9.     if (name1.length === 0) {
  10.     alert("You must enter your Name ");
  11.     return false;
  12.      }
  13.  
  14.     var age1 = document.myform.age.value;
  15.     if (age1.length === 0) {
  16.     alert("You must enter your Age ");
  17.     return false;
  18.      }
  19.  
  20.     var city1 = document.myform.city.value;    
  21.         if (city1.length === 0) {
  22.     alert("You must enter your City ");
  23.     return false;
  24.      }
  25.  
  26.     document.getElementById("divid1").innerHTML = name1;
  27.     document.getElementById("divid2").innerHTML = age1;
  28.     document.getElementById("divid3").innerHTML = city1;
  29.  
  30.     return true;
  31.  
  32.     }
  33.     </script>
  34.  
  35.   </HEAD>
  36.  
  37.   <BODY>
  38.  
  39.     <FORM NAME="myform">
  40. Enter your name: <BR>
  41.       <INPUT TYPE="text" NAME="name" VALUE="" onClick="details();"><BR>
  42. Enter your age: <BR>
  43.       <INPUT TYPE="text" NAME="age" VALUE="" onClick="details();"><BR>
  44. Enter your city:<BR>
  45.       <INPUT TYPE="text" NAME="city" VALUE="" onClick="details();"><P> 
  46.       <INPUT TYPE="button" Value="Submit" onClick="details()">
  47.     <INPUT TYPE="reset" VALUE="Reset">
  48.     </FORM>
  49.  
  50. You have entered the following details:
  51. <P>
  52. Your Name is: <span id="divid1"></span><P>
  53. Your Age is: <span id="divid2"></span><P>
  54. Your City is: <span id="divid3"></span>
  55.  
  56. </BODY>
  57. </HTML>
Jan 27 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Tony Strazzeri | last post: by
2 posts views Thread by simon.wilkinson | last post: by
7 posts views Thread by vunet.us | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.