CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
j_allen_morris
j_allen_morris

Reputation: 599

Javascript onclick in radio button does not work in Chrome

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

Upvotes: 2

Views: 10497

Answers (3)

Rusca8
Rusca8

Reputation: 602

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

Upvotes: 0

Joseph Myers
Joseph Myers

Reputation: 6552

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.

Upvotes: 2

hasnat
hasnat

Reputation: 3027

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/

Upvotes: 1

Related Questions