1

I was going through some source code on an internal application at work, and I noticed something that I thought was strange.

Below is the html code in question.

<input type='submit' onclick='return doSomething()' value='Stuff Here'>

And this is the JS function

function doSomething() {
      //open a window with an aspx page that pulls down a pdf

      //always returns false
      return false;
}

So my question. How is that any different than making the input type='button' and simply calling the function without forcing a return value of false? I understand that the way it was done cancels form submission, but if you never want it to submit a form, why make it a type of submit in the first place?

Wickie Lee
  • 109
  • 1
  • 7
  • I think it might be down to 2 reasons.. 1 Screen readers, indexer's have a better hint at what the button does. And also not sure, but I believe type submit becomes the default button. eg. When you press enter.. – Keith Nov 02 '16 at 16:16
  • Could be mis-remembering here, but so far as I recall there's some really funny difference like `` doesn't take default action when you hit the enter button, but `` does? – James Nov 02 '16 at 16:16
  • I guess that's a question for whoever wrote the code, maybe you could ask why inline javascript is still used as well ? – adeneo Nov 02 '16 at 16:16
  • Possible duplicate of [In JavaScript event handling, why "return false" or "event.preventDefault()" and "stopping the event flow" will make a difference?](http://stackoverflow.com/questions/3042120/in-javascript-event-handling-why-return-false-or-event-preventdefault-and) – AM Douglas Nov 02 '16 at 16:17
  • Maybe progressive enhancement: if anything fails with the script, the form is still submited. You can speculate for a reason, but you're better served by asking the developer who did it. – Narayon Nov 02 '16 at 16:22
  • @adaneo As much as I would love to ask who wrote it. This is an 8 year old internal application (looks like this specific code is about 7 years old). Whoever wrote is no longer working at my company. I am new to development (recent grad), and am essentially just doing bug fixes. Came across this code, and while it works, was completely confused by it. – Wickie Lee Nov 02 '16 at 16:42

2 Answers2

-1

There are many reasons someone would do something like this, but what pops out at me is that it is opening another page. The "return false;" may be saying that the user is no longer in that tab.

Also, true and false can be used in if () statements. Which means that, despite them being "true" and "false", somebody could use them as so:

    if (var1 = false) {
    var2 = true;
    }

or even:

    if(var1 = false) {
    functionThatHappensWhenvar1EqualsTrue();
    }

So, "true" and "false" are just values. "false" can mean true, and "true" can mean false.

The code you have shown is not cancelling the input submission, it is returning a value. The input went through and opened the .pdf document.

Ampck
  • 15
  • 1
  • 6
  • I do not believe your explanation is completely accurate, or applies to my question. My understanding is when you have an input type='submit' and it gets a return value of false from the function called via onclick, then the form does not get submitted. If that is incorrect, then I apologize in advance. – Wickie Lee Nov 02 '16 at 17:26
  • the type="" is defining what type of input it is. When the user submits their input, it runs a function. in that function, "false" is returned to the console. – Ampck Nov 02 '16 at 17:33
-1

Firstly, since you can have multiple submit buttons on a form, if you need to run javascript before a form is submitted, do it in the form "onsubmit" event and not in the submit button's "onclick" event

In the case that you don't ever want the form to submit, then a submit button doesn't need to be used.

You will still need to prevent the form itself to be "implicitly" submitted

For example:

<form>
    <input type="text" name="name">
    <input type="submit" value="Submit">

</form>

Hitting enter when in the text field will activate the submit button, which you can tell it to execute a function.

However, if you have something like this (note the omission of the submit button):

<form>
    <input type="text" name="name">
</form>

or even

<form>
    <input type="text" name="name">
    <input type="button" value="Submit">
</form>

Then hitting enter while the text field has focus will submit the form. To prevent that, you will need something like this (haven't really tested the code yet) 

<form onsubmit="return false;">
    <input type="text" name="name">
    <input type="button" value="Submit">
</form>
nanytech
  • 398
  • 3
  • 10