CODEWITHSUNDEEP
javascripthtml
user3657144
user3657144

Reputation: 1

Form still submit when return false (Can't see the error)

I searched on stackoverflow and find some answers, but I tried everything. Maybe it is just a small, or a few small mistakes, but I can't find them.

I also tried on jsFiddle!

<form class="search" onsubmit="return false;" method="get" action="index.html">
    <input class="text" type="text" onblur="if(this.value == ''){this.value = this.defaultValue;}" onfocus="if(this.value == this.defaultValue){this.value = '';}" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" value="Nachname" name="inputNachname" />
    <input class="text" type="text" onblur="if(this.value == ''){this.value = this.defaultValue;}" onfocus="if(this.value == this.defaultValue){this.value = '';}" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" value="Vorname" name="inputVorname" />
    <input type="hidden" value="search" name="query" />
    <button id="searchButton2" onmouseover="this.style.cursor = 'pointer';" onclick="form.submit();" value="Go" type="button">SUCHE</button>
</form>

I want to have a function, which returns false:

<form class="search" onsubmit="return go_search();" method="get" action="index.html">

and this is the function:

function go_search(){
    alert('abort');
    return false;
}

jsFiddle

Maybe anyone can find some mistakes or find a better way to do this?

Upvotes: 0

Views: 168

Answers (4)

durbnpoisn
durbnpoisn

Reputation: 4669

You need to lose the onSubmit tag. Just returning it FALSE won't exactly acheive what you are going for. It seems you want to call a function that MAY return "false" if validation fails. Here is a good method for handling that.

You need to attach the function call to your submit button

onclick="go_search()"

And inside your function, make the form submit if you'd like (after validation).

function go_search(){
    alert('abort');
    if (youWantToSubmit==true) {
     form.submit();
     }
}

Even this won't work 100% because your form has no name or ID. You need to add those, and use a more correct call like:

document.getElementByID("[formID]").submit();

Upvotes: 1

j08691
j08691

Reputation: 207901

There are two problems with your fiddle.

  1. Your JavaScript function was wrapped in a window.load handler putting it in the wrong scope. Just putting it in the head will suffice.
  2. Your button had the type button, not submit. The onclick="form.submit();" in your button was running and submitting the form since it was triggering the submission, instead of triggering the form's submit handler (onsubmit="return go_search();"). Changing the button's type from button to submit will fix that.

jsFiddle example

Upvotes: 2

jmore009
jmore009

Reputation: 12923

you can do this with jquery

$("#searchButton2").click(function(e){
    e.preventDefault();
    alert('abort');
});

JSFIDDLE

Upvotes: 0

Canser Yanbakan
Canser Yanbakan

Reputation: 3870

Use jquery.

$(function(){
    $('form.search').submit(function(){
        return false;
    });
});

See here: http://jsfiddle.net/U6UC3/

Upvotes: -1

Related Questions