Javascript onclick in radio button does not work in Chrome

Question

I have looked at this: Radio Button change event not working in chrome or safari and it didn't give me the solution I was looking for. I have a simple form with radio buttons and an onClick="jarod();" and jarod() is a function called above. See Code:

<script type="text/javascript">
function jarod()
 {
  alert('yes');
 }
</script>

The HTML form is:

<form id="form_601799" class="appnitro"  method="post" action="/formbuilder/view.php">
                <div class="form_description">
        <h2>Input Information to Prepare Answer</h2>
        <p></p>
    </div>                      
        <ul >
                <li id="li_1" >
    <label class="description" for="element_1">Number of paragraphs: </label>
    <div>
        <input id="element_1" name="element_1" class="element text small" type="text" maxlength="255" value=""/> 
    </div> 
    </li>       <li id="li_2" >
    <label class="description" for="element_2">Paragraph 1: </label>
    <span>

        <input id="element_2_1" name="element_2" class="element radio" type="radio" value="1" />

    <label class="choice" for="element_2_1" >Admit</label>
        <input onClick="jarod();" id="element_2_2" name="element_2" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_2_2">Qualified Admission</label>
        <input id="element_2_3" name="element_2" class="element radio" type="radio" value="3" />
    <label class="choice" for="element_2_3">Deny</label>
        <input id="element_2_4" name="element_2" class="element radio" type="radio" value="4" />
    <label class="choice" for="element_2_4">Qualified Denial</label>
        <input id="element_2_5" name="element_2" class="element radio" type="radio" value="5" />
    <label class="choice" for="element_2_5">Legal Conclusion</label>
    </span> 
    </li>
                <li class="buttons">
            <input type="hidden" name="form_id" value="601799" />

            <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
    </li>
        </ul>
    </form>

As you can see there is onclick="jarod();" attempting to call the javascript function. This does nothing when the onclick="jarod();" is in the input tag section but if I move it to the label section like:

    <label class="choice" for="element_2_1" onClick="jarod();">Admit</lable>

This "label" works just fine in Chrome. I'm going to use this to reveal a text area if the Qualified Admission or Qualified Denial is selected.

Thanks for any help.

PS - I also tried putting the onclick="jarod();" in the text field and it works just fine in Chrome. What is the deal with radio buttons and Chrome?

EDIT: This is frustrating. I used phpform.org to create the form to save me time. It uses this DOCTYPE at the top:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

When I use this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

It works just fine. Someone commented about it being a form of XHTML / XML and sure enough it is. At least I was able to spend the last few hours sleeping instead of sitting at the computer trying to figure out the solution!

Bad thing is now, my CSS doesn't look right. I think I'd rather have a formatting issue than a programming issue.

jarod

Works fine for me: http://jsfiddle.net/YabxY/ – Eli Mar 28 '13 at 06:15 — Eli, Mar 28 '13 at 06:15
This code works for me in Chrome: – Karol Mar 28 '13 at 06:16 — Karol, Mar 28 '13 at 06:16
Works fine for me too in chrome browser. – Devang Rathod Mar 28 '13 at 06:20 — Devang Rathod, Mar 28 '13 at 06:20

score 2 · Accepted Answer · answered Mar 28 '13 at 06:16

Is your document written as any XML-based form of HTML? Because if so, then onClick will be ignored, as names are case-sensitive. If you put your whole document up, then someone can test everything within the context of the original document, and someone can definitely give you a definitive answer (I'm going to bed pretty soon).

For now, my answer is try to change onClick to onclick in the attribute of the radio button.

Also, you need to put onclick inside of every single radio button, not just one of them. The other radio buttons are separate HTML elements, and so the onclick event from one of them does not apply to any of the others.

I just included it in one for testing purposes. Having it in all of them shouldn't change whether it works for one should it? — j_allen_morris, Mar 28 '13 at 11:33

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

As you havent provided your DOCTYPE issue here might be onclick or onClick

you should check this. onclick or onClick?

Also try

onclick="javascript:jarod();"

as of onclick for radio its working on chrome for OSX here's a fiddle on that

http://jsfiddle.net/9efbR/

edited May 23 '17 at 10:25

Community

1
1

answered Mar 28 '13 at 06:16

hasnat

2,647
1
20
23

1

Yep, this is the first thing that I noticed, also.\ – Joseph Myers Mar 28 '13 at 06:17
Interesting. I'm beat for the day. I'll follow up with more information tomorrow. – j_allen_morris Mar 28 '13 at 07:38
I edited my question above regarding DOCTYPE. I also found that there was something in an included JS file that was causing problems. I took it out as I don't need that JS file on this form. It was included across all files for consistency but I see no reason to leave it in, especially when it is messing things up! – j_allen_morris Mar 28 '13 at 11:58

score 0 · Answer 3 · answered Mar 18 '20 at 08:17

0

I had a similar issue with radio inputs (couldn't get onclick="" to work), and the solution has been changing onclick to onchange.

answered Mar 18 '20 at 08:17

Rusca8

533
4
11

Javascript onclick in radio button does not work in Chrome

3 Answers3