Fatal编程技术网
  • javascript/
  • Javascript 将表单值显示到下一个HTML页面

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

javascript html forms

Javascript 将表单值显示到下一个HTML页面,javascript,html,forms,Javascript,Html,Forms,嗨，我想在下一个HTML页面上显示用户输入的所有表单数据，但我唯一使用的是javascript进行表单验证和HTML。 任何帮助都将不胜感激 <head> <link rel="stylesheet" href="main.css" type="text/css"> <title>A simple Form Validation</title> </head> <script type='text/javascript'>

嗨，我想在下一个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>


一个简单的表单验证
函数formValidator（）{
//快速引用我们的字段
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'）；
//按表单中显示的顺序检查每个输入！
如果（isAlphabet（businessname，“请仅为您的businessname输入字母”））{
如果（isAlphabet（名字，“请只输入您名字的字母”））{
如果（isAlphabet（姓氏，“请只输入您姓氏的字母”））{
如果（是数字（电话，“请输入您的电话号码”））{
如果（是数字（传真，“请输入传真号码”））{
如果（emailValidator（电子邮件，“请输入有效的电子邮件地址”））{
返回true；
}
}
}
}
}
}
返回false；
}
函数notEmpty（elem，helperMsg）{
if（elem.value.length==0）{
警报（helperMsg）；
elem.focus（）；//将焦点设置为此输入
返回false；
}
返回true；
}
函数为数字（elem，helperMsg）{
var numericExpression=/^[0-9]+$/；
if（元素值匹配（数值表达式））{
返回true；
}否则{
警报（helperMsg）；
元素焦点（）；
返回false；
}
}
函数isAlphabet（elem，helperMsg）{
var alphaExp=/^[a-zA-Z]+$/；
if（元素值匹配（alphaExp））{
返回true；
}否则{
警报（helperMsg）；
元素焦点（）；
返回false；
}
}
函数是alphanumeric（elem，helperMsg）{
var alphaExp=/^[0-9a-zA-Z]+$/；
if（元素值匹配（alphaExp））{
返回true；
}否则{
警报（helperMsg）；
元素焦点（）；
返回false；
}
}
功能长度限制（元素、最小值、最大值）{
var uInput=元素值；
如果（uInput.length>=min&&uInput.length，这可能会对您有所帮助


最好使用任何服务器端脚本来显示数据。
您必须使用服务器端脚本或使用HTML5 LocalStorage
如果您没有使用服务器端编程（如PHP）的选项，则可以使用查询字符串或获取参数

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


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


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


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



这可以帮助你…`
如果你需要
帮助
做一些事情，你需要提供更多的细节并展示，你做了哪些尝试，但没有按要求工作…请阅读，了解如何在这里提问。事实上，我只想显示值，我被要求使用html和JS，但如何将所有表单值带到next页面…然后我会告诉你使用Jquery cookie…它会存储你的值，如果你不能做任何事情，你可以轻松地使用它到另一个页面。但这不是方法，你应该使用任何服务器端语言。

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