简体   繁体   English

ajax和javascript表单验证

[英]ajax and javascript form validation

I've used ajax (in a most simple way that any basic tutorial shows) to change my main div on a web page so that when I click on a different field in my navigation bar, a different data or a form is displayed in a same div. 我已经使用ajax(以任何基本教程显示的最简单的方式)来更改网页上的主div,以便当我单击导航栏中的其他字段时,会在导航栏中显示不同的数据或表单。同一分区

Now, there is obviously a problem with my understanding of ajax because when I try to do most simple form validation with javascript on elements that are loaded to my page with ajax, it doesn't work. 现在,我对ajax的理解显然存在问题,因为当我尝试使用javascript对使用ajax加载到页面上的元素进行最简单的表单验证时,它不起作用。 For example, a check box (unchecked) and a submit button is loaded with ajax. 例如,一个复选框(未选中)和一个提交按钮都装有ajax。 When I check the box and click the submit button just to see if check box is checked, I get nothing, or I get that it isn't checked. 当我选中该框并单击“提交”按钮只是为了查看该复选框是否被选中时,我什么也没得到,或者得到未选中的信息。

I've tried the same example (checkbox+submit) without ajax and it works just fine. 我已经尝试过没有ajax的相同示例(复选框+提交),并且效果很好。

Is there any logic that I've missed in this situation? 在这种情况下,我有什么想念的逻辑吗?

Thanks! 谢谢!

Edit: sorry for not posting code. 编辑:很抱歉没有发布代码。 Here it is. 这里是。 My ajax code: 我的ajax代码:

function loadWholePage(url)
{
    var y = document.getElementById("storage");
    //var x = document.getElementById("displayed");
    var x = document.getElementById("content");
    loadHTML(url, processHTML, x, y);
}   

function loadHTML(url, fun, storage, param)
    {
var xhr = createXHR();
xhr.onreadystatechange=function()
{ 
    if(xhr.readyState == 4) //  The request is complete
    {
        //if(xhr.status == 200)
        {
            storage.innerHTML = getBody(xhr.responseText);

            fun( storage, param );
        }
    } 
}; 


xhr.open("GET", url, true);
xhr.send(null); 
    } 

function getBody(content) 
{
 test = content.toLowerCase();    // to eliminate case sensitivity
 var x = test.indexOf("<body");
 if(x == -1) return "";

 x = test.indexOf(">", x);
 if(x == -1) return "";

 var y = test.lastIndexOf("</body>");
 if(y == -1) y = test.lastIndexOf("</html>");
 if(y == -1) y = content.length;    // If no HTML then just grab everything till end

 return content.slice(x + 1, y);   
} 

Html file I load with ajax: 我用Ajax加载的HTML文件:

<html>
<body>
<form>
<input type="checkbox" name="values" value="" id="chk3" />
<select name="select3" class="test" style="width:7em;" id="select3">
<option VALUE="">0-100</option>
<option VALUE="/tags/">100-200</option>
<option VALUE="/"> 200-300</option>
<option VALUE="/"> 300-400</option>
<option VALUE="/"> 400-500</option>
</select>
<input type="button" class="submit" id="testbutton" style="width:12em;" value="submit" onClick="testIt();">
 </form>                            
 </body>
</html>

I load it using: 我使用以下方法加载它:

<li onClick='setSelectedListElement(this);'>
<a onclick="loadWholePage('test.html');">TEST
</a>
</li>

And the really primitive script that should check if check box is checked :) 并且应该检查复选框的真正原始脚本是:)

<script type="text/javascript">
function testIt(){
var x=document.getElementById("chk3").checked;
alert(x);
}
</script>

Once your page is loaded, Right Click-> View Source and check the Ids of your controls that are generated at runtime. 加载页面后,右键单击->查看源代码,然后检查在运行时生成的控件的ID。 Try to use those Ids of the controls (checkboxes etcs) and check if the validations are triggered or not. 尝试使用控件的那些ID(复选框等),并检查是否触发了验证。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM