javascript
  • html
  • forms
  • 2013-10-08 49 views -1 likes 
    -1

    您好我想顯示所有我的表單數據被用戶輸入到下一個HTML頁面,但唯一的我使用JavaScript進行表單驗證和HTML。 任何幫助將不勝感激。將表單值顯示到下一個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> 
    

    這是我的形式,我做了它的驗證......現在我想顯示下一個頁面的表單中值...

    +0

    如果你需要'help'的東西,你需要提供更多的細節和顯示,你有什麼試過,沒有按要求工作...請閱讀http:// stackoverflow.com/help瞭解如何在SO上提出問題。 – walther

    回答

    0

    可能這可以幫助你http://wiseadvance.com/teaching/web_design/tutorials/get_data_from_forms/

    更好使用任何服務器端腳本來顯示數據。

    +0

    其實我只是想顯示的值和即時通訊要求使用HTML和JS,但如何將所有的表單值,以下一頁.... – lost

    +0

    然後,我會告訴你使用JQuery Cookie ...它會存儲你的價值,如果你無法做任何事情,你可以輕鬆地將它用於其他頁面。 但它不是這樣,你應該使用任何服務器端語言。 –

    0

    你必須使用一個服務器端腳本或使用HTML5的localStorage

    0

    如果你沒有選擇,使用服務器端編程,比如PHP,你可以使用查詢字符串,或GET參數。

    在表單中,添加一個方法=「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 
    

    然後,您應該能夠解析查詢字符串 - 其中將包含名稱參數值 - 從JavaScript,使用window.location.search值:

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

    這樣可以幫助你...'form fill on next html page

    相關問題