Javascript onclick in radio button does not work in Chrome - javascript

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

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.

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/

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

Related

radio boxes are not setting attribute checked

I guess kind of a silly question here. I have created a .html file on my desktop outside of fiddle (so please don't test it in fiddle but just create a .html file on your computer to test this). in the file I JUST have 3 radio buttons and jquery attached. However, boxes never work right as checked or clicked attribute never gets set on them and literally they don't alternate when checked on. What am I missing here?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="well" value="well" />1 - Very well<br />
<input type="radio" name="little" value="little" />2 - A little<br />
<input type="radio" name="not" value="not" />3 - Not at all<br />
</body>
However, boxes never work right as checked or clicked attribute never gets set on them
None of the code you've supplied will set the checked attribute.
You need to actually set it, to set it:
<input type="radio" name="well" value="well" checked>
Note: Browsers remember the state of forms when refreshing the page. If you are testing by modifying the HTML and then clicking the refresh button, you may not see any effect. Click the address bar and press enter to avoid this problem.
There is no clicked attribute for the input element.
they don't alternate when checked on
They have different name attribute values. To be part of the same radio group, each radio button must share the same name.
You have three groups, each with one member.
Your radio buttons don't know they're related. The name attribute should be the same, while the value can be changed for each.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rating" value="well" />1 - Very well<br />
<input type="radio" name="rating" value="little" />2 - A little<br />
<input type="radio" name="rating" value="not" />3 - Not at all<br />
In order for them to be mutually exclusive (so that when you select one, it deselects any others) all of the radio elements have to have the same name. Change your code like so and it will work:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="radio" value="well" />1 - Very well<br />
<input type="radio" name="radio" value="little" />2 - A little<br />
<input type="radio" name="radio" value="not" />3 - Not at all<br />
</body>
</html>

Hiding HTML form elements not using id's

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Question 1</h2>
<div>
</div>
<div>
<input type="radio" name="name_radio1" value="value_radio1" onclick=$().hide(); />Audio Question
<input type="radio" name="name_radio1" value="value_radio2" onclick=$().hide(); />Image Question
<input type="radio" name="name_radio1" value="value_radio3" onclick=$().hide(); />Standard Question
</div>
<div align="center" style="padding:25px;width: 300px;">
<input name="question" size="35" class="standardQuestion" type="text" value="" />
<br>
<input name="audioFile" class="audioFile" type="file" />
<br>
<br>
<textarea name="message" rows="10" cols="20">
</textarea>
<br>
<input name="imageFile" class="imageFile" type="file" />
<br>
</div>
<div>
<h2>Question 2</h2>
<div>
</div>
<div>
<input type="radio" name="name_radio1" value="value_radio1" onclick=$().hide(); />Audio Question
<input type="radio" name="name_radio1" value="value_radio2" onclick=$().hide(); />Image Question
<input type="radio" name="name_radio1" value="value_radio3" onclick=$().hide(); />Standard Question
</div>
<div align="center" style="padding:25px;width: 300px;">
<input name="question" size="35" class="standardQuestion" type="text" value="" />
<br>
<input name="audioFile" class="audioFile" type="file" />
<br>
<br>
<textarea name="message" rows="10" cols="20">
</textarea>
<br>
<input name="imageFile" class="imageFile" type="file" />
<br>
</div>
<div>
`I am trying to add to an HTML Quiz editor started by someone else that allows me to add from 1 to n questions. Quiz questions can be based upon an audio recording, an image, or just plain text. If the question is an audio/image/text based question, I would need to only show the HTML form elements related to an audio/image/text based question. The questions on the quiz can be changed/updated/deleted by the user of the editor so an audio question could be changed to an image or text based question. If the question type is changed via a radio button, the appropriate controls for that question type need to be displayed.
For example...
Question 1
Radio ImageQuestion Radio AudioQuestion Radio TextQuestion
textbox 1 (Only show if Radio Button ImageQuestion is checked)
File (Only show if Radio Button AudioQuestion is checked)
textbox 2 (Only show if Radio Button TextQuestion is checked)
Question 2 (same elements as above)
....
Question N (same elements as above)
While each question will have the same HTML form elements, the data in each question should be independent so when I hide some control for question 1 since the user clicked on a specific radio button there, it should not impact what is diplayed for questions 2 to N.
The key constraint I would like to work with is not use id's since the code that I am working on is over halfway done and has been implemented without id's. And I could not hardcode the id's since I don't know how many of them will actually be needed. It would be a significant change to add id's but if that is the only reasonable way or clearly the best way that this can be accomplished, please let me know. Any advice on the best approach to take would be appreciated. Right now the code is using jquery/javascript and I would like to stick with that and basic html/css. I am speculating based upon my research that I may need to use code like .parent().find("a specific class") and the onclick event but I'm not sure if this is the right approach to take and is even feasible. Thanks.
Are you trying to do this without javascript?

div disappears when page refreshed

Can't figure out why the below piece of code makes the textfield disappear upon page refresh (when 'No' radio button selected).
Also, after the page is refreshed the default radio button doesn't get selected.
Forcing refresh, fixes the problem, though.
Any ideas?
<html>
<body>
<div class="editfield">
<div id="field_1">
<label>
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">Yes
</label>
<label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<body onLoad="document.getElementById('radio-2_id').checked=false; document.getElementById('radio-1_id').checked=true;">
<div class="editfield">
<div id="field_1">
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">
<label for='radio-1_id'>
Yes
</label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">
<label for='radio-2_id'>
No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
just a short recap:
1. on page refresh the div should disappear (all css and js and html that was dynamically set / added is removed) and the selected radio button should be the first (Yes)
2. tested this on all major browser and it works
3. still can't figure out why it wasn't working on Mozilla and IE without the JS refresh
I moved the radio buttons out of the labels to see if that impacted the refresh in any way and it didn't. Also, I removed an extra </div> that was in the original code.
The page refresh will initiate the page in its' original state. So the
style="display:none"
will be reactivated on the div and will be hidden and the "Yes" button will also be reenabled
what i did have a textarea insert number first ,0 make it readonly
then it will not disappear on refresh,to insert document.getElementById("demo").readOnly=false,and true to enable readonly

Jquery mobile - Refreshing checkboxes with pageinit

I am calling a page (see code below) from a list of links on another page using. A list like this
<ul data-role="listview" data-theme="g">
<li>test</li>
</ul>
with the code below being the test.html page.
I am using jquery mobile on these pages. Only the checkboxes after the first 3 checkboxes seem to get refreshed properly (appear as checked) when the page is loaded by clicking on the link. The first three checkboxes always appear to be unselected and their checked value is set to false. What is unusual is that if I place an if statement right after the statement that is setting the checkbox to true the checkbox checked value evaluates to true, but appears to be false on the rendered page and you look at the checked value in the elements area of the web inspector. When you refresh the page (using F5 or the refresh button near the address bar) the checkboxes refresh as you would expect. Any help would be greatly appreciated. While the sample code below appears to just be setting all the checkboxes to a checked value I am really (in my real page) setting their value based on data from a recordset so I cannot just do a mass setting to true and refresh. I have to loop through the recordset and set the checkbox values accordingly. The code below is just a simple reproduction of the error I am having. Thank you!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Checkbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="jqm1/jquery.mobile.structure-1.0.1.min.css" />
<script src="jqm/jquery-1.7.1.min.js"></script>
<script src="jqm/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="loadCB" data-role="page">
<script type="text/javascript">
$("#loadCB").live('pageinit', function() {
// do something here...
for (i=0;i<=5;i++)
{
$("#checkbox-"+i).prop("checked", true);
$("#checkbox-"+i).prop("checked", true).checkboxradio("refresh");
}
});
</script>
<article data-role="content">
<form id="frmR">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" value="0"/>
<label for="checkbox-0">checkbox-0</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" value="1"/>
<label for="checkbox-1">checkbox-1</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" value="2"/>
<label for="checkbox-2">checkbox-2</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" value="3"/>
<label for="checkbox-3">checkbox-3</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" value="4"/>
<label for="checkbox-4">checkbox-4</label>
<input type="checkbox" name="checkbox-5" id="checkbox-5" class="custom" value="5"/>
<label for="checkbox-5">checkbox-5</label>
<input type="submit" value="Set Rules" />
</form>
</article>
</body>
</div>
</html>
Check this code
$("#loadCB").live('pageinit', function() {
// do something here...
$("input[type='checkbox']").attr("checked",false).checkboxradio("refresh");
});
I wrote a fairly comprehensive list of widgets and the method by which you refresh them:
http://andymatthews.net/read/2011/12/14/Refreshing-jQuery-Mobile-listviews,-buttons,-select-dropdowns,-and-input-fields
Perhaps that will answer your question?

Weird input buttons inside labels onClick handler behavior

<!DOCTYPE HTML PUBLIC "-//WC3/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<label>A label
<input type="button" value="First" onClick="alert('First');" />
<input type="button" value="Second" onClick="alert('Second');" />
</label>
</body>
</html>
Tried this code in Firefox 3.6.8. When I click "first" it displays "first". When I click "second", it displays "second, and then "first"? Is this a weird onClick behavior due to block level tags (input) in inline tag (label)?
Yup, it happens in alot of browsers (well all the ones i have installed anyway), and it happens with span tags (which are also inline).
If this is a form, it should read:
<label for="First">First</label>
<input type="button" value="First" id="First" onclick="alert('First');" />
<label for="Second">Second</label>
<input type="button" value="Second" id="Second" onclick="alert('First');" />
If not, try span tags instead?
Your buttons are nested into the single label element. When you click on the second button, Firefox activates the label and then the first button. You should divide your label, as suggested by #jamie-wilson.

Categories

Resources