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
Related
Here is the Code I written
<form>
<input type="radio" name="cand" value="fr" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');"> Fresher<br><br>
<input type="radio" name="cand" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');"> Experienced<br><br>
<input type="button" onclick="location.href='http://google.com';" value="Next" />
</form>
If suppose user select option 1 (say: freshers) then Link 1 (Fresher form link) Should be open.
or If select option 2 i.e experienced then experienced link should open.
Please Provide Answer with explanation, I am new to HTML and JavaScript.
You need script to update the location.href' . Trigger a function on selecting radio button and update theonclickproperty usingsetAttribute` method
function updateLink(value) {
if (value === "fr") {
document.getElementById("next").setAttribute('onclick', "location.href='www.google.com'")
} else {
document.getElementById("next").setAttribute('onclick', "location.href='www:wikipedia.com'")
}
}
<form>
<input type="radio" name="cand" value="fr" onclick="updateLink(this.value)"> Fresher<br><br>
<input type="radio" name="cand" value="ex" onclick="updateLink(this.value)"> Experienced<br><br>
<input id="next" type="button" onclick="location.href='www.google.com';" value="Next" />
</form>
This demo is just based on your code. Using addEventListener is a better option than using inline event handler.
Do like this.
Try to submit the form and prevent the default behaviour of the form using e.preventDefault()
Then change the input button type with submit
And add the data-link attr for Each input .For applying with window targeted link after submit
How its work
if you submit the form .its find the checked radio button data-link then
apply with window.location.Finaly its redirect the respected url
$('from').on('submit',function(e){
e.preventDefault();
window.location.href = $('input:checked').attr('data-link');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<input type="radio" name="cand" value="fr" data-link="Fresher"onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');" > Fresher<br><br>
<input type="radio" name="cand" data-link="Experienced" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');" > Experienced<br><br>
<input type="submit"/>
</form>
In the example below I add an attribute to each radio. When the user clicks on the button we fetch that attribute (data-href) and use window.location.href to transfer the user there. You can use value instead, if you find that better. Note that I removed the inline click-function and use an event for it instad.
$('#clickButton').click(function(){
var url = $('input[name=cand]:checked').data('href');
//Goto url
window.location.href = url;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="cand" value="fr" data-href="https://www.stackoverflow.com" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');" > Fresher<br><br>
<input type="radio" name="cand" value="ex" data-href="https://stackoverflow.com/q/45627889/4949005" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');" > Experienced<br><br>
<input type="button" id="clickButton" value="Next" />
</form>
I'm trying to modify the following code so the input element idEcho prints the value of the radio button being clicked, and instead of the current label display, i want to show W1, W2, W3 and W4 correspondingly.
and i want the values returned by the clicked radio buttons to be N1, N2, N3 and N4.
<body>
<label ng‐repeat="w in radioDetails">
{{w.what}}:
<input type="radio" ng‐model="$parent.mSelection" value={{w.what}}><br>
</label>
<input id="idEcho" type="text">
<script>
myModule=angular.module("appEX",[]);
myModule.controller("ctrl", function($scope){
$scope.mSelection="a1";
$scope.radioDetails=[
{what:"a1",yes:"W1",no:"N1"},
{what:"a2",yes:"W2",no:"N2"},
{what:"a3",yes:"W3",no:"N3"},
{what:"a4",yes:"W4",no:"N4"}
];
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
all that assuming proper angular js setup
thanks
<label ng‐repeat="w in radioDetails">
{{w.yes}}:
<input type="radio" ng‐model="$parent.mSelection" value={{w.no}}><br>
</label>
<input id="idEcho" type="text" ng‐model="$parent.mSelection">
For better understanding what I want to do, here is a screenshot
I want to be able to submit whether checkboxes are checked or not. For this I used the trick to have hidden input fields, because otherwise unchecked boxes are not submitted. What I want to do now is to give pairs (one hidden, one checkbox) the same name, but each pair a different name. I tried quite a bit with javascript and jQuery but could not figure out how to get this done. The "+" Button is for adding more Checkboxes, the "-" Button is for deleting them again.
<html>
<head>
<title>test</title>
<script type="text/javascript">
function clone(button, objid)
{
tmpvalue = document.test.elements['param[]'][1].value;
document.test.elements['param[]'][1].value = '';
var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
button.parentNode.insertBefore(clone_me, button);
document.test.elements['param[]'][1].value = tmpvalue;
}
function remove_this(objLink)
{
objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
</script>
</head>
<body>
<form name="test" method="post" action="test2.php">
<input name="param[0]" value="0" type="hidden">
<div id="hidden" style="visibility:hidden; display:none">
<div id="table"><table>
<tr><td>
<input name="param[]" type='hidden' value="0">
Parameter: <input name="param[]" type="checkbox" value="1">
</td>
<td>
<span style="margin-left:2em;"></span><input value="-" onclick="javascript:remove_this(this)" type="button">
</td>
</tr>
</table></div>
</div>
<div>
<input style="margin-top:2em;" value="+" onclick="javascript:clone(this, 'table');" type="button">
<button type="submit" name="sent">Submit</button>
</div>
</form>
</body>
</html>
So it would actually be nice to have some sort of counter like this:
<input name="param[i]" type='hidden' value="0">
Parameter: <input name="param[i]" type="checkbox" value="1">
Thanks for your help!
What about giving your checkboxes a class (for example "checkClass") and then scan all elements with this class using a jQuery? Like so..
// instead of $('button[type="submit"]') give your button an ID and use # selector
$('button[type="submit"]').click(function(){
//lets get all checkboxes..
$('.checkClass').each(function(){
// get their checked status
var checked = $(this).is(':checked');
// ..and do whatever you need here..
});
});
In terms of adding a new row on "plus" button click. Try considering the jquery "Append" method. Like so..
$('#plusButtonId').click(function(){
var rowHtml = '<tr><td>Parameter: <input name="param[]" type="checkbox" class="checkClass" value="1"></td><td><input value="-" type="button" class="remButton"></td></tr>';
$('#table').append(rowHtml);
});
..then use the ".remButton" selector and add a click event that will remove that tr element.
and last but not least - this is a great example why to start with AngularJS. It would be just one controller, a div with "ng-repeat" and a few methods. Try it ;)
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>
<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.