CODE:
html
<form id="myform" type="post">
<fieldset id="myid1">
<input id="entries_8490_burn_id_1" name="entries[8490][burn_id]" value="1" type="radio"/>
<input id="entries_8490_burn_id_2" name="entries[8490][burn_id]" value="2" type="radio"/>
<input id="entries_8490_burn_id_3" name="entries[8490][burn_id]" value="3" type="radio"/>
</fieldset>
<fieldset id="myid2">
<input id="entries_8491_burn_id_1" name="entries[8491][burn_id]" value="1" type="radio"/>
<input id="entries_8491_burn_id_2" name="entries[8491][burn_id]" value="2" type="radio"/>
<input id="entries_8491_burn_id_3" name="entries[8491][burn_id]" value="3" type="radio"/>
</fieldset>
<input type="submit" />
</form>
JS/jquery
$( document ).ready(function() {
$('#myform').on('submit', function(e) {
e.preventDefault();
$("fieldset[id^='myid']").each(function () {
myid = this.id
alert(myid)
alert($(myid +" > input[name^='entries']").is(":checked"));
});
});
});
fiddle: http://jsfiddle.net/woav90mz
THE ISSUE:
When I check a radio button in one of the groups I still get "false false". Somehow the groups are not selected right!
Can anyone spot my mistake?
You have a missing # -> Updated fiddle
alert($("#" + myid + " > input[name^='entries']").is(":checked"));
And also, if you are just trying to ensure a radio button is checked from each group, you could simply do:
$("fieldset[id^='myid']").find(" > input[name^='entries']:checked").length;
Related
I have a checkbox with (20) choices and also (20) input fields , i need : when user choose one or more option, put value of checked checkbox in a separate input field else put (0)
I tried the following and it working when user chose only one option.
$(".cont").change(function() {
if($('.cont :checked').val() == "1") {
$('#q1').val('1');
}else{
$('#q1').val('0');
}
if($('.cont :checked').val() == "2") {
$('#q2').val('2');
}else{
$('#q2').val('0');
}
if($('.cont :checked').val() == "3") {
$('#q1').val('3');
}else{
$('#q3').val('0');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>
<input id="q1" type="text" >
<input id="q2" type="text" >
<input id="q3" type="text" >
You can combine the uses of .val() and .is(':checked').
$('#q' + $(this).val()) will select the correct text input.
$(this).is(':checked') ? $(this).val() : 0 will put your checkbox value inside your input if checked, 0 if not.
$('.cont input[type="checkbox"]').change(function() {
$('#q' + $(this).val()).val($(this).is(':checked') ? $(this).val() : 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>
<input id="q1" type="text">
<input id="q2" type="text">
<input id="q3" type="text">
You need to follow these steps and use much more managed code to achieve this:
Detect change on checkbox checked/unchecked
Get the value of the checkbox and since the id of the input element
is prefixed with q and the value of the checkbox, get the id
first
Use this id to fill the value in the input element.
In addition, you can check for uncheck of the checkbox and substitute
the previous value with null.
$('input[type="checkbox"]').change(function() {
var checkedValue = $(this).val();
var inputElemId = "q"+checkedValue;
if($(this).is(':checked')){
$('#'+inputElemId).val(checkedValue);
} else {
$('#'+inputElemId).val(null);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>
<input id="q1" type="text" >
<input id="q2" type="text" >
<input id="q3" type="text" >
I am having an issue I am not able to resolve despite through research and effort. So I am posting it here. I have two input radio button elements with the same name
, which represent Business Bank Account Service being used or not:
<input type="radio" name="bank_account_service" value="no" checked='checked'>No
<input type="radio" name="bank_account_service" value="yes">Yes
Now I also have the following JQuery function which should alert the value of this radio selection:
var bank=$('input[name=bank_account_service]:checked').val();
$(document).click(function(){alert(bank);});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Business Bank Account<br/>
<br/><input type="radio" name="bank_account_service" value="no" checked='checked'>No
<br/><input type="radio" name="bank_account_service" value="yes">Yes<br/><br/>
I want to alert yes when the radio button for Yes is checked. Can anyone guide me as to what am I missing or doing wrong please?
You might be looking for this:
$('input[name=bank_account_service]').click(function () {
alert($('input[name=bank_account_service]:checked', '#yourForm').val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Business Bank Account<br/>
<form id="yourForm">
<br/><input type="radio" name="bank_account_service" value="no" checked='checked'>No
<br/><input type="radio" name="bank_account_service" value="yes">Yes<br/><br/>
</form>
Looks like you've got some of your jquery backwards.
Try this:
//all click events go in here
$(document).ready(function(){
//click event on all of these bank inputs
$('input[name=bank_account_service]').click(function(){
//check to see if this is the yes option
if ($(this).val()=='yes') {
//do something
}
});
});
You might also want to consider putting unique IDs for each of your radio buttons. So if you could change your HTML to this:
<input type="radio" name="bank_account_service" value="no" id='bank_no'>No
<input type="radio" name="bank_account_service" value="yes" id='bank_yes'>Yes
Then you could make your jquery:
$(document).ready(function(){
//click event on only the yes input
$('#bank_yes').click(function(){
//do something
});
});
<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="log"></div>
</form>
<script>
$( "input" ).on( "click", function() {
$( "#log" ).html( $( "input[name='fruit']:checked" ).val() + " is checked!" );
});
</script>
Try something like this !!!
I have a problem, I need to create or delete as appropriate, a Input type text if a Input type checkbox is selected.
At the moment I can only create the input text, but I manage to find the solution to clear if the checkbox is unchecked.
My HTML code:
<form role="form" action="" method="POST">
<input type="checkbox" class="myCheckBox" name="category[]" value="1">
<input type="checkbox" class="myCheckBox" name="category[]" value="2">
<input type="checkbox" class="myCheckBox" name="category[]" value="3">
<input type="checkbox" class="myCheckBox" name="category[]" value="4">
<input type="checkbox" class="myCheckBox" name="category[]" value="5">
<div class="inputCreate"></div>
<input type="submit" name="" value="Send yours categories">
</form>
And the jQuery code is as follows
var wrapper = $(".inputCreate");
$('.myCheckBox').click(function() {
if ($(this).is(':checked')) {
$(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
}
});
As I can do that by unchecking the checkbox, also delete the input text field ?.
Solution to this problem:
var wrapper = $(".inputCreate");
$(".myCheckBox").change( function(){
if($(this).is(':checked')){
$(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
}
else{
$('.inputCreate :last-child').remove();
}
});
Greeting From Chile.
This should be exactly what you want:
Working Fiddle
var wrapper = $(".inputCreate");
$(".myCheckBox").change( function(){
if($(this).is(':checked')){
$(wrapper).append('<input type="text" name="mytext[]" placeholder="'+$(this).val()+'">');
}
else{
$('.inputCreate :last-child').remove();
}
});
Try this. I assume you want to remove the text box if checkbox unchecked.
$('.myCheckBox').click(function() {
if ($(this).is(':checked')) {
$(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
}else{
$(wrapper).find('input').remove();
}
});
I was trying to change the text of a submit button on change of radio button .My code for html part is :
<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment1" value="Yes"/>
<label for="segment1" id="controls">
<span class="ui-btn-text-controls">Yes</span>
</label>
<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="No" checked="checked"/>
<label for="segment2" id="controls">
<span class="ui-btn-text-controls">No</span>
</label>
<input type="submit" value="send" name="sendbutton" id="sendbutton"/>
My javascript code is as follow :
function check(){
var x;
x=document.f1.radio-view;
if(x[0].checked){
document.f1.sendbutton.value="PROCEED";
}
else if(x[1].checked){
document.f1.sendbutton.value="SEND";
}
}
But its not changing the test.What can be the reason for it?
If you decide to address elements directly, use their names properly:
var x = document.f1['radio-view'];
... as you cannot access with the dot syntax the properties which names are not valid identifiers. document.f1.radio-view is treated as document.f1.radio - view, which apparently makes no sense.
But actually, I'd rather skip this part completely: if radio-button is clicked, it's definitely set as checked. So this...
<input type="radio" onclick="check(this)" ... />
...
function check(button) {
document.f1.sendbutton.value = button.value === 'Yes' ? 'PROCEED' : 'SEND';
}
... should be quite enough, as this demo shows.
See Demo here: http://jsfiddle.net/Tngbs/
//HTML
<form>
<fieldset id="SPserviceStatus" data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Group<span class="required">*</span></legend>
<input type="radio" name="ss" id="s1" value="Yes">
<label for="serviceStatus1">Yes</label>
<input type="radio" name="ss" id="s2" value="No" checked="checked">
<label for="serviceStatus2">No</label>
</fieldset>
<input type='submit' id='submitBtn' value='SUBMIT' />
</form>
//JS
$("#s1").click(function () {
document.getElementById("submitBtn").value = "Yes Clicked";
return false;
});
$("#s2").click(function () {
document.getElementById("submitBtn").value = "No Clicked";
return false;
});
I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.
http://jsfiddle.net/ds345/Un8XK/1/
HTML:
<fieldset data-role="controlgroup" data-type="vertical">
<input type="radio" name="radio" id="x" data-theme="a" />
<label for="x" style="color: White">X</label>
<input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" />
<label for="y" style="color: White">Y</label>
<input type="radio" name="radio" id="z" data-theme="a" />
<label for="z" >Z</label>
<input type="radio" name="radio" id="none" data-theme="a" />
<label for="none" style="color: White">None</label>
</fieldset>
<button id = "Refresh" value="Refresh">Refresh</button>
JS:
$(document).ready(function () {
$("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh.
});
$("#Refresh").click(function(){
$("#x").attr("checked", false).checkboxradio("refresh");
$("#y").attr("checked", false).checkboxradio("refresh");
$("#z").attr("checked", false).checkboxradio("refresh");
$("#none").attr("checked", true).checkboxradio("refresh");
});
I am sure that I have missed something very small but not able to figure out why this approach is not working.
Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3
Thanks,
Deeksha
You should use prop over attr when dealing with boolean attributes.
.attr("checked", false) will add checked="false" to your element.In HTML, <input checked="false" .../> is the same as <input checked="true" .../> or simply <input checked .../> as the attribute simply needs to be present on the element for it to be active.
See this JSFiddle example.
Change your code to use .prop() instead:
$("#none").prop("checked", false)...
Here is a fixed version of your JSFiddle demo: http://jsfiddle.net/Un8XK/8/
What you have missed is that there is no need for script. Simply use a form with a reset button:
<form>
<input type="radio" name="radio" value="0" checked>0<br>
<input type="radio" name="radio" value="1">1<br>
<input type="radio" name="radio" value="2">2<br>
<input type="radio" name="radio" value="3">3<br>
<input type="reset">
</form>
If you really must use script, you can simply return the radio buttons to their default by adding a button to the form:
<input type="button" onclick="reset(this.form.radio);" value="Script reset">
and a function:
<script>
function reset(els) {
for (var i=0, iLen=els.length; i<iLen; i++) {
els[i].checked = els[i].defaultChecked;
}
}
</script>