I'm working on a form on a bespoke website (it's abit like a CMS just to explain the formatting of the HTML below so alot of it isn't relevant) and one of the things I've been requested to implement is to count how many of the checkboxes on the form have been ticked.
I've got checkbox1, checkbox2 and checkbox3 and a field called numberticked which I'm going to hide when it gets submitted (which I know how to do).
If the user ticked checkbox1 it would write 1 to that numberticked field, if they ticked all 3 it would write 3 to that field and so on and so on (I'll be adding more checkboxes but I thought I'd start with 3 to test.)
I've had a read on the site but I'm not sure how to start on this one since it's a bespoke site, but it uses labels and ids and the form does work with Javascript so I'm hoping there's a general way to write a script to do it!
<div class="seq-box-form-field editorcheckbox1 ">
<label for="checkbox1">
<span style="padding-right: 10px; vertical-align: 1px;">Checkbox 1</span>
<input type="checkbox" name="checkboxcheckbox1" id="checkboxcheckbox1" />
<input type="hidden" name="checkbox1" id="checkbox1" value="false" />
</label>
<script>
$(document).ready(function() {
$('#checkboxcheckbox1').click(function() {
if ($('#checkboxcheckbox1').val() == 'true') {
$('#checkbox1').val('false');
$('#checkboxcheckbox1').val('false');
$('#checkboxcheckbox1').prop('checked', false);
$('#aspire_previewrefresh').trigger('click');
} else {
$('#checkbox1').val('true');
$('#checkboxcheckbox1').val('true');
$('#checkboxcheckbox1').prop('checked', true);
$('#aspire_previewrefresh').trigger('click');
};
});
});
</script>
</div>
<div class="seq-box-form-field editorcheckbox2 ">
<label for="checkbox2">
<span style="padding-right: 10px; vertical-align: 1px;">Checkbox 2</span>
<input type="checkbox" name="checkboxcheckbox2" id="checkboxcheckbox2" />
<input type="hidden" name="checkbox2" id="checkbox2" value="false" />
</label>
<script>
$(document).ready(function() {
$('#checkboxcheckbox2').click(function() {
if ($('#checkboxcheckbox2').val() == 'true') {
$('#checkbox2').val('false');
$('#checkboxcheckbox2').val('false');
$('#checkboxcheckbox2').prop('checked', false);
$('#aspire_previewrefresh').trigger('click');
} else {
$('#checkbox2').val('true');
$('#checkboxcheckbox2').val('true');
$('#checkboxcheckbox2').prop('checked', true);
$('#aspire_previewrefresh').trigger('click');
};
});
});
</script>
</div>
<div class="seq-box-form-field editorcheckbox3 ">
<label for="checkbox3">
<span style="padding-right: 10px; vertical-align: 1px;">Checkbox 3</span>
<input type="checkbox" name="checkboxcheckbox3" id="checkboxcheckbox3" />
<input type="hidden" name="checkbox3" id="checkbox3" value="false" />
</label>
<script>
$(document).ready(function() {
$('#checkboxcheckbox3').click(function() {
if ($('#checkboxcheckbox3').val() == 'true') {
$('#checkbox3').val('false');
$('#checkboxcheckbox3').val('false');
$('#checkboxcheckbox3').prop('checked', false);
$('#aspire_previewrefresh').trigger('click');
} else {
$('#checkbox3').val('true');
$('#checkboxcheckbox3').val('true');
$('#checkboxcheckbox3').prop('checked', true);
$('#aspire_previewrefresh').trigger('click');
};
});
});
</script>
</div>
<div class="seq-box-form-field editornumberticked ">
<label for="numberticked">Number Ticked</label>
<input id="numberticked" name="numberticked" placeholder="" type="text" onkeydown="if (event.keyCode == 13) { event.preventDefault(); return false; }" value="" />
Here is an example of how to keep a text/hidden field's value updated to match the number of checkboxes currently checked.
$(() => {
$('input:checkbox').change(() => {
$('#count').val($('input:checkbox:checked').length);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="checkbox" /> A<br/>
<input type="checkbox" /> B<br/>
<input type="checkbox" /> C<br/>
<input type="text" id="count" value="0" />
</body>
</html>
Related
I am generating a form with multiple choice questions using php , Now I want to check if each and every question has been answered or not by checking if radio buttons for each question are clicked.
<div class="opt">
<div class="row1">
<label class="label">{{ $question->question }}</label>
</div>
<div class="ans">
$answer=$answers[$question->id]
#foreach ($answer as $answer)
<label class="btn btn-default no-margin-rule" >
<input type="radio" name="{{$count+1}}" value="{{$answer->id}}" id="ans{{$answer->answer}}" />
<span class="option{{$answer->answer+1}}"></span>
</label>
#endforeach
</div>
</div>
$("#sub").click(function() {
var check = true;
$("input:radio").each(function() {
var name = $(this).attr('name');
if ($("input:radio[name=" + name + "]:checked").length) {
check = true;
} else {
check = false;
}
});
if (check) {
$("#form1").submit();
} else {
swal("Oops!", "Please select at least one answer in each question.", "error")
}
});
Assuming that there are multiple questions, as you state in the comments under the question, then all you need to check the total number of .ans elements matches the number of .ans elements which contain a checked radio, like this:
$("#sub").click(function() {
var $answers = $('.ans');
var valid = $answers.length == $answers.filter(':has(:radio:checked)').length;
if (valid ) {
$("#form1").submit();
} else {
swal("Oops!", "Please select at least one answer in each question.", "error")
}
});
As a side note I would suggest you do perform this check under the submit event of the form element, instead of the click of a button, for accessibility reasons.
This is - as always - very easy to achieve using standard vanilla Javascript. No jQuery necessary.
document.forms[0].addEventListener('submit', (event) => {
const check = [...document.forms[0].querySelectorAll('fieldset')].every(fieldset => !!fieldset.querySelector('input:checked'));
console.log(`${check ? 'A' : 'Not a'}ll questions have been answered!`);
// for demo purposes, prevent the submit regardless
event.preventDefault();
// in your code, you'd do the check
// if (!check) event.preventDefault();
})
form { display: flex; }
<form id="questions">
<fieldset>
<legend>What is 1+1?</legend>
<input type="radio" name="addition" id="addition1" value="3" />
<label for="addition1">3</label>
<br />
<input type="radio" name="addition" id="addition2" value="1" />
<label for="addition2">1</label>
<br />
<input type="radio" name="addition" id="addition3" value="2" />
<label for="addition3">2</label>
<br />
</fieldset>
<fieldset>
<legend>What is 1*1?</legend>
<input type="radio" name="multiplication" id="multiplication1" value="3" />
<label for="multiplication1">3</label>
<br />
<input type="radio" name="multiplication" id="multiplication2" value="1" />
<label for="multiplication2">1</label>
<br />
<input type="radio" name="multiplication" id="multiplication3" value="2" />
<label for="multiplication3">2</label>
<br />
</fieldset>
<fieldset>
<legend>What is 1-1?</legend>
<input type="radio" name="subtraction" id="subtraction1" value="-1" />
<label for="subtraction1">-1</label>
<br />
<input type="radio" name="subtraction" id="subtraction2" value="0" />
<label for="subtraction2">0</label>
<br />
<input type="radio" name="subtraction" id="subtraction3" value="1" />
<label for="subtraction3">1</label>
<br />
</fieldset>
<button type="submit">Submit</button>
</form>
I am trying to disable a input field of return date when the travel type is one way. when I checked the radio button for one way the return date is still enabled. Please help me what i am missing here.
Thanks in advance.
<label>
<input type="radio" name="travel_type"value=""class="with-gap"
id="one_way">
<span style="color:white;">One Way</span>
</label>
<label>
<input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
<span style="color: white;">Round Trip</span>
</label>
var button = document.getElementById('one_way');
if (document.getElementById('one_way').checked) {
document.getElementById('datepicker1').disabled = true;
}
Try this. It should must work! Use jQuery click event instead of Javascript
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" class="form-control" id="datepicker1" />
<label>
<input type="radio" name="travel_type" value="1"class="with-gap travel_type"
id="one_way">
<span style="color:red;">One Way</span>
</label>
<label>
<input type="radio" name="travel_type" value="2"class="with-gap travel_type"id="round_trip">
<span style="color: red;">Round Trip</span>
</label>
</body>
</html>
<script>
$(".travel_type").click(function(){
if($(this).val() == 1)
{
$("#datepicker1").prop('disabled', true);
}else{
$("#datepicker1").prop('disabled', false);
}
});
</script>
If you will use jQuery , it will be easy. I created this example using Jquery. Hope this will help you.
$("input[name='travel_type']").click(function(){
if($(this).is(':checked') && $(this).val()=='1'){
$('#datepicker1').attr('disabled','disabled');
}else{
$('#datepicker1').removeAttr('disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> One Way
<input type="radio" name="travel_type" value="1" class="with-gap" ></label>
<label>Round Trip
<input type="radio" name="travel_type" value="2" class="with-gap" ></label>
<p><label>Date Picker <input type="date" name="datepicker" id="datepicker1"></label></p>
You have to bind events to radio buttons, Here is your working code,
var button = document.getElementById('one_way');
var button2 = document.getElementById('round_trip');
button.addEventListener('change', function() {
if (document.getElementById('one_way').checked) {
document.getElementById('datepicker1').disabled = true;
}
})
button2.addEventListener('change', function() {
if (!document.getElementById('one_way').checked) {
document.getElementById('datepicker1').disabled = false;
}
})
You can also check it on JSFiddle Code
I think you forgot to call the "function" when radio button clicked.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label>
<input type="radio" name="travel_type"value=""class="with-gap"
id="one_way" onclick="functionRadioChecked();">
<span style="color:red;">One Way</span>
</label>
<label>
<input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
<span style="color: red;">Round Trip</span>
</label>
<br><br><br>
<input type="date" id="datepicker1">
<script>
function functionRadioChecked() {
var button = document.getElementById('one_way');
if (document.getElementById('one_way').checked) {
document.getElementById('datepicker1').disabled = true;
}
}
</script>
</body>
</html>
Try out this code block where with self executing function on document load
<html>
<label>
<input type="radio" name="travel_type"value=""class="with-gap"
id="one_way">
<span style="color:black;">One Way</span>
</label>
<label>
<input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
<span style="color: black;">Round Trip</span>
</label>
<script>
(function() {
var button1 = document.getElementById('one_way');
button1.onclick = function()
{
document.getElementById('datepicker1').disabled = true;
}
var button2 = document.getElementById('round_trip');
button2.onclick = function()
{
document.getElementById('datepicker1').disabled = false;
}
})();
</script>
</html>
You could also assign a separate function to the radio button onclick
But depending your submitted code I would recommend the above code
Good Luck
I am trying to display 2 different div when the user answer 3 questions.
All questions have Yes and No answers which is shown by radio buttons.
I want to show div2 when 3 NO are given by the users. If ONLY ONE of the answers is Yes then the div1 must be shown.
this is the code:
<script type="text/javascript">
function display(e){
if(e.value == "yes"){
document.getElementById("hidediv1").style.display='block';
document.getElementById("hidediv2").style.display='none';
}
else if(e.value =="no"){
document.getElementById("hidediv2").style.display='block';
document.getElementById("hidediv1").style.display='none';
}
}
</script>
<form id="stu01" action="#" method="post">
<p>1. Q1?<br>
<input type="radio" name="sq01" value="yes" onclick="display(this)">Yes
<input type="radio" name="sq01" value="no" onclick="display(this)">No
</p>
<p>2. Q2?<br>
<input type="radio" name="sq02" value="yes" onclick="display(this)">Yes
<input type="radio" name="sq02" value="no" onclick="display(this)">No
</p>
<p>3. Q3?<br>
<input type="radio" name="sq03" value="yes" onclick="display(this)">Yes
<input type="radio" name="sq03" value="no" onclick="display(this)">No
</p>
<div id="hidediv1" style="display:none">
</div>
<div id="hidediv2" style="display:none">
</div>
</form>
I hope that i understand ur request right..
JSFIDDLE DEMO
$('input[type="radio"]').click(function () {
var checkedNo = $('input[type="radio"]').filter(function () {
return $(this).is(":checked") && $(this).val() === "no";
});
if (checkedNo.length === 3) {
$('#hidediv1').show();
$('#hidediv2').hide();
} else {
$('#hidediv2').show();
$('#hidediv1').hide();
}
});
Full version:
<!DOCTYPE html>
<html>
<head>
<title>Form Radio Button</title>
</head>
<body>
<form id="stu01" action="#" method="post">
<p>1. Q1?<br>
<input type="radio" name="sq01" value="yes">Yes
<input type="radio" name="sq01" value="no">No
</p>
<p>2. Q2?<br>
<input type="radio" name="sq02" value="yes">Yes
<input type="radio" name="sq02" value="no">No
</p>
<p>3. Q3?<br>
<input type="radio" name="sq03" value="yes">Yes
<input type="radio" name="sq03" value="no">No
</p>
<div id="hidediv1" style="display:none">
No!
</div>
<div id="hidediv2" style="display:none">
Yes!
</div>
</form>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b‌​8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('input[type="radio"]').click(function () {
var checkedNo = $('input[type="radio"]').filter(function () {
return $(this).is(":checked") && $(this).val() === "no";
});
if (checkedNo.length === 3) {
$('#hidediv1').show();
$('#hidediv2').hide();
} else {
$('#hidediv2').show();
$('#hidediv1').hide();
}
});
</script>
</body>
</html>
Use onChange event listener, update a variable status, check when it is 3, append your div
I have a problem when using checkbox with JQuery. I want to show the button when user check only in draft_checkbox. I try with draft checkbox click. But, it can only show/hide in draft checkbox. When I click other checkbox, it still showing. I just want to show button when user check on draft checkbox only. If user check both, I want to hide.
Here my script,
<script type="text/javascript">
$(document).ready(function() {
$('#draft').click(function () {
if($("#draft").is(':checked')){
$('#btnApprovepo').css('visibility','visible');
}else{
$('#btnApprovepo').css('visibility','hidden');
}
});
});
</script>
<div id="status_div">
<input type="checkbox" class="po_status" name="status" id="draft" value="d" checked="checked"/> Draft<br />
<input type="checkbox" class="po_status" name="status" id="pending" value="n" /> Pending <br />
<input type="checkbox" class="po_status" name="status" id="submit" value="s" /> Submitted <br />
<input type="checkbox" class="po_status" name="status" id="pAck" value="c" /> Partial Ack <br />
<input type="checkbox" class="po_status" name="status" id="ack" value="a" /> Acknowledged <br />
<input type="checkbox" class="po_status" name="status" id="partial" value="p" /> Partial Delivered <br />
<input type="checkbox" class="po_status" name="status" id="delivered" value="e" /> Delivered <br />
<input type="checkbox" class="po_status" name="status" id="void" value="v" /> Void <br />
<input type="checkbox" class="po_status" name="status" id="reject" value="r" /> Reject <br />
</div>
Here my button,
<input type='button' value='Button' name='Button' id='btnApprovepo' />
fiddle:
http://jsfiddle.net/XqXL9/2/
$('.po_status').click(function () {
if($(".po_status:checked").length === 1 && $("#draft").is(":checked") == true){
$('#btnApprovepo').show();
} else {
$('#btnApprovepo').hide();
}
});
some best pratices:
use triple === for exact comparison.
use classes if we have it, instead of the tags for matching.
visibility just makes it invisible but occupies the space. Is that what you need?.
enclose code between braces even if it is a single line code
Try this,
Here is the jsfiddle http://jsfiddle.net/iamrmin/zCkKc/
$(document).ready(function() {
$('#status_div input[type=checkbox]').click(function () {
if($("#status_div :checked").length == 1 && $("#draft").is(":checked") == true)
$('#btnApprovepo').show();
else
$('#btnApprovepo').hide()
});
});
I dont know why have used visibility css. may be for requirement. but i recommend you to use .show() and .hide() to toggle visibility.
I think you can do it this way...
Here is the FIDDLE
<script type="text/javascript">
$(document).ready(function(){
$("#draft").click(function(){
if($(this).is(':checked')){
$('#btnApprovepo').css("visibility","visible");
}
else
{
$('#btnApprovepo').css("visibility","hidden");
}
});
});
</script>
I was trying to change text displayed inside button depending on the radio button being checked.
My code is :
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$("input[type=radio]").click(function(){
if(document.getElementById('segment1').checked) {
alert('Yes');
document.getElementById('sendbutton').value="Proceed";
}
else if(document.getElementById('segment2').checked) {
alert('No');
document.getElementById('sendbutton').value="No";
}
});
</script>
</head>
<body>
<form action="composemail" enctype= "multipart/form-data" method="post" name="f1">
<input type="text" placeholder="Email TO" name="mailreciever">
<input type="text" placeholder="Email SUBJECT" name="mailsubject">
<textarea placeholder="Message" name="messagearea"></textarea>
<input type="file" name="uploadfile" id="uploadfile"/>
<input type="radio" 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" 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"/>
</form>
</body>
</html>
I eidted my code as per answers But It still not working.Please help
Try .value rather than .text
if(document.getElementById('segment1').checked) {
alert('Yes');
document.getElementById('sendbutton').value="Proceed";
}
else if(document.getElementById('segment2').checked) {
alert('No');
document.getElementById('sendbutton').value="No";
}
If you're going to use jQuery, then use jQuery:
$("input[type=radio]").click(function () {
$('#sendbutton').val(($('input[name="radio-view"]:checked').val() == 'Yes') ? 'Proceed' : 'No');
});
jsFiddle example