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
Related
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');
I have created multiple checkbox with different names as seen in the code snippet and will like to get the values of each of them i.e if the user clicks on a checkbox the value 1 is stored and 0 if not clicked but I keep getting only the 0 value for all of them. It doesn't seem to be reading if I click it or not. I have tried various answers I have seen online and on this platform but to no avail.
My code snippet is:
<div class="col-xs-6 col-sm-4 border-pdf-td">
<div class="checkbox">
<label for="telecommunication">
<input name="telecommunication" type="hidden" value="0" />
<input type="checkbox" value="1" name="telecommunication" />
Telecommunication
</label>
</div>
</div>
<div class="col-xs-6 col-sm-5 border-pdf-td">
<div class="checkbox">
<label for="grocery">
<input name="grocery" type="hidden" value="0" />
<input type="checkbox" value="1" name="grocery" />
Grocery and Supermarkets
</label>
</div>
</div>
<div class="col-xs-6 col-sm-3 border-pdf-d">
<div class="checkbox">
<label for="petroleum">
<input name="petroleum" type="hidden" value="0" />
<input type="checkbox" value="1" name="petroleum" />
Petroleum
</label>
</div>
</div>
<div class="col-xs-12 col-sm-4 border-pdf-d">
<div class="checkbox">
<label for="ecommerce">
<input name="ecommerce" type="hidden" value="0" />
<input type="checkbox" value="1" name="ecommerce" />
E-Commerce
</label>
</div>
</div>
<div class="col-xs-12 col-sm-5 border-pdf-d">
<div class="checkbox">
<label for="mailorder">
<input name="mailorder" type="hidden" value="0" />
<input type="checkbox" value="1" name="mailorder" />
Mail order/telephone order (MOTO)
</label>
</div>
</div>
The current state of my JavaScript code to get the values is
var telecommunication = document.getElementsByName("telecommunication")[0].value;
var grocery = document.getElementsByName("grocery")[0].value;
var petroleum = document.getElementsByName("petroleum")[0].value;
var ecommerce = document.getElementsByName("ecommerce")[0].value;
var mailorder = document.getElementsByName("mailorder")[0].value;
I previously tried the code below but keep getting same results.
var telecommunication = document.querySelector('input[name="telecommunication"]:checked').value;
var grocery = document.querySelector('input[name="grocery"]:checked').value;
var petroleum = document.querySelector('input[name="petroleum"]:checked').value;
var ecommerce = document.querySelector('input[name="ecommerce"]:checked').value;
var mailorder = document.querySelector('input[name="mailorder"]:checked').value;
Please note that I have these checkbox and more on same form to get their values by their unique name.
I think you don't need this
<input name="telecommunication" type="hidden" value="0" />
So grab the value
var telecommunication = document.querySelector('input[name="telecommunication"]:checked') ? 1 : 0;
I think you are using a bad pattern of design for your form. If you want to send a 1 or a 0 then you should use radio buttons instead of checkboxes.
Checkboxes (and radios) are designed to be included in a request only when they are checked.
You can use a FormData object to get all the values from the form.
const form = document.querySelector('form');
form.addEventListener('change', event => {
const formData = new FormData(form);
for (const [ name, value ] of formData) {
console.log(`${name}:`, value);
}
});
.as-console-wrapper {
max-height: 100px !important;
}
<form>
<div class="form-group">
<h4>Telecommunication</h4>
<label>
Yes
<input type="radio" value="1" name="telecommunication" checked />
</label>
<label>
No
<input type="radio" value="0" name="telecommunication" />
</label>
</div>
<div class="form-group">
<h4>Grocery and Supermarkets</h4>
<label>
Yes
<input type="radio" value="1" name="grocery" checked />
</label>
<label>
No
<input type="radio" value="0" name="grocery" />
</label>
</div>
<div class="form-group">
<h4>Petroleum</h4>
<label>
Yes
<input type="radio" value="1" name="petroleum" checked />
</label>
<label>
No
<input type="radio" value="0" name="petroleum" />
</label>
</div>
<div class="form-group">
<h4>E-Commerce</h4>
<label>
Yes
<input type="radio" value="1" name="ecommerce" checked />
</label>
<label>
No
<input type="radio" value="0" name="ecommerce" />
</label>
</div>
<div class="form-group">
<h4>Mail order/telephone order (MOTO)</h4>
<label>
Yes
<input type="radio" value="1" name="mailorder" checked />
</label>
<label>
No
<input type="radio" value="0" name="mailorder" />
</label>
</div>
</form>
So I have run into a little problem. I am making a Contact Form that changes according to the Users needs.
This is my html code. My goal is to First, Hide most of the Content with the first set of raio buttons. I actually managed to get that with this Javascript:
$(function() {
$('#report').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
} else {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
}
})
$('#booking').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
} else {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
}
})
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$('#privateprices').hide();
$('#companyprices').hide();
} else {
$('#privateprices').show();
$('#companyprices').show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="main" class="ui-content" align="center">
<div class="ui-content-spacer">
<h3 class="ui-bar ui-bar-a ui-corner-all ui-content-spacer">
Booking Form
</h3>
<div class="ui-body ui-body-a ui-corner-all ui-content-spacer">
<form method="post" action="">
<div class="form-field-contain">
<fieldset data-role="controlgroup">
<legend>While the page is still under developement please define your inquiry: </legend>
<input type="radio" name="settings" id="report" value="report">
<label for="report">Bug Report</label>
<input type="radio" name="settings" id="booking" value="booking" checked="checked">
<label for="booking">Booking</label>
</fieldset>
</div>
<div class="form-field-contain ui-field-contain">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="" placeholder="First Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" value="" placeholder="Last Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="email">E-Mail</label>
<input type="email" name="email" id="email" value="" placeholder="E-Mail...">
</div>
<div class="form-field-contain ui-field-contain" id="phonenumber">
<label for="tel">Phone:</label>
<input type="tel" name="tel" id="tel" value="" placeholder="Phone #...">
</div>
<div class="form-field-contain ui-field-contain" id="dateofplay">
<label for="date">Date of event:</label>
<input type="date" name="date" id="date" value="" placeholder="Please choose a Date">
</div>
<div class="form-field-contain ui-field-contain">
<label for="message">Write a quick Message:</label>
<textarea cols="40" rows="8" name="message" id="message" placeholder="Your Message here..."></textarea>
</div>
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="studentprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="studentprice" id="studentminimal" value="studentminimal" checked="checked">Minimal</label>
<label><input type="radio" name="studentprice" id="studentsoundonly" value="studentsoundonly">Sound Only</label>
<label><input type="radio" name="studentprice" id="studentsoundandlight" value="studentsoundandlight">Sound and Light</label>
<label><input type="radio" name="studentprice" id="studentpartypackage" value="studentpartypackage">Total Party Package</label>
<label><input type="radio" name="studentprice" id="studentcustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="privateprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="privateprice" id="minimal" value="150" checked="checked">Minimal</label>
<label><input type="radio" name="privateprice" id="soundonly" value="200">Sound Only</label>
<label><input type="radio" name="privateprice" id="soundandlight" value="300">Sound and Light</label>
<label><input type="radio" name="privateprice" id="partypackage" value="400">Total Party Package</label>
<label><input type="radio" name="privateprice" id="custom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="companyprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="companyprice" id="companyminimal" value="200" checked="checked">Minimal</label>
<label><input type="radio" name="companyprice" id="companysoundonly" value="300">Sound Only</label>
<label><input type="radio" name="companyprice" id="companysoundandlight" value="400">Sound and Light</label>
<label><input type="radio" name="companyprice" id="companypartypackage" value="500">Total Party Package</label>
<label><input type="radio" name="companyprice" id="companycustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="customsetup">
<fieldset data-role="controlgroup" id="customsetup">
<legend>Custom choices:</legend>
<label><input type="checkbox" name="speakers" id="speakers" value="">Speakers</label>
<label><input type="checkbox" name="subwoofer" id="subwoofer" value="">Subwoofer</label>
<label><input type="checkbox" name="lighting" id="lighting" value="">Lighting</label>
<label><input type="checkbox" name="strobe" id="strobe" value="">Strobelight</label>
<label><input type="checkbox" name="fog" id="fog" value="">Fogmachine</label>
<label><input type="checkbox" name="table" id="table" value="">Table</label>
</fieldset>
</div>
<div class="form-field-contain">
<input type="submit" name="submit" value="Submit" data-inline="true">
<input type="reset" name="reset" value="Reset" data-inline="true">
</div>
</form>
</div>
</div>
</div>
I think the problem is that, because the first show/hide function is hiding/showing the ID's it overrides any following function. I can't wrap my head around how I can continue the code so the radio buttons that are not required are hidden.
So if,
#student is selected, #privateprices and #companyprices choices are hidden
#private is selected, #studentprices and #companyprices choices are hidden
#company is selected, #studentprices and #privateprices choices are hidden
Is it even possible or is there a easier more effective method of achieving this? Especially when I start creating the php for the form? Thanks in advance
EDIT: The last piece of code in the Javascript is my attempt hide the first set of radiobuttons.
You can check which radio button is selected in page loading and show / hide the panels. Please see working fiddle here:
https://jsfiddle.net/ranjitsachin/Leav016c/2/
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$("#studentprices").show();
$('#privateprices, #companyprices').hide();
}
});
$('#private').on('click', function() {
if ($(this).is(':checked')) {
$("#privateprices").show();
$('#studentprices, #companyprices').hide();
}
});
$('#company').on('click', function() {
if ($(this).is(':checked')) {
$("#companyprices").show();
$('#studentprices, #privateprices').hide();
}
});
Here is a working pen on how I would do it. http://codepen.io/anon/pen/jBryOa
In this pen, i added the classes of report-group and booking-group to the respective divs, added a class of hide-group to the css with a setting of display: none; and then add and remove the class hide-group based on which radio button is checked. I also added the class hide-group in the html to the div's that need to be initially hidden.
I did not add the groups to every div. just enough to show you what you need to do.
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 have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item1" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item2" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item3" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item4" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:
<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/>
Notice how these both have a name of "item"?
Once you've done that, you can use jQuery like this:
$('[name="item"]').on('change', function() {
$('[name="itemValue"]').val($(this).val());
});
JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)
$("input[type=radio]").change(function () {
if ($(this).prop(":checked")) {
$('#yourId').val($(this).val())
}
});
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
JQuery>
$(function(){
$("input[name='item']").change(function(){
$("input[name='itemValue']").val($(this).val());
alert($("input[name='itemValue']").val());
});
});
$('input:radio').change(function () {
if (this.checked) {
$('#hidfld').val($(this).val()));
}
});