We Keep Coding

HTML/ JavaScript radio button selections to output as summary of options

I'm trying to build a form that saves all of your selections of radio buttons and outputs as a summary upon submission. I am fairly new to JavaScript so please bear with me.
You are supposed to select between, let's say, three options per section. Depending on what was previously selected after you press Submit, it will open a lightbox and give you a summary of your choices before you submit the choices to be sent via email.
For what I have right now, there is only one section and three options to choose from.
HTML:
<div id="options">
<form method="get">
<label class ="rad">
<input type="radio" name ="O1" value="small"/>
<img src="img.jpg">
</label>
<label class ="rad">
<input type="radio" name ="O2" value="small"/>
<img src="img.jpg">
</label>
<label class ="rad">
<input type="radio" name ="O3" value="small"/>
<img src="img.jpg">
</label>
<input type="submit" value="SUBMIT"/>
</form>
</div>
JavaScript:
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_O1_radio = $('input:radio[name=O1]:checked').val();
var checked_O2_radio = $('input:radio[name=O2]:checked').val();
var checked_O3_radio = $('input:radio[name=O3]:checked').val();
if(checked_O1_radio===undefined || checked_O2_radio===undefined || checked_O3_radio===undefined)
{
alert('Please select a leather option then continue.');
}else{
alert('You Chose "' +checked_O1_radio);
}else{
alert('You Chose "' +checked_O2_radio);
}else{
alert('You Chose "' +checked_O3_radio);
}
});
});

Try this if i under stand your question correctly:
you can use same name then automatically only one will be selected and find the selected leather with a single check.
<label class ="rad">
<input type="radio" name ="O1" value="small"/>
</label>
<label class ="rad">
<input type="radio" name ="O1" value="medium"/>
</label>
<label class ="rad">
<input type="radio" name ="O1" value="large"/>
</label>
<input type="submit" value="SUBMIT" id = "Submitbutton"/>
$(document).ready(function() {
$("#Submitbutton").click(function (){
console.log($('input:radio[name=O1]:checked').val());
})
});
Please mark it as to answer if it helps you.

Custom Credit Card number lengths

I'm working on a pizza website for school.
Here's the question I need to answer.
*Allow users to choose from three types of credit card: Visa, MasterCard and American  Express. Based on the type of credit card, limit the length of the credit card number, 16  digits for Visa and MasterCard, 15 digits for American Express. 
*
Currently, the page is setup so the user chooses whether he or she wants to pay when picking up the pizza or pay online using a credit card.
When online radiobox is checked, more radioboxes with credit card names appear.
html codes
<p> Payment Method</p>
<input id="paypickup" type="radio" name="rbRating"
value="Pick Up" checked />Pay on pickup
<input id="online" type="radio" name="rbRating"
value="online" />Online
<div id="hidden2" class="textinput">
<input id="visa" type="radio" name="cardtype"
value="Visa" onclick="showMe('visanum')"/>Visa
<input id="mastercard" type="radio" name="cardtype"
value="MasterCard" onclick="showMe('masternum')"/>MasterCard
<input id="americanexpress" type="radio" name="cardtype"
value="American Express" onclick="showMe('americaninfo')"/>American Express
</div>
<div id="visainfo">
<label for="visanum">Credit Card Number</label>
<input id="visanum" type="text" name="cardnum" maxlength="16" />
</div>
<div id="masterinfo">
<label for="masternum">Credit Card Number</label>
<input id="masternum" type="text" name="cardnum" maxlength="16" />
</div>
<div id="americaninfo">
<label for="americannum">Credit Card Number</label>
<input id="americannum" type="text" name="cardnum" maxlength="15" />
</div>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
JS code for hiding the credit card radio box until delivery is checked
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'paypickup') {
$('#hidden2').hide();
}
if($(this).attr('id') == 'online') {
$('#hidden2').show();
}
});
});
As you can see in the html codes, I tried to attempt this by creating multiple textboxes with maxlength. But I immediately realised this is inefficient and confusing.
I'm very new to these kind of stuff.

Create one input box for credit card number,initially disable the input box and on selection of the radio button for credit card enable the input box. HEre is change for both HTML and JS
HTML
<div>
Credit Card Number
<input id="creditCardNumber" type="text" name="cardnum" disabled/>
</div>
JS
function showMe(type) {
// clear previous value
$("#creditCardNumber").val('');
// enable the input and accept 16 digits for amex
if (type == "americaninfo") {
$("#creditCardNumber").attr({
maxlength: 16,
disabled: false
});
} else {
$("#creditCardNumber").attr({
maxlength: 15,
disabled: false
})
}
}
DEMO

