2014-11-06 23 views
0

我最近使用AJAX將表單驗證應用於我的用戶註冊表單。以前,我只使用javascript驗證了表單域,它工作正常。但是在應用AJAX之後,表單域在提交表單後返回'null'值。這是我的代碼給用戶登記表:表單字段在應用AJAX後返回null

<table> 
    <tr> 
    <td width="362" style = "font-size:26px;font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;color:black"><b>Create an Account</b></td> 
    </tr> 
    <form action = "create_user.jsp" method = "post" name = "form1"> 
    <tr> 
     <td><input type = "text" class = "border" id = "nm1" placeholder = "Name" onblur="validate('nm',this.value);" /> 
     <span id="nm"></span></td> 
    </tr> 
    <tr> 
     <td><input type="email" class = "border" id = "id1" placeholder = "E-mail ID" onblur="validate('id',this.value);" /> 
     <span id="id"></div> 
    </tr> 
    <tr> 
     <td><input type="password" class = "border" id = "password1" placeholder = "Password" onblur="validate('password',this.value);" /> 
     <span id='password'></span></td> 
    </tr> 
    <tr> 
     <td><input type="password" class = "border" id = "retype_pass1" placeholder = "Retype Password" onblur="validate('retype_pass',this.value);" /> 
     <span id="retype_pass"></span></td> 
    </tr> 
    <tr> 

     <td><input type = "submit" id = "button" name = "register" value = "Create an Account" disabled onClick = "return validation()" /></td> 
    </tr> 
    </form> 
</table> 

這裏使用了驗證()函數:

function validate(field, query) { 
var xmlhttp; 
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp = new XMLHttpRequest(); 
} else { // for IE6, IE5 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange = function() { 
if (xmlhttp.readyState != 4 && xmlhttp.status == 200) { 
document.getElementById(field).innerHTML = "Validating.."; 
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
document.getElementById(field).innerHTML = xmlhttp.responseText; 
} else { 
document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try  Again</a> the page."; 
} 
} 
xmlhttp.open("GET", "validate.jsp?field=" + field + "&query=" + query, false); 
xmlhttp.send(); 
} 

這裏是validate.jsp文件:

<%! 
String pass; 
%> 
<% 
String field = request.getParameter("field"); 
String query = request.getParameter("query"); 
if(field.equals("nm")) 
{ 
     if(query.length() == 0) 
      out.print("<span style='color:red;'>*Mandatory Field</span>"); 
} 

if(field.equals("password")) 
{ 
    if(query.length() == 0) 
     out.print("<span style='color:red;'>*Mandatory Field</span>"); 
    else if(query.length() > 0 && query.length() <= 5) 
    { 
     out.print("<span style='color:red;'>Weak</span>"); 

    } 
    else 
     out.print("<html><body><span style='color:green;'>Strong</span></body></html>"); 
    pass = query; 
} 
if(field.equals("id")) 
{ 
    if(query.length() == 0) 
     out.print("<span style='color:red;'>*Mandatory Field</span>"); 
} 
if(field.equals("retype_pass")) 
{ 
    if(!(query.equals(pass))) 
     out.print("<span style='color:red;'>Password and Retype Mismatch</span>"); 
    else if(query.length() == 0) 
     out.print("<span style='color:red;'>*Mandatory Field</span>"); 
} 
if(field.equals("bday")) 
{ 
    if(query.length() == 0) 
     out.print("<span style='color:red;'>*Mandatory Field</span>"); 
} 
%> 

後立即我單擊提交按鈕並檢查爲用戶創建的數據庫中的條目,所有字段顯示NULL。可能是什麼問題?

+0

我們需要看到'validate.jsp'內容。 – vaso123 2014-11-06 14:10:30

+0

@lolka_bolkaok我正在上傳validate.jsp文件 – 2014-11-06 14:12:03

回答

0

,它可能似乎有點不可思議,但爲了您的form正常工作,你應該考慮以下幾點:

  • 一個formnot allowed是的元素的tabletbodytr

  • 您可以在form內有整個表格。

  • 您可以在table單元格內有form
  • form中不能包含table的一部分。

因此,您可以在整個table附近使用一個form。然後使用點擊提交按鈕來確定哪一行要處理(快速)或處理每一行(允許批量更新)。

+0

這是隻有ajax的情況嗎?因爲它在我應用javascript時運行良好。 – 2014-11-06 14:16:16