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
– user2736012, Commented Oct 15, 2013 at 2:46
Have you tried onClick? stackoverflow.com/questions/4380719/onclick-or-onclick — Shylo Hana
– Shylo Hana, Commented Oct 15, 2013 at 3: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
– thefourtheye, Commented Oct 15, 2013 at 3:36

user1567453 · Accepted Answer · 2013-10-15 23:35:29Z

1

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 :)

edited Oct 15, 2013 at 23:35

answered Oct 15, 2013 at 3:38

user1567453

2,1632 gold badges20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1567453 Over a year ago

Even though that^ is how you should handle js run on form submission I also got it working with the onClick in chrome :p

ctaylor Over a year ago

thanks for your suggestion. will try it if all else fails. Are nested <form> tags allowed ? Also onClick does not work either

user1567453 Over a year ago

There was no code posted above where you have included a <form> tag. You should NOT nest <form> 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.

Joe · Accepted Answer · 2013-10-15 03:08:02Z

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, 2013 at 3:08

Joe

6081 gold badge9 silver badges18 bronze badges

Comments

Han · Accepted Answer · 2013-10-15 03:27:01Z

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, 2013 at 3:27

answered Oct 15, 2013 at 3:01

Han

3,3333 gold badges28 silver badges42 bronze badges

4 Comments

ctaylor Over a year ago

For #1 it works under IE so I'm assuming that the JS function is loaded

Han Over a year ago

Your HTML you've updated is fine. I suspect that the issue can be in your JS code.

Han Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

onclick button input not working in Chrome

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related