If I were you, I wouldn't use all of those input:text. Instead, I'd use the data attribute to store all of the necessary data in it.
For example:
<input type="radio" name="cardtype" value="visa" data-maxLength="16"/>Visa
That way, you don't have to worry about hiding and showing several different boxes. Then, when the user clicks a new radio buttion, then you just have to set the maxlength attribute in the cardnumber input to the value of the data-attr
DEMO: https://jsbin.com/nufamixisi/edit?html,js,output
// Hide input
$(".cardInput").hide();
// User clicks on radio button so we need to show the input for card info
$('input:radio[name=cardtype]').click(function() {
// Show the input for card and delete old value
$("input:text[name=cardnum]").val("");
$(".cardInput").show();
// Get the maxLength set in the selected radio button
var ml = $(this).attr("data-maxLength");
$("input:text[name=cardnum]").attr("maxlength", ml);
});
I didn't throw logic in there to show/hide the card stuff based on cardpickup, etc. I think you can get that one ;)

on Focus not working when textbox selected

I have a form here which id like the users to be able to select the radio button to choose a pre-defined amount option, or press the textbox (focus) to select the custom amount. The purpose of the javascript below is to clear the textbox when a predefined amount has been selected. It also allows users to CLICK the textbox (onfocus) to enter a custom amount in the CP_otheramount field (also use the radio button as a fallback).
It all seems to be working except for the onfocus. It works perfectly on load...but try this scenario:
Load the page, click inside the textbox but then decide to change your mind by selecting the value 3 radio button (64)...and then decide to press inside the onfocus textbox amount again... it become disabled and stops you from clicking inside or writing a number in!
Can anyone see the problem here at all? Its strange because it works on Stackoverflow just not on the live site. ANy help would be really appreciated.
Here is what has been created so far:
function activate() {
$('#other').prop('checked', true);
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>

The problem with your code is that you are checking every radio button without un-checking them.
function activate() {
// $('#other').prop('checked', true); Remove this line;
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
And also
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
UPDATE:
It was working for me but I don't know why it's not working for you, so I rewrote the functions..See if this works for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span id="toggle"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
<script>
function activate(){
$('#theamount').attr('disabled',false);
$('#theamount').focus();
$('#other').click();
}
function deactivate(){
$('#theamount').val('');
$('#theamount').attr('disabled',true);
}
$('#toggle').click(function(){
activate();
});
$('input[name="am_payment"]').change(function(){
if($(this).val() != ""){
deactivate();
}else{
activate();
}
});
</script>

jQuery - Checking value of various input types

I have no idea what I'm doing wrong here. I have a form with radio buttons and simple text fields. I'm checking to see if there is a value within the form fields or if either of the radio buttons have been checked. If there is no value add a red color to the label. If they have a value I'm adding back the default black. But for some reason no matter if I put a value in the text field it stays red. Also kind of strange but if I check the first checkbox the black text appears. Any help is greatly appreciated.
JS Fiddle: http://jsfiddle.net/5Sacj/
<form name="headerForm">
<label id="gender" for="gender">Gender</label>
<input type="radio" name="customer" value="male" />Male
<input type="radio" name="customer" value="female" />Female
<br/>
<label for="fname">*First Name</label>
<input type="text" class="text" id="fname" name="fname" />
<br/>
<label for="fname">*Last Name</label>
<input type="text" class="text" id="lname" name="lname" />
<input id="submit" type="submit" name="submit" value="submit"
</form>
JQUERY
$(document).ready(function() {
$("#submit").on('click', function() {
$(":text, :radio").each(function() {
if($(this).val() === '' || !$(this).is(':checked')){
$(this).prev('label').css('color','red');
} else {
$(this).prev('label').css('color','black');
}
});
});
});

That is because you are using or operator ||.
It will execute even if one is true. Try using && or have separate if condition for both.

jQuery to Validate an Input Text Control based on Radio Selection

How do I validate that the input text corresponding to the radio option is checked?
For example, using the image above:
If Contact 1's E-Mail radio option is selected, Contact 1's E-Mail text field cannot be blank, but Contact 1's Phone and US Mail text fields are still permitted.
If Contact 2's US Mail radio option is selected, Contact 2's US Mail text field cannot be blank, but Contact 2's Phone and E-Mail text fields are still permitted.
I have built the form above using the HTML below, but you can play with my Fiddle here: fiddle.
BEGIN UPDATE: I have a newer fiddle with better code here:
fiddle2
It has more instructions in the HTML and a closer attempt at my jQuery. For some reason, though, it still does not seem to be doing anything.
END UPDATE
I have tried naming the fields so that my jQuery can parse them, but that does not mean there is not a better way.
<body>
<form name="jp2code" action="#" method="POST">
<fieldset>
<legend>Contact 1</legend>
<span>
<input type="radio" id="group1_PhoneRadio" name="group1"/>
<label for="group1_PhoneText">Phone:</label>
<input type="text" id="group1_PhoneText" name="group1_PhoneText"/>
<br/>
<input type="radio" id="group1_EMailRadio" name="group1"/>
<label for="group1_EMailText">E-Mail:</label>
<input type="text" id="group1_EMailText" name="group1_EMailText"/>
<br/>
<input type="radio" id="group1_USMailRadio" name="group1"/>
<label for="group1_USMailText">US Mail:</label>
<input type="text" id="group1_USMailText" name="group1_USMailText"/>
</span>
</fieldset>
<fieldset>
<legend>Contact 2</legend>
<span>
<input type="radio" id="group2_PhoneRadio" name="group2"/>
<label for="group2_PhoneText">Phone:</label>
<input type="text" id="group2_PhoneText" name="group2_PhoneText"/>
<br/>
<input type="radio" id="group2_EMailRadio" name="group2"/>
<label for="group2_EMailText">E-Mail:</label>
<input type="text" id="group2_EMailText" name="group2_EMaiText"/>
<br/>
<input type="radio" id="group2_USMailRadio" name="group2"/>
<label for="group2_USMailText">US Mail:</label>
<input type="text" id="group2_USMailText" name="group2_USMailText"/>
</span>
</fieldset>
<div>
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
What is the best way to write the jQuery?
I am new to jQuery, but I attempted my hand at it based on some Show/hide examples.
What I created below does not work, but hopefully indicates what I am trying to accomplish.
$(function() {
$("input[type='radio']").change(function() { // when a radio button in the group changes
var id = $(this).id;
var index = id.indexOf('group');
if (index == 0) { // is there a better way to do this?
var groupN_Len = 7; // Length of 'groupN_'
var radio_Len = 5; // Length of 'radio'
var preStr = id.substring(0, groupN_Len);
$"input[name*='preStr']".validate = null; // clear validation for all text inputs in the group
var postStr = id.substring(groupN_Len + 1, id.Length() + 1 - radio_Len); // extract Phone, EMail, or USMail
$(preStr+postStr+'Text').validate({ rules: { name: { required: true } } });
}
});
});

To make sure that the radiobutton is checked for each field, add attribute required="" in one of the radiobuttons for each fieldset.
demo

OK, whatever radio button is selected in the Contact Group's Contact Preferences, that corresponding text field is required.
Here is where I am so far on my jQuery checking:
EDIT:
Modified with tilda's important detail about adding '.' to the class name.
Added Required Attribute: how to dynamically add REQUIRED attribute to textarea tag using jquery?
Removed Required Attribute: jquery removing html5 required attribute
Final code works and looks like this:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("input[type='radio']").change(function() {
$('.'+$(this).attr('name')).each(function(index) {
$(this).removeAttr('required');
});
if($(this).is(':checked')) {
$('.'+$(this).attr('id')).each(function(index) {
$(this).prop('required',true);
});
}
});
$('#submit').click(function() {
$(this).validate();
});
});
Back to the HTML of the document: I did a lot of subtle editing to the text by creating specific ids and names for the radio buttons that matched up with the class names for the text controls.
Here is that end result:
<body>
<form name="jp2code" action="#" method="POST">
<div>For each field below, provide the Phone Number, E-Mail Address, and Street Address. <b>Indicate the preferred contact method using the radio button.</b></div>
<fieldset>
<legend>Contact 1</legend>
<span>
<input type="radio" id="group1_Phone" name="group1"/>
<label for="group1_Phone">Phone:</label>
<input type="text" name="group1_PhoneText" class="group1 group1_Phone" />
<br/>
<input type="radio" id="group1_EMail" name="group1"/>
<label for="group1_EMail">E-Mail:</label>
<input type="text" name="group1_EMailText" class="group1 group1_EMail" />
<br/>
<input type="radio" id="group1_USMail" name="group1"/>
<label for="group1_USMail">US Mail:</label>
<input type="text" name="group1_USMailText" class="group1 group1_USMail" />
</span>
</fieldset>
<fieldset>
<legend>Contact 2</legend>
<span>
<input type="radio" id="group2_Phone" name="group2"/>
<label for="group2_Phone">Phone:</label>
<input type="text" name="group2_PhoneText" class="group2 group2_Phone" />
<br/>
<input type="radio" id="group2_EMail" name="group2"/>
<label for="group2_EMail">E-Mail:</label>
<input type="text" name="group2_EMailText" class="group2 group2_EMail" />
<br/>
<input type="radio" id="group2_USMail" name="group2"/>
<label for="group2_USMail">US Mail:</label>
<input type="text" name="group2_USMailText" class="group2 group2_USMail" />
</span>
</fieldset>
<div>
<input type="submit" value="Send" id="submit"/>
</div>
</form>
</body>
Let me explain what is going on in the jQuery, using the HTML above:
When a radio button's checked state changes, each control with a class name that matches the radio button's name attribute has the required property removed.
If a radio button is checked (i.e. checked=true), then each control with a class name that matches the radio button's id attribute has the required property added.
Finally, the validator seems to have to be run on a single form control (not on individual text controls like I was doing).
Here is the sample Fiddle that I ended with: Fiddle v8
At tilda: You didn't say much, but what you did say helped a lot!