Access form element from onsubmit handler with jquery

Question

I have several forms on a page all with an onsubmit handler doSomthing(). How can I access the form element that actually called the handler? How to pass it to the function.

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

Change `PassSomethingHere` to `this`. Or better yet, get rid of the outdated `on*` event attributes and attach the event handler using unobtrusive JS. — Rory McCrossan, Nov 24 '16 at 09:26
@RoryMcCrossan I never have time to answer, you answer too quickly :( — Alexis, Nov 24 '16 at 09:33
@Alexis Don't worry it's a dupe anyway. That's why I didn't answer it :) — Rory McCrossan, Nov 24 '16 at 09:35
I have the same complain:P @RoryMcCrossan — Could you help me understand why I can not see `console` in my answer even after `preventDefault` ? — Rayon, Nov 24 '16 at 09:35
@Rayon it's because the form submission is blocked in the snippet iframe - see the console: `Blocked form submission to '#' because the form's frame is sandboxed and the 'allow-forms' permission is not set.` — Rory McCrossan, Nov 24 '16 at 09:37
@RoryMcCrossan — But I have prevented it, it just prevents anything after form submission including `submit-handler` ? — Rayon, Nov 24 '16 at 09:38
You prevented the event continuing, but the event isn't even raised in the sandboxed iframe, so your handler is never executed — Rory McCrossan, Nov 24 '16 at 09:39

Rayon · Answer 1 · 2016-11-24T09:43:12.547

Just pass this, this will refer to current element which is 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>

With jQuery: Use jQuery.on handler for submit event!

$('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>

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

The most comprehensive & complete answer +1 – Ryan Searle Nov 24 '16 at 09:35 — Ryan Searle, Nov 24 '16 at 09:35

score 1 · Answer 2 · answered Nov 24 '16 at 09:32

This is how you bind an event handler to submit using unobtrusive javascript

$(function(){
    $('form').submit(function(event){
        //Use $(this) to access the form
    });
});


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

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

score 0 · Answer 3 · edited Nov 24 '16 at 11:41

0

Adding simple id to each form will does the trick. try this code

    <script>
        function doSomthing( id ){
           var form = $('#'+id); // this is your form handle
           // Do some changes in the form values
           return false;
        }
    </script>

Html:

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

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

edited Nov 24 '16 at 11:41

Sudharsan S

15,336
3
31
49

answered Nov 24 '16 at 09:27

Srinivas B

96
8

whats wrong with this answer, Why people are down voting to my answer?? – Srinivas B Nov 24 '16 at 09:28
You already have a reference to the element by using the `this` keyword so making a DOM request to get an element you already have is redundant. Also, this method relies on changing the id you provide in every instance which is brittle and requires maintaining if the HTML structure changes. If you pass `this` the code is always the same and there's no maintenance needed. The use of jQuery is also not needed. You were downvoted as this is about the worst way to solve the problem. – Rory McCrossan Nov 24 '16 at 09:30
I understood that, people has already provided solutions on that scenario. Am trying to provide some more possibilities to the problem. That doesn't mean people down vote this. gross – Srinivas B Nov 24 '16 at 09:31
3

It does, because it shows people that come to this question in the future that while this may work, it's a very bad method to follow. – Rory McCrossan Nov 24 '16 at 09:32
but how come its helpfull people answering the same answer again n again. does that help anyone. plz answer – Srinivas B Nov 24 '16 at 09:34
No - and I already closed this as a duplicate – Rory McCrossan Nov 24 '16 at 09:35
JQuery: write less, do more. – Mark W Nov 24 '16 at 09:46

score 0 · Answer 4 · answered Nov 24 '16 at 09:27

0

pass just 'this.form' to the called function.

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

answered Nov 24 '16 at 09:27

ScanQR

3,740
1
13
30

Access form element from onsubmit handler with jquery

4 Answers4