Question

我在一个页面上有多个表单，其中表单DOM对象作为arugument传递给JavaScript函数，如：

    <form name="form1" method="post" action="">
      <input id="textfield1" type="text" name="textfield1">
      <input id="textfield2" type="text" name="textfield2">
      <input id="textfield3" type="text" name="textfield3">
      <input name="button" type="button" id="btn" value="Get Info" onClick="getdata(this.form)">
    </form><form name="form2" method="post" action="">
  <input id="textfield1" type="text" name="textfield1">
  <input id="textfield2" type="text" name="textfield2">
  <input id="textfield3" type="text" name="textfield3">
  <input name="button" type="button" id="btn" value="Get Info" onClick="getdata(this.form)">
</form>
<form name="form3" method="post" action="">
  <input id="textfield1" type="text" name="textfield1">
  <input id="textfield2" type="text" name="textfield2">
  <input id="textfield3" type="text" name="textfield3">
  <input name="button" type="button" id="btn" value="Get Info" onClick="getdata(this.form)">
</form>

function getdata(form){
  alert("the value is: " + form.getElementById('textfield1).value);
}

如何使用jQuery访问使用getdata（form）传递的DOM对象？

我已经厌倦了$（表单），但这似乎只能访问按钮对象，而不是表单中的其他输入。

感谢您的帮助。

Answer 1

$(form)确实应该为您提供表单的jQuery引用，而简单地form将是DOM节点本身。 Demo

但是，对于您尝试实现的目标，最好将DOM节点作为上下文传递给选择器：

$('#li_address', form).val()

但是，由于您按ID获取元素，因此您不需要上下文 - 因为您只有一个，对吧？但是使用DOM节点作为上下文的合理演示是here。

但是，由于您正在使用jQuery，您可能希望从onClick切换并在jQuery中处理事件绑定。请注意，我正在访问.btn假设为class="btn"而不是id="btn"的所有按钮。同样，ID在整个文档中应该是唯一的。不要偏离这一点。它会咬你的。

$('form .btn').click(function() {
    // this = button DOM node
    var form = $(this).closest('form');
    form.submit(); // or whatever
});

Answer 2

这将返回form1的DOM元素

$('form[name=form1]').get()

或所有表格

$('form').get()

要访问您可以访问的单个表单元素，例如按钮

$('form[name=form1] #btn')

Answer 3

您可以尝试像这样的getData函数 -

form.fieldName.value

如何使用jQuery访问传递给JavaScript函数的DOM对象

3 个答案: