我生成动态表单的javascript代码如下:
function showFormC(){
field = document.getElementById('hideForm');
button = document.getElementById('toggle');
if(formcShowed == false){
field.innerHTML = "<form onsubmit='return validate(this)' name='form_c' method='post'>";
field.innerHTML += "<input type='text' name='sex' />";
field.innerHTML += "<input type='submit'/>";
field.innerHTML += "</form>";
formcShowed = true;
button.value = 'Hide form c';
}
else {
field.innerHTML = "";
formcShowed = false;
button.value = 'Show form c';
}
}
上述代码的意图是当点击按钮时,如果表单已经显示就隐藏它,如果隐藏就显示它,其中 formcShowed
是一个全局变量。
我的 validate
函数如下:
function validate(form){
if(form === document.form_a){
... ...
}
else if(form === document.forms['form_b']){
... ...
}
else if(form === document.form_c){
sexvalue = form.sex.value;
if(sexvalue == null || sexvalue == ""){
alert('sex can not be empty!');
form.sex.focus();
return false;
}
return true;
}
}
对于静态生成的form_a和form_b,validate的功能可以正确执行,但对form_c,根本没反应。
我在进入validate函数时,就用 alert(form.name);
显示表单名字,可是点击form_c的提交按钮时,连表单名字也不显示。
我还试着用 getElementId 来引用动态表单中的对象,也没有反应。
请教:动态表单中的对象如何引用呢?
关于标题访问动态生成元素,请先看此答案:http://.com/q/1010000000180139#a-1020000000180154 有什么不懂的再提出来吧。
答案增补:
<form name="static" target="result" onsubmit="return validate(this);">
<p>username: <input type="text" name="user" /></p>
<p>password: <input type="password" name="pass" /></p>
<p><input type="submit" value="OK" /></p>
</form>
<iframe id="result" src="http://google.com" width="0" height="0"></iframe>
<style type="text/css">
.display {display:none;}
</style>
<script>
/*表单验证函数*/
function validate(form) {
alert(form.name);
if(form.className.indexOf('display') == -1) {
form.className = "display";
} else {
form.className = ""
}
}
/*动态创建元素*/
var dynamic = window.document.createElement('form');
dynamic.setAttribute('name', 'dynamic');
dynamic.setAttribute('target', 'result');
dynamic.setAttribute('onsubmit', 'return validate(this)');
dynamic.innerHTML = '<p> email: <input type="email" name="email" /></p>';
dynamic.innerHTML += '<p> password: <input type="password" name="pwd" /></p>';
dynamic.innerHTML += '<p> <input type="submit" value="OK" /></p>';
var body = document.getElementsByTagName('body')[0];
body.appendChild(dynamic);
/*访问动态元素*/
console.log(document.querySelectorAll('form[name="dynamic"] input'));
</script>
因为涉及到隐藏表单,所以我把表单的提交都指向到一个框架去,这样不会造成页面的刷新问题。jsfiddle好像不支持这种功能,所以只能放代码你自己另存成网页试试效果了。
另外动态元素绑定事件用绑定函数的方法的话是没有问题的,起码我这里测试正常。关于获取动态生成元素这个问题,其实只要注意在元素生成之后获取应该就没有问题了。