javascript - 使用 jquery 从 onsubmit 处理程序访问表单元素

Question

这个问题已经有答案了:

The current element as its Event function param (3 个回答)

已关闭 6 年前。

我在一个页面上有几个表单，所有表单都有一个 onsubmit 处理程序 doSomthing()。如何访问实际调用处理程序的表单元素？如何将其传递给函数。

<script>
    function doSomthing( getThePassedElement ){

        // Do some changes in the form values

        return false;

    }
</script>


<form action="#" onsubmit="doSomthing( PassSomthingHere )">
    <input type="text" class="name">
    <input type="submit">
</form>

<form action="#" onsubmit="doSomthing( PassSomthingHere )">
    <input type="text" class="name">
    <input type="submit">
</form>

Answer 1

只需传递this，this将引用当前元素，即form!

this argument in inline event-handler refers to HTML DOM Object event belongs to!

function doSomthing(getThePassedElement) {
  console.log(getThePassedElement);
  return false;
}

<form action="#" onsubmit="return doSomthing(this);">
  <input type="text" class="name">
  <input type="submit">
</form>

<form action="#" onsubmit="return doSomthing(this);">
  <input type="text" class="name">
  <input type="submit">
</form>

使用jQuery:使用jQuery.on处理程序来处理submit事件!

$('form').on('submit', function(e) {
  e.preventdefault();
  console.log($(this).find('input.name').val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="#">
  <input type="text" class="name">
  <input type="submit">
</form>

<form action="#">
  <input type="text" class="name">
  <input type="submit">
</form>

使用DOM-API:

var forms = document.querySelectorAll('form');
[].forEach.call(forms, function(elem) {
  elem.addEventListener('submit', function(e) {
    e.preventDefault();
    console.log(this);
  })
});

<form action="#">
  <input type="text" class="name">
  <input type="submit">
</form>

<form action="#">
  <input type="text" class="name">
  <input type="submit">
</form>