Pass form inputs to JavaScript function

Question

TL;DR: Is there a way to pass what a HTML form submits as an object to a JavaScript function?

In a form like this one:

<form action="javascript:myFunction(this);" name="myForm">
<label>First: <input type="text" name="first"></label>
<label>Second: <input type="text" name="second"></label>
<input type="submit" value="Submit this to Javascript!">
</form>

I want to pass the values of the form's inputs to a JavaScript function myFunction, instead of sending them to some other page with action (as in this line here: action="sendToPHPPage.php").

So far, my best attempt was to get all elements from the form, like this:

function myFunction(formThis) {
  let form = document.getElementsByName('myForm')[0];
  inputs = form.getElementsByTagName('input');
  for (let x of inputs) //do something with x.value

  console.log(formThis);
}

What I wanted, though, was that the this in myFunction(this) would allow me directly work on the inputs of the form. So instead of using document.getElementsByName('myForm') I could simply work on the this argument. But console.log(thisForm) tells me that formThis === window. That is, this gets me the window object.

Question: How can I make the this be binded to the form -- that is, how can I make the this argument represent the form or become an object that has as keys each one of the inputs? Is this possible without using document.get... || document.querySelector...?

Related SO questions: How do I get the value of text input field using JavaScript? , Passing HTML input value as a JavaScript Function Parameter

Have you tried adding an event listener to the form on submit event? If so you can get access to the form using the event.currentTarget inside the callback where event is the passed argument to the callback — Anton Kastritskiy
– Anton Kastritskiy, Commented Dec 9, 2017 at 20:54
Good call! That's what I'm thinking now, adding an onlick attribute to submit, oy maybe changing it to a type="button" like here: java2s.com/Code/JavaScript/Language-Basics/… . I'm gonna try that now — flen
– flen, Commented Dec 9, 2017 at 20:56
I mentioned submit event because the form can be submitted in multiple ways via mouse or keyboard, in order to not trying to catch different cases you can use submit event which will get do this unnecessary work for you. Also if you go with click listener the event.currentTarget will be the button which seem like not what you want from the description — Anton Kastritskiy
– Anton Kastritskiy, Commented Dec 9, 2017 at 20:59
@AntK strange... I took out the action attribute from form (that is, now form is just <form name="myForm">) and changed the type of the submit button to type="button" and then added onclick="myFunction(this.form)" I get: TypeError: myFunction is not a function. But I can call myFunction and it is clearly a function. What's wrong here? — flen
– flen, Commented Dec 9, 2017 at 21:02
I am not too sure, sorry. Adding event listeners via addEventListener gives you a passed event as well as an option to remove the event listener when needed, while inlining these makes it not as streamlined, however this can be my personal preference. — Anton Kastritskiy
– Anton Kastritskiy, Commented Dec 9, 2017 at 21:28

Anton Kastritskiy · Accepted Answer · 2017-12-09 21:22:36Z

1

You should try to bind an event listener to the form with a callback that you want to be called when a form is submitted, your code will look something like this

function myFunction(event) {
  event.preventDefault(); // prevents the form from reloading the page
  const form = event.currentTarget;
  // your logic goes here
}

document.getElementById('my-form').addEventListener('submit', myFunction);

Please note I've added an id my-form to the form to make it easier to select on the page.

answered Dec 9, 2017 at 21:22

Anton Kastritskiy

1,3631 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

flen Over a year ago

I'd only suggest one more thing: to put the addEventListener statement after the window is loaded. Like: window.onload = () => {document.getElementById('my-form').addEventListener('submit', myFunction);};

Ru Chern Chong · Accepted Answer · 2020-02-18 15:09:52Z

1

<form class="contact_form" onsubmit="return sendForm()">

const sendForm = () => {
      event.preventDefault();
      console.log(event.target.elements[***])
    }

edited Feb 18, 2020 at 15:09

Ru Chern Chong

3,77613 gold badges36 silver badges43 bronze badges

answered Feb 18, 2020 at 14:06

Openwell

3861 gold badge3 silver badges9 bronze badges

Collectives™ on Stack Overflow

Pass form inputs to JavaScript function

TL;DR: Is there a way to pass what a HTML form submits as an object to a JavaScript function?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

TL;DR: Is there a way to pass what a HTML form submits as an object to a JavaScript function?

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related