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 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" ".dtd">
<html xmlns="">
When I use this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
It works just fine. Someone mented 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 puter 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
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 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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
When I use this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
It works just fine. Someone mented 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 puter 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
Share Improve this question edited May 23, 2017 at 11:57 CommunityBot 11 silver badge asked Mar 28, 2013 at 5:58 j_allen_morrisj_allen_morris 5992 gold badges12 silver badges26 bronze badges 3- Works fine for me: jsfiddle/YabxY – Eli Commented Mar 28, 2013 at 6:15
- This code works for me in Chrome: <input type="radio" name="a" value="b" onclick="alert('c')" /> – Karol Commented Mar 28, 2013 at 6:16
- Works fine for me too in chrome browser. – Devang Rathod Commented Mar 28, 2013 at 6:20
3 Answers
Reset to default 2Is 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.
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/9efbR/
I had a similar issue with radio inputs (couldn't get onclick="" to work), and the solution has been changing onclick to onchange.