I have a form:
<form onsubmit="return send(this)">
<div>
<input type="radio" id="1" name="check" value="check1" checked="checked">
<input type="radio" id="2" name="check" value="check2">
<input type="radio" id="3" name="check" value="check3">
</div>
</form>
And js:
function send(formObj) {
myFirebase.push({
checked: formObj.check.value
})
}
How do I get the checked input value and pass it into the object key checked ?
var radiochecked = "";
for(i in formObj.check) {
if(formObj.check[i].checked) {
radiochecked = formObj.check[i].value;
}
}
function send(formObj) {
myFirebase.push({
checked: radiochecked
}
Related
I am trying to keep #b0 disabled and unchecked if #b1 and/or #b2 is/are checked. The snippet below re-enables #b0 if uncheck #b1 or #b2
let boxes = $('#b1, #b2');
boxes.click(function() {
if (boxes.filter(':checked').length > 0) {
$("#b0").prop("disabled", this.checked).prop({"checked": false}, this.checked);
}
})
<label for="b0">1</label>
<input id="b0" name="name0" type="checkbox">
<label for="b1">2</label>
<input id="b1" name="name1" type="checkbox">
<label for="b2">3</label>
<input id="b2" name="name2" type="checkbox">
Fiddle
You can enable the checkbox in an else block, like this:
let used_for_contact = $('#b1, #b2');
used_for_contact.click(function() {
if (used_for_contact.filter(':checked').length > 0) {
$("#b0").prop("disabled", true).prop("checked", false);
} else {
$("#b0").prop("disabled", false);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input id="b0" name="info_for_contact" type="checkbox">
<label for="b0">1</label>
<input id="b1" name="info_for_contact" type="checkbox">
<label for="b1">2</label>
<input id="b2" name="info_for_contact" type="checkbox">
<label for="b2">3</label>
Fiddle
How can I toggle a checkbox by using a text input check and check automatically if it exists in the list?
For example :
if you write 222 in the input with id=222 will be checked
if already checked it will be unchecked
if is not found an alert will be shown
$(document).ready(function() {
$('#Scan').on('keypress', function(e) {
if (e.which == 13) {
Scan = $('#Scan').val();
//if value exsit in the list -> checked
//if value checked -> dechecked
//if value not exist -> alert not exist
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
You can check if your result collection has elements in it by using .length.
$(document).ready(function() {
$('#Scan').on('keypress', function(e) {
if (e.which == 13) {
Scan = $('#Scan').val();
target = $(`#${Scan}`);
if (target.length) {
target.prop('checked', !target.prop('checked'));
} else {
alert("Not found");
}
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
Reference for template literals, just in case.
Here is an example using your conditions specified in question.
My alert is not a true js alert as that will halt any further input changes, so i've created an alert function to show if [name="scan"] input value exists in your checkbox input ids.
See comments in my script...
// create input ids array
let input_ids = [];
// for each checkbox type input id
$('[type="checkbox"]').each(function() {
// get the input id
let input_id = $(this).attr('id');
// add input id to input ids array
input_ids.push(input_id);
});
// on input change in doc for elem [name="scan"]
$(document).on('input', '[name="scan"]', function(e) {
// [name="scan"] current input val
let val = e.target.value;
// if val exist in input ids array
if ($.inArray(val, input_ids) >= 0) {
// get this input by id
let $input = $('#' + e.target.value);
// if input is checked
if ($input.prop('checked')) {
// uncheck input
$input.prop('checked', false);
} else {
// else check input
$input.prop('checked', true);
}
} else {
// run alert
alert(e);
}
// stop propagation
e.stopPropagation();
});
// not found alert
function alert(e) {
// activate alert class
$('.alert').addClass('active');
// time out to hide
setTimeout(function() {
// remove class
$('.alert').removeClass('active');
}, 1000);
}
.alert {
position: fixed;
top: 10px;
right: 10px;
background: red;
padding: .25rem .5rem;
opacity: 0;
transition: all .5s ease;
color: #fff;
}
.alert.active {
opacity: 1
}
<input name="scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus />
<br />
<input class="custom-control-input" type="checkbox" id="111" />
<label for="111" class="custom-control-label">111</label>
<br />
<input class="custom-control-input" type="checkbox" id="222" />
<label for="222" class="custom-control-label">222</label>
<br />
<input class="custom-control-input" type="checkbox" id="333" />
<label for="333" class="custom-control-label">333</label>
<br />
<input class="custom-control-input" type="checkbox" id="444" />
<label for="444" class="custom-control-label">444</label>
<br />
<input class="custom-control-input" type="checkbox" id="555" />
<label for="555" class="custom-control-label">555</label>
<div class="alert">Not found</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I wouldn't use jQuery, but if you insist:
$(function(){
const scan = $('#Scan'), cci = $('.custom-control-input');
let scanVal;
scan.on('input', ()=>{
let scanVal = scan.val(), good;
cci.each((i, n)=>{
if(scanVal === $(n).val()){
n.checked = !n.checked; good = true;
}
});
if(good === undefined && scanVal.length > 2){
alert('Never use Alert');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
When I uncheck a checkbox, the text box value associated should be empty. And when I check again, need to display the previous value. Looking for a generic fix to save the previous values of the text boxes as the Checkbox count will increase in the future.
For Eg: When I check the first checkbox, the value of the text box associated is 1. When I uncheck the same checkbox, the value of the textbox should change to empty. And when I check it again, the old 1 value should display. Any help would be appreciated.
jQuery:
$(".drilling_specify").click(function () {
if ($(this).is(":checked")) {
$(this).nextAll('input').first().removeClass('hide');
} else {
$(this).nextAll('input').first().addClass('hide').val('');
}
});
HTML:
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Accepted">
<span>Accepted</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="1" />
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Rejected">
<span>Rejected</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="2" />
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Hold">
<span>Hold</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="3" />
CSS:
.hide{
display:none;
}
You could store the previos value in a data attribute and set the value of the input to the value of this data attribute when the checkbox gets checked again.
$(".drilling_specify").click(function() {
var test = $(".drilling_specify").val();
var input = $(this).nextAll('input').first();
if ($(this).is(":checked")) {
input.removeClass('hide');
if (input.attr("data-previous")) {
input.val(input.attr("data-previous"));
}
} else {
input.attr("data-previous", input.val());
input.addClass('hide').val('');
}
});
.hide{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Accepted">
<span>Accepted</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="1" />
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Rejected">
<span>Rejected</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="2" />
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Hold">
<span>Hold</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="3" />
You need to save the value of the field before hiding/clearing its value, and then set its value from the saved variable when displaying it again.
var savedValues = [];
$("input[type='checkbox']").change(function() {
let checked = $(this).is(":checked");
let textVal = $(this).closest('label').next().val();
let id = $(this).attr('id');
if (checked) {
//show it and set the value
let tempVal = '';
if (typeof savedValues[id] !== "undefined") {
tempVal = savedValues[id];
}
$(this).closest('label').next('input[type="text"]').removeClass('hide').val(tempVal);
} else {
//hide it and clear the value
savedValues[id] = textVal;
$(this).closest('label').next('input[type="text"]').addClass('hide').val('');
}
});
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Accepted" id="drilling_accepted">
Accepted</label>
<input type="text" class="hide" name="drilling_accpt_specify" value="1" />
<label>
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Rejected" id="drilling_rejected">
Rejected</label>
<input type="text" class="hide" name="drilling_accpt_specify" value="2" />
<label>
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Hold" id="drilling_hold">
Hold</label>
<input type="text" class="hide" name="drilling_accpt_specify" value="3" />
I have two radio buttons:
yes and
no
When I select 'yes',it should ask "Enter your requirements" and When I select 'no', nothing should happen.
I have tried this:
<form>
<input type="radio" name="question" value="yes">YES
<input type="radio" name="question" value="no">NO
<input type="button" name="submit" value="submit onclick="getValue('question')">
</form>
<script>
function getvalue(question) {
for (var i = 0; i < question.length; i++) {
var button = question[i];
if (button.checked) {
return button;
}
}
print getValue(question)
HTML
<input type="radio" id="radio1" name="radio" value='Yes' /><label for="radio1">Yes</label>
<input type="radio" id="radio2" name="radio" value='No'/><label for="radio2">No</label>
JS
$(function () {
$("input[name='radio']").on("change", function () {
if($("input[name='radio']:checked").val() == "Yes"){
alert("Enter your requirements");
}
});
});
JSFiddle try this
I want to validate a form that have a controlgroup with inputs of type="radio" like this:
<form id="sendMessageFormContainer" action="#">
#Html.ValidationSummary()
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>To:</legend>
<div id="messageToContainer">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" />
<label for="radio-choice-1">foo</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
<label for="radio-choice-2">bar</label>
</div>
</fieldset>
</div>
//...
<input id="sendMsgBtn" name="sendMsgBtnName" type="submit" value="Send" />
</form>
I'm using validate() method to validate the rest of the elements, but I don't know which rule should I use to check that at least one radio button should be selected:
$(document).on("pageshow", function () {
$("#sendMessageFormContainer").validate({
rules: {
//???
},
messages: {
//...
},
submitHandler: function (form) {
alert("Call Send Action");
}
});
});
Solution 1
You need to add at least one class="required" to anyone of your radio inputs, like this:
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" class="required" />
<label for="radio-choice-1">foo</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
<label for="radio-choice-2">bar</label>
Working example: http://jsfiddle.net/Gajotres/a8cJA/
Solution 2
Or you can do it like this:
$(document).on('pagebeforeshow', '#index', function(){
$("#sendMessageFormContainer").validate({
rules : {
"radio-choice-1" : { required : true }
},
messages : {
"radio-choice-1" : "Please select radio button"
},
submitHandler: function (form) {
alert("Call Send Action");
}
});
$(document).on('click', '#sendMsgBtn', function(){
$("#sendMessageFormContainer").validate().form();
});
});
Working example: http://jsfiddle.net/Gajotres/HwQeY/