[英]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.