1

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
flen
  • 1,905
  • 1
  • 21
  • 44
  • 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 Dec 09 '17 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: http://www.java2s.com/Code/JavaScript/Language-Basics/PassingtheFormObjectasaParameter.htm . I'm gonna try that now – flen Dec 09 '17 at 20:56
  • 1
    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 Dec 09 '17 at 20:59
  • @AntK strange... I took out the `action` attribute from form (that is, now form is just `
    `) 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 Dec 09 '17 at 21:02
  • @AntK I still don't know why using onclick I got an error, but addEventListener worked flawlessly as you guessed. Do you want to write that as an answer so I can pick it? I'd still like to know, though, if it's possible to "submit" the form as an object to JavaScript, but I don't think there's a ready made function for that – flen Dec 09 '17 at 21:14
  • Sure, no problem, my guess is that you have to pass a function there, but you called a function with `this` which in return does not return a function. I could be wrong here though – Anton Kastritskiy Dec 09 '17 at 21:16
  • @AntK I tried removing the `this` argument (`onclick="myFunction();"`), but I get the same `TypeError`. I need to use `addEventListener` for it to work. Really strange – flen Dec 09 '17 at 21:22
  • 1
    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 Dec 09 '17 at 21:28

2 Answers2

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.

Anton Kastritskiy
  • 1,248
  • 1
  • 11
  • 23
  • 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);};` – flen Dec 09 '17 at 21:26
1
<form class="contact_form" onsubmit="return sendForm()">

const sendForm = () => {
      event.preventDefault();
      console.log(event.target.elements[***])
    }
Ru Chern Chong
  • 3,692
  • 13
  • 33
  • 43
Openwell
  • 336
  • 1
  • 3
  • 9