onclick button input not working in Chrome

Question

Javascript code:

function doClick()
{
  alert("clicked");
}

HTML code:

<div >
<table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;">
<tr>
<td width="100%">
  <table border="0" style="font-family:Arial; font-size:10pt;" cellspacing="0" cellpadding="3">
    <tr>
      <td>&nbsp;Find:</td>
      <td nowrap>
        <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
      </td>
      <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
    </tr>
    <tr>
      <td>&nbsp;In:</td>
      <td>
        <select name="Find_DataFile">
          <option value="1">Stage 1</option>
          <option value="2">Stage 2</option>
        </select>
      </td>
      <td align="center" valign="top">
        <input type="submit" value="Go" onclick="doClick();"/>
      </td>
      <td align="center"><font class="DataFG">F2<font></td>
    </tr>
  </table>
</td>
</tr>
</table>
</div>

Hi all,

Simple code like the above will not fire in Chrome (latest) but will under IE8 and IE10. Am I doing anything wrong ?.

Appreciate any help Thanks

After stepping thru each line in the code I supplied above (which also includes a server request to populate the dropdown named "Find_DataFile" whose code I was not able to supply) I have finally found the culprit that was causing an object not defined error (because it's id was not defined and I was calling getElementById to assign it to an temp object). All working now for IE8 IE10 Chrome and Safari. Thanks guys for all the time and effort to help me find a solution. It is much appreciated. I can breathe normally now lol !

Is `doClick()` the actual function name you're using, or did you change it for the question? — user2736012, Oct 15 '13 at 02:46
For sake of simplicity there is other html code surrounding the that I didn't include in my post. I'll try plugging it into the link provided by captain and come back if it doesnt work — ctaylor, Oct 15 '13 at 02:51
Open the inspector (ctr+shift+i) and check the console for any error, maybe something else if breaking your js and you think the problems is there but it's not — arieljuod, Oct 15 '13 at 03:00
Amended my question to include the actual code....which works when i plug it into JSFiddle :(((( — ctaylor, Oct 15 '13 at 03:02
If I refresh the page under the Inspector will it break at the point of any errors? At the moment it is not reporting any. — ctaylor, Oct 15 '13 at 03:07
What does it mean when the font color changes from black to a light brown color in the middle of javascript code ? — ctaylor, Oct 15 '13 at 03:18
Have you tried onClick? http://stackoverflow.com/questions/4380719/onclick-or-onclick — Shylo Hana, Oct 15 '13 at 03:33
@ctaylor When I said code, I meant the complete code. Not HTML and Javascript separately. Could you please post it as a single piece. — thefourtheye, Oct 15 '13 at 03:36
Upvote to Shylo for spotting the typo...would have been awesome as an answer XD — user1567453, Oct 15 '13 at 03:51
@thefourtheye It will not be possible to supply the complete code as this is company code and rather sensitive. I have made some progress tho and will report back as to my findings if anyone is interested. Thanks to all for your quick and helpful responses. Wish me luck ! — ctaylor, Oct 15 '13 at 04:03
@user1567453: That would have been an incorrect answer. Using `onclick` is just fine for an attribute. — user2736012, Oct 15 '13 at 04:13
After stepping thru each line in the code I supplied above (which also includes a server request to populate the dropdown named "Find_DataFile" whose code I was not able to supply) I have finally found the culprit that was causing an object not defined error (because it's id was not defined and I was calling getElementById to assign it to an temp object). All working now for IE8 IE10 Chrome and Safari. Thanks guys for all the time and effort to help me find a solution. It is much appreciated. I can breathe normally now lol ! — ctaylor, Oct 15 '13 at 06:02

user1567453 · Answer 1 · 2013-10-15T23:35:29.717

The submit button is a special type of button which is ONLY used inside the < form > tags. It runs whatever function you specify in the "onsubmit" attribute of the form it belongs to. Refer Here for an idea of how submit buttons interact with javascript and the form "onsubmit". You will be able to get the desired effect if you wire things up this way. so paying particular attention to the FORM markup the code would be...

<body>
    <div>
        <form name="myForm" action="http://www.google.com" onsubmit="return doClick();" method="post">
            <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;">
                <tr>
                    <td width="100%">
                      <table border="0" style="font-family:Arial; font-size:10pt;" cellspacing="0" cellpadding="3">
                        <tr>
                          <td>&nbsp;Find:</td>
                          <td nowrap>
                            <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
                          </td>
                          <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
                        </tr>
                        <tr>
                          <td>&nbsp;In:</td>
                          <td>
                            <select name="Find_DataFile">
                              <option value="1">Stage 1</option>
                              <option value="2">Stage 2</option>
                            </select>
                          </td>
                          <td align="center" valign="top">
                            <input type="submit" value="Go" />
                          </td>
                          <td align="center"><font class="DataFG">F2<font></td>
                        </tr>
                      </table>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

and then the javascript:

function doClick()
{
alert("I've been clicked");
}

And that works for me :)

Even though that^ is how you should handle js run on form submission I also got it working with the onClick in chrome :p — user1567453, Oct 15 '13 at 03:48
thanks for your suggestion. will try it if all else fails. Are nested
tags allowed ? Also onClick does not work either — ctaylor, Oct 15 '13 at 04:09
There was no code posted above where you have included a
tag. You should NOT nest
tags. I would say if you have a form tag already then make sure it has the same onsubmit as the one I have above so it links to your function. — user1567453, Oct 15 '13 at 04:31

Han · Answer 2 · 2013-10-15T03:27:01.167

0

For your sample. It should work.

There are two things you should be sure:

When you click the button, make sure that the Javascript code has been loaded.
Your Javascript code must not have any syntax error.
If the button is inside a form, after clicked, the form could be submitted.

edited Oct 15 '13 at 03:27

answered Oct 15 '13 at 03:01

Han

3,272
3
24
39

For #1 it works under IE so I'm assuming that the JS function is loaded – ctaylor Oct 15 '13 at 03:05
1

Your HTML you've updated is fine. I suspect that the issue can be in your JS code. – Han Oct 15 '13 at 03:07
Different browser has its own way to treat the script. For example, this object is valid in Chrome & FF but IE, `a={name:'AAA',age:19,}` because of the last comma `,`. But hold on, do you use any form in your HTML? – Han Oct 15 '13 at 03:15
So, it could be the issue. If your button inside that form, after click the button, function will be called and the form will be submitted (mean the page could be reloaded). You just put `alert("clicked");` into beginning of your function to see that the function is called. – Han Oct 15 '13 at 03:24

score 0 · Answer 3 · answered Oct 15 '13 at 03:08

0

the submit button already has a default functionality . it wont trigger the onclick function in many browsers. try changing the button type to 'button' and try to submit the form using javascript.

answered Oct 15 '13 at 03:08

Joe

618
1
9
18

onclick button input not working in Chrome

3 Answers3

Linked