Assign value to Radio button-based on dropdown select - javascript

I am currently working on a form, where one of the segment have a dropdown selection of 2 elements and next to them are two radio buttons associated to that dropdown.
one of the radio-button is normal(non-input text box) one and the other radio-button is for custom entry input textbox.
The usecase was, user first selects a element in the dropdown and based on the selection, if the user clicks on the first radio button which has no input text box, the value for this radio-button should be assigned based on the dropdown selection..
below is my html code:
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DBUser">DBUser</option>
<option value="LDAPUser">LDAPUser</option>
</select>
</div>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
I should have a jquery code, to assign the value to the radio button..
so if the user selects 'DBUser' from the dropdown and if he selects 'AnyUser' radio button, then jquery functionality needs to assign a value which may be "AnyDBUserValue" to the radio button..
if user selects LDAPUser from the dropdown and if he selects 'AnyUser' radio button, then jquery functionality needs to assign a value for this which may be "AnyLDAPUserValue" to the radio button..
if the user wanted to enter custom value by selecting other radio button, which has input text box, then we need to discard those previous value and takes the custom values entered by the user..
I am a newbie in JQUery and so need help in writing the jquery code for this functionality...
Appreciate the help..Thanks.

First you will perform drop down event like this...
$("#authType").change(function(){
$("#authPermissionValue").val($("[type = radio]").val().split("U")[0].toUpperCase() + $("#authType").val())
})
or also like this..
$("#authType").change(function(){
$("#authPermissionValue").val("ANY" + $("#authType").val())
})
and after this you can perform radio button even like this...
$(".groupuser").on( "click", function(){
$("#authPermissionValue").removeAttr("disabled");
$("#authPermissionValue").val("");
});
That solution is totally dynamic of your requirements.
no need to add extra hard code for conditions

Below code can give you an idea how to start
$("#authType").change(function(){
})
$('input[name="authPermission"]').click(function(){
if ( $("#authType").val()=='DBUser' && $(this).val() =='anyUser'){
$(this).val('AnyDBUser');
}
if ( $("#authType").val()=='LDAPUser' && $(this).val() =='anyUser'){
$(this).val('AnyLDAPUser');
}
})

Related

Targeting the nth element of certain class when nth checkbox is checked?

So I have a dynamically listed set of elements, each structured as follows:
<div class="under-item-description">
<span class="under-compare-price">100</span><span class="under-price">50</span>
<span class="under-compare-price-2">200</span><span class="under-price-2">100</span>
<div class="under-quantity">
<label class="under-quantity-button">
<input type="radio" checked="checked" name="quantity-1" class="under-quantity-radio" value="1"/>
</label>
<label class="under-quantity-button">
<input type="radio" name="quantity-2" class="under-quantity-radio" value="2"/>
</label>
</div>
</div>
The amount of times the .under-item-description div is shown on the page can change. Currently, it shows four times.
What I am trying to do is when a user clicks on the first checkbox (name="quantity-1") in any given .under-item-description div, that div's .under-compare-price and .under-price shows, while .under-compare-price-2 and .under-price-2 are hidden.
If the second checkbox (name="quantity-2") is clicked, then .under-compare-price-2 and .under-price-2 are shown while .under-compare-price and .under-price are hidden, only in that .under-item-description div.
Here's my JS:
$('.under-quantity-button').click(function(){
$('.under-quantity-radio').each(function(){
if($(this).is(':checked')){
$('.under-compare-price:eq('+$(this).parents('.under-item-description').index()+'), .under-price:eq('+$(this).parents('.under-item-description').index()+')').show();
$('.under-compare-price-2:eq('+$(this).parents('.under-item-description').index()+'), .under-price-2:eq('+$(this).parents('.under-item-description').index()+')').show();
}
});
});
However, it doesn't seem to function as I want. Regardless of which second checkbox is clicked, I have the prices appear on the 1st and 3rd elements. And it doesn't switch back when the first checkbox is clicked anywhere. Any help?
Surround each selection of radio buttons in a
<fieldset></fieldset>
This will allow them to work independently, then use jQuery closest() to select the elements to hide.
https://api.jquery.com/closest/

Is it possible to add the value of a checkbox if checked into a text field?

