I want to stop a form submit button from reloading a page. This works in Firefox 3.6, Safari 5, and Opera. But Chrome 5 does not prevent the link.

Here is the form.

<form class="container_7" id="find-store-all" action=" ">
 <label for="customer-loc" class="grid_3">Find a Store Near You:</label>
 <input name="customer-loc" id="customer-loc" class="grid_3" type="text" placeholder="zip code or address"  />
    <button type="submit" id="customer-loc-sub" class="grid_1" >Enter</button>
</form>

I am using event delegation to manage the click. Here is the JavaScript.

document.onclick = handleClick;

function handleClick(e){
 if(!e) var e = window.event; 
 var target = e.target || e.srcElement;

 switch(target.id){
  case "customer-loc-sub" :
  e.preventDefault();
  findClosestStoreOne();
  break;
 }

}

Any suggestions would be appreciated.

I want to stop a form submit button from reloading a page. This works in Firefox 3.6, Safari 5, and Opera. But Chrome 5 does not prevent the link.

Here is the form.

<form class="container_7" id="find-store-all" action=" ">
 <label for="customer-loc" class="grid_3">Find a Store Near You:</label>
 <input name="customer-loc" id="customer-loc" class="grid_3" type="text" placeholder="zip code or address"  />
    <button type="submit" id="customer-loc-sub" class="grid_1" >Enter</button>
</form>

I am using event delegation to manage the click. Here is the JavaScript.

document.onclick = handleClick;

function handleClick(e){
 if(!e) var e = window.event; 
 var target = e.target || e.srcElement;

 switch(target.id){
  case "customer-loc-sub" :
  e.preventDefault();
  findClosestStoreOne();
  break;
 }

}

Any suggestions would be appreciated.

• javascript
• google-chrome

Share Follow asked Aug 24, 2010 at 16:11 ArmandoArmando 7122 silver badges55 bronze badges 6

• Have you tried debugging it yet? Have you alerted what the id is? Have you alerted and confirmed there is an event object being passed and it contains those properties? – meder omuraliev Commented Aug 24, 2010 at 16:20
• Yes. The event object is passed. And the script works as expected in Firefox, Safari, and Opera. What's more, if I place the listener on an element that does not have a default behavior, for example, a span, the script runs in Chrome. It seems only not to work when I need to prevent the default action from a from submission. – Armando Commented Aug 24, 2010 at 16:25
• Seems to be working here: jsfiddle/vgHMt (Chrome 5.0.375.127). Try it, and then try it with e.preventDefault() mented out. – Ryan Kinal Commented Aug 24, 2010 at 16:32
• Ryan, for me it is not working at jsfiddle. The alert is not showing up. I am also using Chrome 5.0.375.127. Makes me wonder if this is a Chrome setting. – Armando Commented Aug 24, 2010 at 16:40
• Well that is odd. Sounds like it could be a Chrome setting indeed. – Ryan Kinal Commented Aug 24, 2010 at 16:52

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

preventDefault() isn't the best way to prevent the browser's default behaviour in this type of DOM 0 event handler, as it certainly doesn't work in IE and possibly other browsers too. Just use return false; instead. Works in all browsers.

document.onclick = handleClick;

function handleClick(e){
 if(!e) var e = window.event; 
 var target = e.target || e.srcElement;

 switch(target.id){
  case "customer-loc-sub" :
  findClosestStoreOne();
  return false;
 }
}

Solved this. There are another event (the entire script is about 900 lines) that was affecting this. Thanks for your help. Especially Ryan Kinal. His ment's got me to look at the problem from another angle...so to speak.