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
Related
I recently came across bower a web-tool to develop a progress bar. I have implemented a progress bar as series of radio buttons aligned next to each other. The concept is to load data from a .edf file to the browser upon clicking the radio buttons. All these work fine before I apply the Bower scripts. When I make a transition from one radio button to another I would like to have an effect which shows a transition while clicking on each button. Can I get some advice here if I can achieve this by applying any of the bootstrap classes or to modify the code existing? The snippet I have added is not loading the Bower libraries, otherwise it would look similar to this.
$('.radios').radiosToSlider({ animation: true, });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"/>=
<script type="text/javascript" src="bower_components/radios-to-slider/dist/jquery.radios-to-slider.js"/>
<link rel="stylesheet" type="text/css" href="bower_components/radios-to-slider/dist/radios-to-slider.css"/>
<div class="radios">
<label for="option1" class="btn">
<input id="option1" name="options" type="radio" autocomplete="off" onchange="dataSegment(0)" checked>
</label>
<label for="option2" class="btn">
<input id="option2" name="options" type="radio" autocomplete="off" onchange="dataSegment(1)">
</label>
<label for="option3" class="btn">
<input id="option3" name="options" type="radio" autocomplete="off" onchange="dataSegment(2)">
</label>
<label for="option4" class="btn">
<input id="option4" name="options" type="radio" autocomplete="off" onchange="dataSegment(3)">
</label>
<label for="option5" class="btn">
<input id="option5" name="options" type="radio" autocomplete="off" onchange="dataSegment(4)">
</label>
</div>
Your problem is that you are using a URL that is local to a website. Notice that you have no protocol in the URL (https://, http://, etc). I did a little digging, and the URL you should be using is http://rubentd.com/bower_components/radios-to-slider/dist/jquery.radios-to-slider.js
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>
I am using Parsley JavaScript validation library in a Spring MVC project. I am trying to validate a 'required' radio button group.
I want to display the validation message after the last radio button in the group. To achieve this i am adding data-parsley-errors-container="#element" attribute to the last radio button but Parsley is not using this custom error container. The error message wrongly gets displayed after the first radio button. In my case the error container will be added dynamically to the radio button group, but it's not working even when i am adding it inline.
Please find the JSFiddle sample code here https://jsfiddle.net/8ja2sm98/9/
<script>
$(document).ready(function() {
$("#commentForm").parsley();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<div class="form-group required">
<label for="gender" class="control-label">Gender</label>
<div class="radio">
<label><input id="gender1" name="gender" type="radio" value="M" data-parsley-multiple="gender" data-parsley-id="17">Male</label>
</div>
<div class="radio">
<label><input id="gender2" name="gender" type="radio" value="F" data-parsley-multiple="gender" data-parsley-errors-container="#genderError" required>Female</label>
</div>
<span id="genderError" style="background-color:blue;"></span>
</div>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</form>
You're missing data-parsley-errors-container="#genderError" on the "male" input.
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.
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?