javascript怎么访问动态生成表单中的对象？-PHP中文网问答

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

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

<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>

全部回复(1)

怪我咯2017-04-10 13:11:25 1楼

关于标题访问动态生成元素，请先看此答案：http://segmentfault.com/q/1010000000180139#a-1020000000180154 有什么不懂的再提出来吧。

答案增补：

因为涉及到隐藏表单，所以我把表单的提交都指向到一个框架去，这样不会造成页面的刷新问题。jsfiddle好像不支持这种功能，所以只能放代码你自己另存成网页试试效果了。
另外动态元素绑定事件用绑定函数的方法的话是没有问题的，起码我这里测试正常。关于获取动态生成元素这个问题，其实只要注意在元素生成之后获取应该就没有问题了。

赞 +0

添加回复