I have a quick wizard that captures customer selection with both checkboxes and radio buttons (only a single instance on each wizard page so only radio or checkboxes)
I'm trying to capture only the selected radio and checkboxes
form.addEventListener("submit", (e) => {
e.preventDefault();
const inputs = [];
form.querySelectorAll("input").forEach((input) => {
const { name, value, status } = input;
inputs.push({ name, value });
});
console.log(inputs);
form.reset();
});
here is the HTML with the 3 step wizard
<section>
<div class="container">
<form>
<div class="step step-1 active">
<h2>How to serve?</h2>
<div class="form-group">
<input type="radio" id="forhere" name="where" value="forhere"
checked>
<label for="forhere">For Here</label>
</div>
<div class="form-group">
<input type="radio" id="togo" name="where" value="togo">
<label for="togo">To Go</label>
</div>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-2">
<h2>Size?</h2>
<div class="form-group">
<input type="radio" id="small" name="size" value="small"
checked>
<label for="small">Small</label>
</div>
<div class="form-group">
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Medium + 0.49c</label>
</div>
<div class="form-group">
<input type="radio" id="large" name="size" value="large">
<label for="large">Large + 0.99c</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-3">
<p>Anything Else:</p>
<div class="form-group">
<input type="checkbox" id="extrahot" name="extrahot" checked>
<label for="extrahot">Extra Hot</label>
</div>
<div class="form-group">
<input type="checkbox" id="doubleshot" name="doubleshot">
<label for="doubleshot">Double Shot + $0.49c</label>
</div>
<div class="form-group">
<input type="checkbox" id="whipped" name="whipped">
<label for="whipped">Whipped Cream</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="submit" class="submit-btn">Add To Order</button>
</div>
</form>
</div>
</section>
I'm not set on this as I'm going to be adding this as a popup that I currently use only with a single selection option but need the checkboxes
Thank you
Return just the checked items.
form.querySelectorAll("input:checked")
const elements = form.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked');
Related
I am struggling to enter the form if the the div is not loaded, What I am trying is if the option "Grade B or Less" is selected then form should be able to submit and if "Grade A" is selected then next div to be loaded and then form to be submitted,
Here is my php form
<div class="box box-primary">
<?php if (isset($_POST['status'])) { ?>
<div id="file_updated_box">
<div class="alert alert-info alert-dismissible file_updated">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<h4><i class="icon fa fa-check"></i><?php echo $_POST['status']; ?></h4>
</div>
</div>
<?php } ?>
<div class="box-header with-border">
<h3 class="box-title">Enter IMEI</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form method="post" action="sonim_harvesting.php">
<div class="box-body">
<div class="row">
<div class="form-group col-md-6">
<label for="imeinum">Job IMEI</label>
<input class="form-control" autofocus autocomplete="off" id="imeinum" name="imeinum" value="<?php if (isset($_POST['imeinum'])) {
echo $_POST['imeinum'];
} ?>" name="imeinum" placeholder="Enter IMEI" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label">Device Power ON:</label>
<div>
<div class="radio">
<label>
<input name="device_power" value="YES" type="radio" class="radio" required>
YES
</label>
</div>
<div class="radio">
<label>
<input name="device_power" value="NO" required type="radio" class="radio">
NO
</label>
</div>
</div>
</div>
<div class="form-group grade">
<label class="control-label">Device Grade:</label>
<div>
<div class="radio">
<label>
<input name="device_grade" id="GradeA" value="A" type="radio" class="radio" required>
Grade A
</label>
</div>
<div class="radio">
<label>
<input name="device_grade" value="B or Less" required type="radio" class="radio">
Grade B or Less
</label>
</div>
</div>
</div>
<div class="form-group function" style="display:none">
<label class="control-label">Is Display Functional? :</label>
<div>
<div class="radio">
<label>
<input name="function" value="YES" type="radio" class="radio" required>
YES
</label>
</div>
<div class="radio">
<label>
<input name="function" value="NO" required type="radio" class="radio">
NO
</label>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<input type="submit" class="btn btn-primary" name="jbSubmit" value="Submit" />
</div>
</form>
</div>
and here is my js code
$(document).ready(function() {
$('.grade').hide()
$('.function').hide()
$('input[type="radio"]').click(function() {
$('.grade').show();
});
$('.grade').click(function() {
if ($('#GradeA').is(":checked")) {
$('.function').show()
} else {
}
})
});
I am able to do it with Grade A but If Grade B is selected I am not able to submit the form, Please advice
This is because your radio input with name="function" has the required attribute set. Despite not being visible, the form is still expecting this field to be completed.
The simplest solution here would be to either remove the required attribute or consider setting one of the options as checked by default.
The code below works fine without the use of the FORM tag.
But after I add the FORM tag, the code does not work anymore.
My code:
function ismcstop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcstop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcstop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>
Just rename ismcstop() function name like below
function ismcsfortop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>
Change the name of the label to something else other than ismcstop. I think it is overridden the function.
<label for="ismcstopLabel">Machine Stop?</label>
OR
Change the function name ismcstop() to ismcstopFunc()
I'm trying to make a multiple select radio but the output to the console is console=on.
That doesnt help at all. I need to know which (none,t,i or ti) that is selected.
Any idea how to do this?
$('#btnSubmit').click(function() {
var data = $('#containerCreationForm').serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="containerCreationForm" method="post">
<div class="content-form">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio">
<label for="it">Interactive & TTY
<span class="text-blue">(-i -t)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio">
<label for="tty">TTY
<span class="text-blue">(-t)</span>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio">
<label for="interactive">Interactive
<span class="text-blue">(-i)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked="">
<label for="none">None</label>
</div>
</div>
</div>
<button type="button" id="#btnSubmit">Submit</button>
</div>
Add value attribute in radio button.
Example:
Since,you are using Jquery in your code. I'm using it here:
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
In HTML:
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<p><input type="button" value="Radio Value"></p>
Hope it helps..!
You need to use names and values to identify what your radios mean
eg
$(function() {
$("form").submit(
function(args) {
args.preventDefault();
console.log($(this).serialize());
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Gender:</legend>
Male: <input type="radio" name=gender value=m> Female: <input type="radio" name=gender value=f> Other <input type="radio" name=gender value=o>
</fieldset>
<input type=submit>
</form>
this will result in a form value of gender= m | f | o
also note you should be using the forms submit event as this will invoke the forms validation logic which your current code is bypassing
I swear I tried a lot before asking you guys, but I just can't make it work properly. I have a radio and a checkbox area as it follows:
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I want to sum the user's choices and display it as texts and numbers. The selected radio will be displayed as text inside #resultPlan and it's value inside #sumPlan. The selected checkbox(es) will be displayed as text inside #resultOption and it's value inside #sumOption. If the user checks both boxes, #resultOption will have a comma separating each option and #sumOption will be the sum of both values. Finally, the label #sumTotal will get all the values selected, summed and displayed as a number.
I hope you guys got what I'm trying to do. I hope to find a solution that works with IE, so JS or Jquery.
UPDATE 1:
The code I created (but with no success) was based on each possible case of the use'r choice. That was the basic structure:
$("input[name=linePlan]").on('change',function(){
var linePlan = $('input[name=linePlan]:checked');
if ($(linePlan).is(':checked') && $(this).val() == '100000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 1")
$('#sumPlan').text('100000～')
$('#totalLine').text((Math.round(100000 * 1.08)) + '～') //1.08 is a tax fee
} else if ($(linePlan).is(':checked') && $(this).val() == '126000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 2")
$('#sumPlan').text('126000～')
$('#sumTotal').text((Math.round(126000 * 1.08)) + '～')
}
});
Of course that's not the full code, but that is pretty much what I tried.
Thank you for all the help!
I just created a code for your question. If you need the taxes, just add conditional statements below. Hope this helps.
Check this code :
$("input[name=linePlan],input[type=checkbox]").on('change', function() {
var planvalue = parseInt($('input[name=linePlan]:checked').val());
var plantext = $('input[name=linePlan]:checked').parent().text();
var optionsvalue = 0;
var options = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
optionsvalue += parseInt($(this).val());
options.push($(this).parent().text());
}
});
var optionstext = options.join(',');
$('#resultPlan').text(plantext);
$('#sumPlan').text(planvalue);
$('#resultOption').text(optionstext);
$('#sumOption').text(optionsvalue);
if (optionsvalue == 0)
$('#resultOption').text("No Options");
$('#sumTotal').text(planvalue + optionsvalue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I am trying to change the radio button that is checked by default and I cannot access the html to do so, but I can use javascript. Here is the html
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>
Filter By Course Availability
</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">
Search scheduled courses
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">
Search all courses
</label>
</div>
</fieldset>
</div>
</div>
I want to make the searchAvailable the default and here is the javascript that I'm using and it doesn't seem to work. I'm new to this so be nice lol.
var sel = document.getElementById('searchAvailable');
sel.searchALL.removeAttribute('checked');
sel.searchAvailable.setAttribute('checked', 'checked');
document.forms[0].reset();
Just these two lines should be enough:
var sel = document.getElementById('searchAvailable');
sel.checked = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>Filter By Course Availability</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">Search scheduled courses</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">Search all courses</label>
</div>
</fieldset>
</div>
</div>