1

We've got some code like this that has been working for some time. It's for a button that submits an html form, unless a nearby textbox is empty. I've taken this snippet directly from our code; I've changed the contents of the fields, but haven't deleted anything.

<input 
    type="image" 
    name="inputName"    
    id="inputId" 
    src="someImage" 
    alt="altText"
    onclick="
        javascript:var obj = document.all ? document.all[&quot;aTextInputFormFieldId&quot;] : 
        document.getElementById(&quot;aTextInputFormFieldId&quot;); 
        if(obj.value.length == 0)
        {
            alert('It is 0!');
            return false;
        };" 
    style="someStyle" />

(The original code is all on one line, but linebreaks have been added here for clarity).

It seems to work perfectly in Firefox. But in IE, it fails in a way that I can't understand: if the input field (aTextInputFormFieldId) is empty, it puts up the alert, but then submits the form anyway after the user clicks the okay button on the alert.

When I did a view source on the entire page, and copied it locally, it seems to work perfectly; it either submits the form, or puts up the alert, and then refuses to submit.

My best current (but still lousy) theory is that one of the included JavaScript libraries is doing something funny, which would explain why it failed on the real site, but fails when I copy it locally (since I didn't grab the various libraries it's importing.) This makes logical sense, and I'll check it out by grabbing the libraries too, but I'm having a hard time imagining what these libraries could be doing to mess this up (or why)...they're just normal utility libraries like jquery, utility functions, etc.

So does anyone have a theory about what could be happening here?

Beska
  • 12,445
  • 14
  • 77
  • 112
  • if you have multiple libraries, try adding them in one by one to figure out which one is messing with your form. – Scott M. Feb 09 '11 at 20:38
  • 1
    `document.all`?! Why are you catering for IE 4? – Quentin Feb 09 '11 at 20:39
  • @Scott: that's my thought, and what I'm doing now...but I'm having a hard time picturing why there would be a library that somehow intercepts this, allowing the alert to go through, but cancelling the return false. But maybe something else is going on...(obviously I'm missing *something*...) – Beska Feb 09 '11 at 20:40
  • @David: It's legacy code...no one seems to have touched it in a long time. I just got passed a bug for it today since it stopped working. Very mysterious. While document.all is a bit of a relic, I don't think it's the issue. – Beska Feb 09 '11 at 20:41
  • 1
    Sounds like a good reason to pull it apart and rewrite it. `onclick="return this.form.elements.aTextInputFormFieldId.length"` – Quentin Feb 09 '11 at 20:45
  • @David: I may end up having to do that...but I'd like to understand why the problem is occuring, or I can't be sure it won't recur. Since I can't get it to fail locally, I can't easily test any "fix" I might make. – Beska Feb 09 '11 at 20:49
  • Just found the high-level cause of the issue. Apparently a conflict with a jquery library (colorbox). Exactly why this is happening is a bit less clear, and is probably a tale for another day. – Beska Feb 09 '11 at 21:11

2 Answers2

3

You mentioned jQuery, jQuery can interfere with your form if it is doing anything through its submit() handler. Check to see if jQuery.submit() is bound to your form.

Usually when doing pure javascript it is not enough to return false. Depending on what you want to accomplish you might want to look at preventDefault or stopPropagation

When working with Internet Explorer be aware that the event object is not passed to the function but can be found in window.event instead.

Update Internet explorer might want you to use event.returnValue = false; instead. In your case that would be window.event.returnValue = false; when targeting IE.

Good luck

Community
  • 1
  • 1
Kristoffer Sall-Storgaard
  • 10,576
  • 5
  • 36
  • 46
  • ftr, I was having the same issue in chrome. this seems weird and dirty, because I've always just returned true/false, but setting event.returnValue made it work as expected. bleh. – viggity Apr 09 '13 at 19:26
0

Javascript protocol links have to be one line, ie. no new lines. 

onclick="javascript:var obj = document.all ? document.all[&quot;aTextInputFormFieldId&quot;] :document.getElementById(&quot;aTextInputFormFieldId&quot;); if(obj.value.length == 0){alert('It is 0!');       return false;};"
invisible bob
  • 864
  • 1
  • 9
  • 24
  • Sorry...it is...I just reformatted it to be vaguely readable on the site. I'll make that clear in the question. – Beska Feb 09 '11 at 21:07
  • Well, that's not a javascript protocol. The string in the onclick gets parsed as a function and javascript: is simply considered a label. If it was the href property of a link, you wold be correct – Ruan Mendes May 18 '11 at 18:59