Question

嗨我想显示用户输入到下一个HTML页面的所有表单数据，但我唯一使用javascript进行表单验证和HTML。任何帮助都将受到高度赞赏。

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

这是我的表单，我对它进行了验证...现在我想在下一页显示表单值...

Answer 1

可能这可以帮助你http://wiseadvance.com/teaching/web_design/tutorials/get_data_from_forms/

最好使用任何服务器端脚本来显示数据。

Answer 2

您必须使用服务器端脚本或使用HTML5 LocalStorage

Answer 3

如果您无法使用服务器端编程（例如PHP），则可以使用查询字符串或GET参数。

在表单中，添加method =“GET”属性：

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

当他们提交此表单时，将将用户定向到包含名称值作为参数的地址。类似的东西：

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

然后，您应该能够使用window.location.search值从JavaScript解析查询字符串 - 其中包含name参数值：

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

这可以帮助你......`form fill on next html page

将表单值显示到下一个HTML页面

3 个答案: