I use the following code for my radio button and date field
<input type="radio" name="datefilter" value="all" checked>All sessions<br>
<input type="radio" name="datefilter" value="after" >
Changes take effect on:
<input type="text" name="date_filter" value="<? echo date('m-d-Y'); ?>">
When the user clicks on the text field, I would like the radio button with the value "after" to be selected, in case the forget to enter the value. I am a php hack, but don't know javascript much at all. If it will make it easier I can definitely add to the radio fields.
There is already a javascript function running that calls a date picking calendar popup when the user selects the text field. Don't imagine that will
Thanks!
Add some jQuery to it like this:
Example page on JSFiddle
Code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">
<script type="text/javascript">
$(document).ready(function () {
$('#date_filter').click(function () {
$("#after").attr('checked', true);
});
});
</script>
</head>
<body>
<input type="radio" name="datefilter" value="all" checked>All sessions<br>
<input type="radio" id="after" name="datefilter" value="after">
Changes take effect on:
<input type="text" id="date_filter" name="date_filter" value="2013-01-01">
</body>
</html>
Related
Below is my code
<!DOCTYPE html>
<head>
</head>
<body>
<form action="script.php" method="post" id="Form1">
<input name="radioGroup" type="radio" value="Radio1" id="Radio1id">
<input name="radioGroup" type="radio" value="Radio2" id="Radio2id">
<input name="radioGroup" type="radio" value="Radio3" id="Radio3id">
<br>
<br>
<input type="text" size="30" id="name" placeholder="Name*"><br>
<input type="text" size="30" id="email" placeholder="Email*"><br>
<input type="text" size="30" id="comments" placeholder="Comments (Optional)"><br><br>
<input type="submit">
</form>
</body>
</html>
Is there any way to validate radio button and text filed at same time. for an example if radio button is not checked or text field not used. should get a alert window.
Thanks,
Try something like that, or use JQuery because is easy to use for validation
if((document.getElementById('Radio1id').checked) && document.getElementById('name').value != "") {
//Action for checked radio button and text box without value
}else if(document.getElementById('Radio2id').checked) {
//Another Action . . .
}
if((document.getElementById('Radio1id').checked == false) && document.getElementById('name').value != "") {
//Action for NON checked radio button and text box without value
}
by using jQuery.
// valid syntax for jQuery
$("#Radio1id").is(":checked"); // for radio button
$("#email").val()===""; // for any input
use jQuery Validator , gives you more feature and choices down the road with any project. Plus, you can ask questions on GitHub.
I want to figure out how to change a JavaScript variable to a certain value when a HTML radio button is selected. Then I want to put the variable into local storage so I can put it on other pages of my site.
This is what I have so far:
<script type="text/javascript">
var radioArray = [null];
</script>
<input name="b1" value="button1" type="radio" onclick="radioChange('b1','1',radioArray);" />Button 1
<input name="b2" value="button2" type="radio" onclick="radioChange('b2','2',radioArray);" />Button 2
<input name="b3" value="button3" type="radio" onclick="radioChange('b3','3',radioArray);" />Button 3
<br />
<script type="text/javascript">
function radioChange(radioSet, radioButton, radioArray) {}
</script>
Not sure with what you wanted but radio button can be selected only one at a time and for that 'name' attribute should be same
Given the following code (yes, i know it is perhaps irrelevant in yii, but I added the tag so I update the question with the actual generated html):
<script>
$(function(){
$('#widgetId-form input[name="valueType"]').change(function(){
if ($(this).is(":checked"))
{
console.log("habilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", false);
}
else
{
console.log("deshabilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", true);
}
}).change();
});
</script>
<div id="widgetId-dialog">
<form id="widgetId-form" action="/support/test" method="post">
<div>
<input id="valueType-single" value="single" data-class="singleValueField" checked="checked" type="radio" name="valueType" />
<label for="single">Valor simple</label>
<input size="6" class="singleValueField" type="text" value="" name="singleValue" id="singleValue" />
</div>
<div>
<input id="valueType-range" value="range" data-class="rangeValueField" type="radio" name="valueType" />
<label for="range">Rango (inicio:fin:intervalo)</label>
<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_start" id="rangeValue_start" />:<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_end" id="rangeValue_end" />:<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_interval" id="rangeValue_interval" />
</div>
</form>
</div>
It doesn't trigger change() when a radio becomes unchecked. This implies: controls are disabled only on initialization (.ready()). change() is not triggered individually by controls losing the checkmark.
Question: how can I detect when a radio button loses the checkmark?
This is a conceptional problem. The radio buttons are seen somehow like one element. For closer information look at Why does jQuery .change() not fire on radio buttons deselected as a result of a namesake being selected?.
So the change-event will always only fire on the newly selected element and not on the deselected radios. You could fix your code like this:
$(function(){
$('#widgetId-form input[name="valueType"]').change(function(){
//could be also hardcoded :
$('input[name="' + $(this).attr("name") + '"]').each(function(){
if ($(this).is(":checked"))
{
console.log("habilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", false);
}
else
{
console.log("deshabilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", true);
}
});
});
$('#widgetId-form input[name="valueType"]:first').change();
});
You can check it at http://jsfiddle.net/jg6CC/. Greets another Luis M. ;)
I've been trying to find the solution as said in my title where when you have multiple checkboxes and when you check a checkbox with the value such as "blood" will be added to an input textbox. Each checked value in the textbox will be separated either with space or a comma. When you uncheck a checkbox the value corresponding to it will be removed from the textbox.
So far the closest example i've came across is from this one: Display checkbox value in textbox in the order of click
I've tried to change the code around a bit by using <input type="text" name="text" id="results" value="" /> and having $li.text(this.value); to $li.val(this.value); but nothing appears. Unfortunately jQuery isn't what I specialize in.
If possible can someone please shed some light?
Maybe this is what you need?
var arr = [];
$('#inputs input').change(function() {
if (this.checked) {
arr.push(this.value);
}
else {
arr.splice(arr.indexOf(this.value), 1);
}
$('#target').val(arr + '');
});
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="inputs">
<input type="checkbox" value="Apple">
<input type="checkbox" value="Orange">
<input type="checkbox" value="Pineapple">
<input type="checkbox" value="Mango">
</div>
<input type="text" id="target"/>
</body>
</html>
Try this
Fiddle demo
here you just need to apply a click event on all your check boxes.
and fill the input box on every click.
<script type="text/javascript">
(function () {
var ButtonGroup = YAHOO.widget.ButtonGroup;
var onCheckedButtonChange = function (p_oEvent) {
};
YAHOO.util.Event.onContentReady("mediaFilterButtonsFieldset", function () {
var oButtonGroup = new ButtonGroup("mediaFilterButtons");
oButtonGroup.on("checkedButtonChange", onCheckedButtonChange);
});
}());
</script>
<div id="resultInfo">
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="mediaFilterButtonsFieldset">
<div id="mediaFilterButtons" class="yui-buttongroup ie7filter" style="z-index:11;">
<div id="mediaFilterLabel">Go to</div>
<input id="radio1" class="filter_but" type="radio" name="0" value="First" checked rel="0" >
<input id="radio2" class="filter_but" type="radio" name="2" value="Second" rel="2">
<input id="radio3" class="filter_but" type="radio" name="1" value="Third" rel="1">
</div>
</fieldset>
</form>
</div>
These are my YUI buttons. They're just 3 radio buttons turned into "buttons"--literally. My question is this:
After people click the third button, I cannot manually check the first button anymore. How can I manually check "radio1"?
Edit:
According to the official YUI website, there is a method called "set". But I don't know how to use that in this buttonGroup.
The radio buttons must all have the same name attribute in order for them to be grouped together.
Answering your question with the set method. Perhaps this does the trick:
YAHOO.one("#radio1").set("checked",true);
To manually check the radio buttons, it's necessary to have the same name of radio button. Put the same name of radio button and get your result.