想要獲取表單記錄

我已經做了一個表單並輸入了記錄並應用驗證..我希望當用戶單擊提交按鈕時，所有字段的值應顯示在同一頁面上......但我不是能夠獲取單選按鈕字段記錄.......下面是我的代碼......想要獲取表單記錄

<html> 
<head> 
<title>REGISTRATION FORM</title> 
</head> 
<body bgcolor="Bisque "> 
<form name='myform' onsubmit="return formValidation()" > 
<table border="1" align="center"> 
<tr align="right"> 
<td align="center"><b>REGISTRATION FORM</td> 
</tr> 

<tr> 
<td bgcolor="yellow">NAME</td> 
<td bgcolor="orange"><input type="text" id="name" placeholder="Enter valid name" /> 
<p id="demo" class="class1"> </p> 
</td> 
<tr> 
<td bgcolor="yellow">AGE</td> 
<td bgcolor="orange"><input type="text" id="age" /> 
<p id="demo1" class="class1"> </p> 
</td> 
<tr> 
<td bgcolor="yellow">GENDER</td> 
<td bgcolor="orange"><input type="radio" name="gender" value="male" /> Male<br> 
<input type="radio" name="gender" value="female" /> Female<br> 
<p id="demo2" class="class1"> </p> 
</td> 
<tr> 
<td bgcolor="yellow">COUNTRY</td> 
<td bgcolor="orange"><select id="country"> 
<option value="Default">(Please select a country)</option> 
    <option value="india">INDIA</option> 
    <option value="usa">USA</option> 
    <option value="australia">Australia</option> 
    <option value="canada">Canada</option> 

</select> 
<p id="demo3" class="class1"> </p> 
</td> 




<tr> 
<td bgcolor="yellow">LANGUAGES</td> 
<td bgcolor="orange"> 
<input type="checkbox" name="language" value="English" checked />English<br> 
    <input type="checkbox" name="language" value="Hindi" />Hindi<br> 
    <input type="checkbox" name="language" value="French" />French<br> 
    <p id="demo4" class="class1"> </p> 
</td> 
<tr> 
<td bgcolor="yellow" >INTEREST</td> 
<td bgcolor="orange"> <textarea name="message1" id="message" rows="10" cols="30"></textarea>] 
<p id="demo5" class="class1"> </p></td> 
<tr> 
<td><input type="submit"></td> 
</table> 
<div id="div1"></div> 
</form> 
<style> 
p.class1{ 
color:red; 
} 
</style> 

<script type="text/javascript"> 
function formValidation() 
{  
    var html=""; 
    var st=0; 
    var uname = document.getElementById("name").value; 
    var uage = document.getElementById("age").value;  
    var ucountry = document.getElementById("country").value; 

    var letters = /^[A-Za-z]+$/; 

    if(letters.test(uname) && (uname!="")) 
    { 

    html +="Name- " + uname+"<br/>"; 
    document.getElementById("demo").innerHTML=""; 
    } 
    else 
    { 
    document.getElementById("name").innerHTML=" "; 
    document.getElementById("demo").innerHTML="Please enter valid name";  

    } 

     var age1=/^[1-9]?[0-9]{1}$|^100$/; 
     if(age1.test(uage) && (uage!="")) 
     { 
     html+="Age- "+ uage+"<br/>"; 
     document.getElementById("demo1").innerHTML=""; 
      } 
     else 
      { 
      document.getElementById("demo1").innerHTML="Please enter valid name"; 

      } 

    if(ucountry == "Default" || (ucountry.value="")) 
     { 
      document.getElementById("demo3").innerHTML="Please enter valid name"; 

     } 
      else 
      { 
       html+="Country- " + ucountry+"<br/>"; 
       document.getElementById("demo3").innerHTML=""; 
      } 

     var group=document.getElementsByName("gender").length; 
     for(var i=0;i<group.length;i++){ 
     if(group[i].checked) 
     group=document.getElementById() 
     break; 

     } 

     html+=group.value; 
     alert(html); 
     if (i==group.length) 
    document.getElementById("demo2").innerHTML="Please select your gender"; 

    /*var group1=document.myform.language; 
     for(var i=0;i<group1.length;i++){ 
     if(group1[i].checked) 
     break; 
     } 
     if (i==group1.length) 
    document.getElementById("demo4").innerHTML="Please select your gender"; 

     var textvalue=document.getElementById("message"); 

     if(textvalue.value =="") 
      { 
           document.getElementById("demo5").innerHTML="Please enter interest"; 
       html+=textvalue; 
       } 

        if(st==1) 
        { 
        return false; 
        } 
        else 
        { 
        return true; 
        }*/ 

        document.getElementById("div1").innerHTML=html; 
    return false;    
} 
</script>

來源

2016-03-02 Rupali Rana

$.fn.serializeObject = function() { 
      var o = {}; 
      var a = this.serializeArray(); 
      $.each(a, function() { 
       if (o[this.name] !== undefined) { 
        if (!o[this.name].push) { 
         o[this.name] = [o[this.name]]; 
        } 
        o[this.name].push(this.value || ''); 
       } else { 
        o[this.name] = this.value || ''; 
       } 
      }); 
      return o; 
     }; 

     form = $('#myform').serializeObject(); // myform is id of your form 

     var data = JSON.stringify({ model: form }); 
     console.log(data);

加入上面的代碼中formValidation功能。你將獲得表單控件名稱作爲json中的關鍵字。基於JSON，您可以驗證數據。

來源

2016-03-02 11:35:57

需要它在簡單的JavaScript –

它很簡單，只是試試吧。你將得到json中的所有控制數據。您不必編寫單獨的代碼，如複選框，單選按鈕等其他類型的控件。它是用JSON獲取控制值的通用代碼。 –

想要獲取表單記錄

回答

相關問題