-1

hi i want to display all my form data being entered by the user to the next HTML page, but the only thing i m using javascript for form validation and HTML. any help would be highly appreciated.

<head>
<link rel="stylesheet" href="main.css" type="text/css">
<title>A simple Form Validation</title>
</head>
<script type='text/javascript'>

function formValidator(){
    // Make quick references to our fields
    var businessname = document.getElementById('businessname');
        var firstname = document.getElementById('firstname');
        var lastname = document.getElementById('lastname');
        var email = document.getElementById('email');
        var phone = document.getElementById('phone');
        var fax = document.getElementById('fax');


        // Check each input in the order that it appears in the form!
        if(isAlphabet(businessname, "Please enter only letters for your Businessname")){
          if(isAlphabet(firstname, "Please enter only letters for your name")){
            if(isAlphabet(lastname, "Please enter only letters for your last name")){
              if(isNumeric(phone, "Please enter numbers for your phone no")){
                if(isNumeric(fax, "Please enter numbers for your fax")){
                  if(emailValidator(email, "Please enter a valid email address")){
                                return true;
                            }
                        }
                    }
                }
            }
        }




    return false;

}

function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphanumeric(elem, helperMsg){
    var alphaExp = /^[0-9a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function lengthRestriction(elem, min, max){
    var uInput = elem.value;
    if(uInput.length >= min && uInput.length <= max){
        return true;
    }else{
        alert("Please enter between " +min+ " and " +max+ " characters");
        elem.focus();
        return false;
    }
}

function madeSelection(elem, helperMsg){
    if(elem.value == "Please Choose"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

</script>

<form onsubmit='return formValidator()' method="POST" action="index.htm">

<table>
<tbody>
<div id="header-container">
<div id="header">
    <div id="logo">
    <a href="#"><img src="bus.jpg" /></a>
    </div>
    <div id="navbar">
    <ul id="nav">
        <li><a id="Home" alt="home">Home</a></li>
        <li><a id="contactus" alt="contact Us">Contact Us</a></li>
    </ul>
    </div><br><br>
<tr>
    <td><label for="Business Name">Business Name:</label></td>
    <td><input name="Business Name" id="businessname" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="First Name">First Name:</label></td>
    <td><input name="First Name" id="firstname" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="Last Name">Last Name:</label></td>
    <td><input name="Last Name" id="lastname" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="Email">Email:</label></td>
    <td><input name="Email" id="email" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="Phone">Phone:</label></td>
    <td><input name="Phone" id="phone" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="Fax">Fax:</label></td>
    <td><input name="Fax" id="fax" size="30" maxlength="40" type="text"></td>
</tr>
</tbody>
</table>
<input type='submit' value='Submit' />
</form>

this is my form and i did validation over it... now I want to display the form values on next page...

lost
  • 165
  • 1
  • 4
  • 10
  • If you need `help` with something, you need to provide more details and show, what have you tried and didn't work as required... Please, do read http://stackoverflow.com/help to understand how to ask a question here on SO. – walther Oct 08 '13 at 07:36

3 Answers3

1

If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.

In the form, add a method="GET" attribute:

<form action="your.html" method="GET">
    <input type="text" name="name" />
    <input type="submit" value="Submit" />
</form>

When they submit this form, the user will be directed to an address which includes the name value as a parameter. Something like:

http://www.example.com/display.html?name=XYZ

You should then be able to parse the query string - which will contain the name parameter value - from JavaScript, using the window.location.search value:

// from your.html
document.getElementById("write").innerHTML = window.location.search;

this can help you...`form fill on next html page

Community
  • 1
  • 1
Dinesh
  • 4,066
  • 5
  • 21
  • 35
0

May be this can help you http://wiseadvance.com/teaching/web_design/tutorials/get_data_from_forms/

Better use any server side scripting to display data.

Vivek Kumar
  • 1,204
  • 4
  • 15
  • 35
  • in fact i just want to display the values and i m asked to use html and JS, but how to take all the form values to next page.... – lost Oct 08 '13 at 07:48
  • Then I would tell you to use Jquery cookie... it will store your value and you can use it to another page easily, if you are not able to do anything. But it is not the way, you should use any server side language. – Vivek Kumar Oct 08 '13 at 07:55
0

You have to use either a Server side script or use HTML5 LocalStorage

Sobin Augustine
  • 3,639
  • 2
  • 25
  • 43