javascript怎么访问动态生成表单中的对象？

Question

我生成动态表单的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 来引用动态表单中的对象，也没有反应。

请教：动态表单中的对象如何引用呢？

Answer 1

关于标题访问动态生成元素，请先看此答案：http://segmentfault.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好像不支持这种功能，所以只能放代码你自己另存成网页试试效果了。
另外动态元素绑定事件用绑定函数的方法的话是没有问题的，起码我这里测试正常。关于获取动态生成元素这个问题，其实只要注意在元素生成之后获取应该就没有问题了。