Question

我已经制作了一个表格并输入了记录并应用了验证。我希望当用户点击提交按钮时，所有字段的值应显示在同一页面上...但我无法获取单选按钮现场记录.......以下是我的代码......

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

Answer 1

$.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，您可以验证数据。

想要获取表单记录

1 个答案: