how to validate form validation based on radio button - javascript

i have two radio buttons, one is for fruits and dry fruits. For every radio button i display two text fields, i want to validate these text fields based on the radio button( means based on user which radio button we select).
I hardly working from morning, any idea.

Consider following just as example and will help you to sort out your problem
Below code will be part of your HTML
<input name="radio_" type="radio" value="fruit" id="fruitRadio" />
<input name="radio_" type="radio" value="dryfruit" id="dryfruitRadio" />
<input name="inputforfruitradio" type="text" value="fruit" id="fruitRadioInputText" />
<input name="inputfordryfruitradio" type="text" value="dryfruit" id="dryfruitRadioInputText" />
Above HTML code will need Javascript to work as required
$("#fruitInputText").hide();
$("#dryfruitInputText").hide();
$('input[name="radio_"]').on('change', function() {
var checked_radio = $(this).prop('id');
var inputText_id_to_be_shown = "#" + checked_radio + "InputText" ;
$(inputText_id_to_be_shown).show();
});

Related

Selected value of Radio Button doesn't change

In the view, I have these two radio buttons:
#Html.RadioButtonFor(c => c.CampaignType, "Exclusive")<label>Exclusive</label>
#Html.RadioButtonFor(c => c.CampaignType, "Shared")<label>Shared</label>
The value for Model.CampaignType is set in the controller before the page loads. All of this works fine. If Exclusive is what's saved in the DB, then we get this rendered in the HTML:
<input checked="checked" id="CampaignType" name="CampaignType" type="radio" value="Exclusive"><label>Exclusive</label>
<input id="CampaignType" name="CampaignType" type="radio" value="Shared"><label>Shared</label>
So far, all's well.
But, inside an onclick() event for a button, if I do this:
var values =
{
"CampaignType": $('#CampaignType').val()
}
alert(values.CampaignType);
The alert always comes up as `Exclusive', even if I have changed the selection to 'Shared'.
What do I need to do so that values.CampaignType reflects the what is selected on the page, and not what was set when the page was loaded?
So you can do start with these:
Remove the invalid ids - multiple ids are invalid in CSS. For getting the value of the checked radio button you can use:
$('input[name=CampaignType]:checked').val()
or
$('input[type=radio]:checked').val()
For the label to work you have to link it with the corresponding radio button using the for attribute.
See demo below:
function submit() {
var values = {
"CampaignType": $('input[name=CampaignType]:checked').val()
}
console.log(values.CampaignType);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked="checked" id="CampaignType1" name="CampaignType" type="radio" value="Exclusive">
<label for="CampaignType1">Exclusive</label>
<input id="CampaignType2" name="CampaignType" type="radio" value="Shared">
<label for="CampaignType2">Shared</label>
<br/>
<button onclick="submit()">click here</button>
All the best!

Trying to disable div section of form only if the values of 2 fields are 1 and checked

I am trying to disable a section of a form if it has been signed by a supervisor using 2 fields.
The problem is it works too good. It disables the section on a new form. For brevity here are the 2 fields, the hidden values of those fields and the jquery script.
This is the code of the fields when adding a new form or record.
These 2 forms are within the div with the id supersection.
Here is the html for the 2 fields
First the hidden values of the fields in the form then the html of the fields themselves.
<div id="supersection" style="border: none;">
<input type="hidden" name="supersignoff" value="0"/>
<input type="hidden" name="superdeclare" value="0"/>
<label class="padd2left" for="supersignoff">
<input type="checkbox" value="1" id="supersignoff" name="supersignoff" />
Complete and sign</label>
<label for="superdeclare">
<input type="checkbox" value="1" id="superdeclare" name="superdeclare" />
I have completed with the best info from all parties</label>
Below is the jquery script. This disables the whole section.
$(function(){
var signoff = $("#supersignoff").val();
var sdeclare = $("#superdeclare").val()
if(signoff=="1" && sdeclare=="1"){
$("#supersection *").prop("disabled",true);
}
})
Again the section is being disabled even when it is a new form.
Any ideas?
$(function(){
var signoff = $("#supersignoff").prop('checked');
var sdeclare = $("#superdeclare").prop('checked')
if(signoff && sdeclare){
$("#supersection *").prop("disabled",true);
}
});
.prop('checked') will give you the status of checkbox is checked or not, but not .val().
Ref: .prop() and .val()

Adding ID to button, but must change based on radio input selection

EDITED TO ADD HTML: not exactly the same since im not in my office anymore, but you'll get the idea.
The scenario is i have a part of a site where users can pick 1 of multiple addresses they have saved. The ID gets generated for each address and I need to apply that ID to a button to submit the form.
I've gotten it so the button receives the ID from the first click, but if I try to select a different address, the ID will not switch. How can I have the button use the ID of the most recently selected radio input? I'm using a data attribute to select this.
HTML:
<div>
<form>
<input type="radio" data-js="select" id="Test123" /> (id created dynamically)
<label>Address 1</label>
<input type="radio" dat-js="select" id="Test124" /> (id created dynamically)
<label>Address 2</label>
</form>
</div>
<button class="address-continue">Continue</button>
var radioID = $('*[data-js]').attr('id');
var addrContinue = $('.address-continue');
$('*[data-js]').click(function () {
$(addrContinue).attr('id', radioID);
});
Scenario: user clicks on address 1, so ID is then placed on the button for address 1. user made a mistake, meant to click on address 2. currently when i click address 2, the ID on the button doesn't change. it remains the same as the original click.
I need the ID on the continue button to change based on the proper radio selection.
Since id is unique use class
$('*[data-js]').click(function () {
var addrButton = $('.address-continue');
addrButton.removeClass(test123);
addrButton.removeClass(test124);
radioID = $('*[data-js]').attr('id');
addrButton.addClass(radioID);
});
Also your basic problem might be because you did not collect your radioID in ur radio function hence it wasn't updated so try this
$('*[data-js]').click(function () {
var radioID = $('*[data-js]').attr('id');
$(addrContinue).attr('id', radioID);
});
The following should do it for you hoping the corresponding elements are in the same order:
$('[data-js]').on('change',function() {
$('.address-continue').data('id', this.id);
});
$('.address-continue').on('click',function() {
alert( $(this).data('id') );
});
You cannot assign a second element in your document the id of another. IDs should be unique; therefore I have used data-id.
$('[data-js]').on('change',function() {
$('.address-continue').data('id', this.id);
});
$('.address-continue').on('click',function() {
alert( $(this).data('id') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<input type="radio" name="address" data-js="select" id="Test123" /> (id created dynamically)
<label>Address 1</label>
<input type="radio" name="address" data-js="select" id="Test124" /> (id created dynamically)
<label>Address 2</label>
</form>
</div>
<button class="address-continue">Continue</button>

change hidden name attribute after radio button is clicked

I have the need to change the name=' ' attribute of a hidden input when one of the radio buttons in a group is selected.
<input type="hidden" name="OptionName2" value="Premium Bundle Addons">
<input type="hidden" name="" value="PremiumBundleAddon">
HBO & Cinemax & Starz Package
<input type="radio" name="OptionValue2" value="3ITEM-HBO-CIN-STAR"><br />
HBO & Cinemax & Showtime Package
<input type="radio" name="OptionValue2" value="3ITEM-HBO-SHO-CIN"><br />
HBO & Showtime & Cinemax & Starz Package
<input type="radio" name="OptionValue2" value="ALL-HBO-SHO-CIN-STAR">
The name="" needs to change to name="ADD" when one of these radio buttons is clicked.
Here is what I have tried but I really struggle with javascript. If anyone could help dumb it down for me that would be amazing!
$(":radio").click(function () {
var inputValue = $this.val();
$(":hidden[name='opt2']").name() = "ADD";
});
});
As far as I see you don't have any hidden element with name opt2. Did you mean OptionName2?
Also, it's not correct the method you're using to change the name.
Try with this
$(":hidden[name='OptionName2']").attr("name", "ADD");
You can use simple javascript for this..
Just add id="changehid" to your hidden field.
Then you can use this function to change it:
function change() {
document.getElementById('changehid').name = "ADD";
}
Cheers
Evert
EDIT
Here's the code : http://jsfiddle.net/hCnyd/3/
I tested it with Safari Inspector, and it adds the name.
http://i.stack.imgur.com/aXjIE.png

If radio button checked add new form element using dom?

How do I use DOM in Javascript to check if a radio button is checked and then if so add new form elements to datesettings?
//Radio buttons
<input type="radio" id="dateoption" name="dateoption" value="1">
<input type="radio" id="dateoption" name="dateoption" value="2">
//Add new form elements
<span id="datesettings"></span>
Im currently reading a Javascript book but its not helping me understand. If someone could help me with this example then maybe the penny will drop. Thanks for your time.
Check out this page:
It explains the process so you understand why you're doing it a certain way, AND it gives good example code.
http://www.webdevelopersnotes.com/tips/html/finding_the_value_of_a_radio_button.php3
You would write a function to do the check, like this:
function CheckDateOptions() {
var o1 = document.getElementById("dateoption1");
var o2 = document.getElementById("dateoption2");
var eSettings = document.getElementById("datesettings");
if(o1.checked) {
eSettings.appendChild(...);
}
else if(o2.checked) {
eSettings.appendChild(...);
}
}
But, you have to make sure to assign your radio buttons unique id values. You can duplicate names to group the radio buttons, but for any element, the id should be unique.
<form id="TestForm">
<!-- //Radio buttons -->
<input type="radio" id="dateoption1" name="dateoption" value="1">Text 1</input>
<input type="radio" id="dateoption2" name="dateoption" value="2">Text 2</text>
<!-- //Add new form elements -->
<span id="datesettings"></span>
</form>

Categories

Resources