Stop form submit with native javascript

Question

I need to select a form via native javascript (not jQuery) and prevent the form submission (preventDefault).

The trick is that the form does not have a name or id, and cannot be assigned one.

My HTML:

<div id="search">
    <form method="get">
        <input type="text" name="post"/>
        <input type="submit" value="Post">
    </form>
</div>

So far, I have tried to use document.forms[0] and document.getElementsByTagName("form")[0] to select the form, but the value returned is undefined.

Another possible solution is to overload the functionality of the submit button, but I did not have success with that either.

adeneo · Accepted Answer · 2014-12-16 21:21:17Z

7

Using querySelector and an event listener, it's almost like jQuery

document.querySelector('#search form').addEventListener('submit', function(e) {
    e.preventDefault();
});

note that the script has to come after the elements, or use a DOM ready handler, so the elements are available.

FIDDLE

answered Dec 16, 2014 at 21:21

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

NewbornCodeMonkey Over a year ago

I tried something similar, but it tells me I cannot read property of null. I have no idea why it would be null...

adeneo Over a year ago

It's because there is no element available, and it returns null, add the script after the elements in the DOM, and it will work.

Debasish Pothal · Accepted Answer · 2014-12-18 11:34:12Z

1

on form submit just return false.

e.g. <form onsubmit="return false">

answered Dec 18, 2014 at 11:34

Debasish Pothal

4072 silver badges9 bronze badges

Comments

Neji · Accepted Answer · 2014-12-16 21:30:34Z

0

Simple way is use onsubmit event handler

<script>
var submitHandler = function() {
  // your code
  return false;
}
</script>

<form method="get" onsubmit="return submitHandler()">....</form>

or more easy

<form onsubmit="return false;">

answered Dec 16, 2014 at 21:30

Neji

1981 gold badge2 silver badges7 bronze badges

1 Comment

NewbornCodeMonkey Over a year ago

Sorry I should have been a bit more clear, I cannot modify the markup in any way. @adeneo's solution worked, I was on the right track I just forgot the script had to be included after the markup on the HTML page.

Collectives™ on Stack Overflow

Stop form submit with native javascript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related