Is it possible to add the value of a checkbox if checked into a text field?
I have this form...
http://xotio.com/photos/download/turk.html
I'm trying to add the value of a checkbox into a textbox if the checkbox has been clicked.
In my form there is one text box and three checkboxes per image (one of the checkboxes opens up more checkbox options and i'm not concerned about those color choices as much). I'm trying to add the 'value' of the three main checkboxes into the text field above. Is that possible?
the values of the checkboxes i would like are the ' lost' and ' none' and ' blurry' options and add their values to the textbox above if they get checked.
In the end I'm trying to use parsley to validate each of the textboxes for data before it submits my form. There are occasionally instances when no data is entered in the textbox, but the user has checked the right boxes and I want it to validate and can't come up with any ideas except this... any help or ideas would be great. thanks in advance and sorry for the long winded complex question.
I give you an example for your reference:
<html>
<body>
<input type="checkbox" value="lost" onclick="sendValueToTextBox(this)">lost
<br>
<input type="checkbox" value="none" onclick="sendValueToTextBox(this)">none
<br>
<input type="checkbox" value="blurry" onclick="sendValueToTextBox(this)">blurry
<br>
<input type="text" id="fg">
<script language=javascript>
function sendValueToTextBox(checkbox) {
var textbox=document.getElementById("fg");
if (checkbox.checked)
textbox.value=checkbox.value;
else
textbox.value="";
}
</script>
</body>
</html>

How to reset input fields

I want to reset the input field.
If I click "Type 1" radio button and enter value in input field and again if i select "Type 2" radio button then the existing value in the input field should be reset to empty.
<div class="samples">
<input type="radio" id="samples_1" />Type1
<input type="radio" id="samples_2" />Type2
<input type="radio" id="samples_3" />Type3
</div>
<input type="text" id="demo" value=""/>
How can I implement this in javascript/jquery.
Fiddle: http://jsfiddle.net/wYuZL/
Use this, it works. And you haven't added jquery - add jquery in jsfiddle to make it work.
$(":radio").bind("change", function (event){
$("#demo").val("");
});
How can I implement this in JavaScript/jQuery?
Assuming I understand what you're trying to do (make it so that when you click on the radio buttons, the value of the input box is cleared) then you will have to set an event handler on the elements so that we can clear the input box:
$(function() {
$("#samples > input").click(function() {
$("#demo").val("");
});
});

Unchecking a radio box without use of id's

I'm setting up a table, where each row will contain several radio boxes. There are certain conditions for the radio boxes, for example:
If "Home" is checked, the "Text" radio box will be unchecked and "Voice" will be checked instead (ie. You can't text a home phone number). Similarly, when "Home" and "Voice" are checked, clicking "Text" will force "Home" to be unchecked and "Cell" will become checked.
I can get this working fine for one instance, with the use of .getElementById and the click function, but where I run into trouble is when things are scaled up. This table might have 20 or 30 rows, each of which containing a cell with these radio boxes.
I'm not great with jQuery, so I'm not sure how to make a more general version, so that each set of radio boxes are their own contained units, so to speak. I made a jsfiddle where you can see that only the first instance is working, likely because I am targeting the boxes using their id and you can't have two elements with the same id... help? Thanks!
http://jsfiddle.net/3uHqS/
Script
$( document ).ready(function() {
document.getElementById('contact-home').onclick = function () {
document.getElementById('format-voice').checked = true;
};
document.getElementById('format-text').onclick = function () {
document.getElementById('contact-cell').checked = true;
};
});
HTML
<form>
<input type="radio" name="contact" value="" id="contact-cell" />
<label for="contact-cell">Cell</label>
<input type="radio" name="contact" value="" id="contact-home" />
<label for="contact-home">Home</label>
<input type="radio" name="format" value="" id="format-voice" />
<label for="format-voice">Voice</label>
<input type="radio" name="format" value="" id="format-text" />
<label for="format-text">Text</label>
</form>
You are going to want to assign every radio box a descriptive class like 'text-radio' or 'home-radio'. Then when you need to change all of the Text radio boxes you do something like the following in jQuery:
$(".text-radio").attr('checked', 'checked');

Retain value of text box whose radio button is clicked

I have different radio button, each with a text box value associated to it on my form. A user can select only one radio button at a time and submit the form. However, occasionally a user will enter data in a textbox for one radio button and then choose a different option and enter textbox data in it. Currently it preserves data in both textboxes and submits them as well.
Is there any way I can clear the data and preserve only for the one that got clicked last? Like an onclick event which clears all the data of any other radio button other then the checked one.
just a quick static example code:
<form class="form-horizontal" id="whereEntry" method='post' action=''>
<input type="radio" name="formOption" id="radio1210" value="1210" checked="checked">Waiting on Approval<br>
Comment:<input type="text" name="Comment"><br>
<input type="radio" name="formOption" id="radio1211" value="1211" checked="checked">Waiting on Authorization<br>
Comment:<input type="text" name="Comment">
<input type="Submit" value="Submit">Submit
</form>
Textbox value are displayed when radio button is clicked. So If I click a radio button and I enter a value in the comment textbox and then if click another radio button, both the comment box values are retained.
something like this
Html MarkUp
<input type="radio" id="radio1" name="gender"/>Male
<input type="text" id="txt1">
<br />
<input type="radio" id="radio2" name="gender"/>FeMale
<input type="text" id="txt2">
Jquery
$("input:radio").click(function(){
$("input:text").not($(this).next()).val("");
})
Live Demo

Categories