Question

29

Send form data to Javascript on submit

rated 0 times [ 34] [ 5] / answers: 1 / hits: 68058 / 8 Years ago, fri, may 27, 2016, 12:00:00

Ok I feel like this should be really simple; so either I've completely missed the point of the questions on here and other websites I've read or it hasn't been asked in the same context....

I have a REALLY simple form element (below)

<form>

  <input type=text id=searchTerm />

  <input type=submit value=Submit id=submitButton />

</form>

And essentially all I want to do, when the Submit button is clicked, is have the value entered into the text box passed to a JavaScript Function and console logged (for now).

This looks like it has been asked a million times but the questions I've read don't answer my question (I don't think).

Edit Thank you for all the responses; the biggest problem is I was trying to reference a function in an external Javascript file that was being called after the form element.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

benitoh

Add To Favorites

Follow

Total Points: 150

Total Questions: 113

Total Answers: 104

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

benitoh questions

1 this.$refs empty with Vue 3 Options API

Sun, Mar 21, 21, 00:00, 3 Years ago

1 Close sidebar menu when click outside of it and when click on menu item

Fri, May 22, 20, 00:00, 4 Years ago

1 TypeORM Custom Repository, select distinct values from specified column

Mon, May 4, 20, 00:00, 4 Years ago

1 How can I enable the console log in VUE-CLI during development

Tue, Dec 17, 19, 00:00, 5 Years ago

1 String interpolation in graphQL query

Mon, May 13, 19, 00:00, 5 Years ago

View All

answered 8 Years ago susanajamiep · Accepted Answer

Something like this?

document.getElementById('theform').onsubmit = function() { 

    console.log(document.getElementById('searchTerm').value);

    return false;

};

JSFiddle here: https://jsfiddle.net/km7rt62v/

It's important to return false; to prevent default behaviour at the end of your submit handler, as otherwise the form will post and reload the page.

As others have demonstrated, it is also possible to use the onsubmit html attribute of the form element, it's a personal preference, but I prefer a cleaner separation between JS and HTML.

Edit: Since I got accepted answer and the question is tagged with jQuery, here's the jQuery equivalent:

$('#theform').submit(function() { 

    console.log($('#searchTerm').val());

    return false;

});