CODEWITHSUNDEEP
javascriptjqueryhtmlforms
kota srinu
kota srinu

Reputation: 49

Assign value to Radio button-based on dropdown select

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.

Upvotes: 0

Views: 1152

Answers (2)

shivani
shivani

Reputation: 1028

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

Upvotes: 1

Sami
Sami

Reputation: 3800

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');
   }
})

Upvotes: 0

Related Questions