I'm trying to get the following function working but it doesn't and I can't figure out why
<script type="text/javascript">
function hideLevel() {
if if isNaN($('#id_course')) {
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
}
$(document).ready(hideLevel);
$('#id_course').change(hideLevel);
</script>
I'm just trying to hide form fields when a value is selected. I mean, when somebody select a value which will be a number, some fields whill have to disappear.
Here is the html code of the form :
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Cours</label>
<div class="controls">
<select id="id_course" name="course">
<option value="" selected="selected">---------</option>
<option value="nl">Néerlandais</option>
<option value="fr">Français</option>
<option value="01">Anglais</option>
<option value="02">Allemand</option>
<option value="03">Latin</option>
</select><br>
</div>
</div>
<div class="control-group">
<label class="control-label">Niveau</label>
<div class="controls">
<ul id="id_level">
<li>
<label for="id_level_0"><input class="level" id="id_level_0" name="level" type="checkbox" value="1" /> 1ère secondaire</label>
</li>
<li>
<label for="id_level_1"><input class="level" id="id_level_1" name="level" type="checkbox" value="2" /> 2ème secondaire</label>
</li>
<li>
<label for="id_level_10"><input class="level" id="id_level_3" name="level" type="checkbox" value="4" /> 4ème secondaire</label>
</li></ul><br>
</div>
</div>
<div class="form-actions">
<br><br>
<div class="col-md-6 col-md-offset-2">
<input type="submit" value="Publier" /><br><br><br>
</div>
</div>
</form>
I'm learning Jquery but in this simple script, I just can't see where is the problem :(
Here is the jsfiddle : http://jsfiddle.net/dvryqvLz/1/
----
EDIT
----
I realize now that the problem is the isNaN function and I didn't explain why I want to use it, please excuse me for that.
I have two sort of course and based on the course, I want to make some field disappear. My idea was to make a distinction between number and string. One category will have values as string and the other as number. The function must just distinct whether the value is a number or not and if it is, fields must disappear.
Anyway, thank you for your answers :)
You miss parentheses () in if condition :
if !isNaN($('#id_course')) {
Should be :
if ( !isNaN($('#id_course')) ) {
And also you have to use .val() to get the value of selected element in condition :
if ( !isNaN( $('#id_course').val() ) ) {
You can use :
$(function(){ //Ready function
hideLevel();
$('body').on('change', '#id_course', function(){
hideLevel();
});
});
Instead of :
$(document).ready(hideLevel);
$('#id_course').change(hideLevel);
NOTE : in example bellow you can see the else clause added because when you select another element with number value you have to show the fields again.
Hope this helps.
function hideLevel() {
if ( isNaN($('#id_course').val()) || $('#id_course').val() == "") {
$('#id_level').show();
$('#level').show();
$('#id_level').parents('.control-group').show();
}else{
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
}
$(function(){ //Ready function
hideLevel();
$('#id_course').on('change', function(){
hideLevel();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Cours</label>
<div class="controls">
<select id="id_course" name="course">
<option value="" selected="selected">---------</option>
<option value="nl">Néerlandais</option>
<option value="fr">Français</option>
<option value="01">Anglais</option>
<option value="02">Allemand</option>
<option value="03">Latin</option>
</select><br>
</div>
</div>
<div class="control-group">
<label class="control-label">Niveau</label>
<div class="controls">
<ul id="id_level">
<li>
<label for="id_level_0"><input class="level" id="id_level_0" name="level" type="checkbox" value="1" /> 1ère secondaire</label>
</li>
<li>
<label for="id_level_1"><input class="level" id="id_level_1" name="level" type="checkbox" value="2" /> 2ème secondaire</label>
</li>
<li>
<label for="id_level_10"><input class="level" id="id_level_3" name="level" type="checkbox" value="4" /> 4ème secondaire</label>
</li></ul><br>
</div>
</div>
<div class="form-actions">
<br><br>
<div class="col-md-6 col-md-offset-2">
<input type="submit" value="Publier" /><br><br><br>
</div>
</div>
</form>
You check isNaN($("#id_course")) while you probably want to check if the value of $("#id_course") is not "" (the empty string). !isNaN is in this case not the correct function to use because it will return true even for the empty string.
function hideLevel() {
if ($('#id_course').val()!="") {
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
}
hideLevel();
$('#id_course').change(hideLevel);
You can view a working jsFiddle here: http://jsfiddle.net/dvryqvLz/5/
EDIT
I first thought you want to hide the group when there is an option selected, now I realize that you probably want to hide the group when there is not an option selected. In that case you can use isNaN:
function hideLevel() {
if (!isNaN($('#id_course').val())) {
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}else{
$('#id_level').show();
$('#level').show();
$('#id_level').parents('.control-group').show();
}
}
http://jsfiddle.net/dvryqvLz/6/
isNan is a function which is used to check if the following value can be converted into a number or not. It would not be application on an element. You should use .length property to check if the element exists.
if($('#id_course').length > 0)
{
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
To check the value for NaN:
if(!isNaN($('#id_course').val()))
{
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
Related
I have 2 radio-buttons and a checkbox.
When the first option is "personalized" the checkbox "hidden" should be automatically checked.
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
I've made this script, but it is not working:
jQuery(document).ready(function () {
if ( $('.personalized input').val() = "personalized" ) {
$('.checkbox input').attr('checked');
}
});
You have few problems. As others already pointed out, you are checking document.ready instead of onChange event. So it checks on page load, instead of checking on radio button state change.
Another problem is that you are checking $('.personalized input') value, but you do not have personalized class in your html.
Your radio buttons have common class form-radio. So you can use it as a selector.
$('.form-radio').on("change", function(){
if ( $(this).val() == "personalized" ) {
$('.form-checkbox').prop('checked', true);
}
else{
$('.form-checkbox').prop('checked', false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
This part:
else{
$('.form-checkbox').prop('checked', false);
}
you only need if you want to un-check if not personalized.
Also take care of .prop() which is used for jQuery 1.6+. For lower versions use .attr()
You have to specify when do you want the script to check if the radio is checked or not. If you use just document.ready() function, it will check it only once, when the site is loaded and since it's not checked - the checkbox won't be checked neither.
You can use following approach: check it with every click event on the radio button.
$('.personalized').click(function() {
if ($(this).is(':checked')) {
$('.checkbox').attr('checked', 'checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' class='personalized'>
<input type='checkbox' class='checkbox'>
Simply you need to do it in ready function
jQuery(document).ready(function () {
if ($(".personalized").is(":checked") ) {
$('.checkbox').attr('checked', 'checked');
}
});
if you want them to apply on page load.
You have several problems here:
The code as written only runs on page load. Since you said you want the checkbox to be "automatically" checked, you should attach a change handler to the radio array.
.val() called on a radio array returns the value of the first element in the selected set, regardless of which one is checked. You need to add :checked to your selector to filter down to the one selected radio element.
Your single equals sign is the assignment operator and should be replaced with ===.
.attr('checked') returns the value of the checked attribute. There are actually two problems here: attr only looks at the attribute initially assigned to the element; you need to use prop instead to update the checked property. The second problem is that the one-parameter attr function is used to read the attribute. You want the two-parameter function to set it.
Here's a working example:
jQuery(document).ready(function () {
$('input[name="radio"]').on('change',function(){
if ( $('input[name="radio"]:checked').val() === "personalized" ) {
$('#hidden').prop('checked','checked');
} else {
$('#hidden').prop('checked','');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/>
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/>
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>
i am trying to loop through the radio buttons by name with 'each' function..the each function is not working and it is applying the logic only once and it is not looping for the next time..
My use case is, when user selects value from the select dropdown, needs to enable both the radio buttons and if the user deselects the dropdown- needs to disable back..
Here in my case, each function is looping only once and after that it is getting exit from it..Need help in figuring disable/enable based on dropdown selection..
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="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
jquery:
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(){
$("#authPermission").prop('disabled',false);
$("#authPermission").prop('checked',false);
});
}
else{
$("#authPermission").each(function(){
$("#authPermission").prop('disabled',true);
$("#authPermission").prop('checked',false);
});
}
});
You cannot have more than one element with the same ID. So, I would change your code by removing the id attribute and putting a new value for the class attribute, then fetch the object using jquery class selector.
<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="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser authPermission" value="anyUser" name="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser authPermission" value="groupUser" name="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
And jQuery code :
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(elemId, elem){
$(elem).prop('disabled',false);
$(elem).prop('checked',false);
});
}
else{
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
}
});
But, if we take a better look at your code, I do not understand why you want to use "each". You can achieve the same thing without it :
// Following code :
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
// Does the same thing as this one :
$(".authPermission").prop('disabled', true).prop('checked', false);
I refactored your code. Also enables the input field when the appropriate radio is clicked. This sould work:
function updateUI() {
var select = $("#authType");
var value = select.val();
var should_appear = (value.length == 0);
$("input:radio[name='authPermission']").attr('disabled',should_appear);
}
//binding...
$("input:radio").on("click", function() {
var should_display_textbox = !($(this).val() === "groupUser");
console.log(should_display_textbox);
$("input:text[name='authPermissionValue']").attr('disabled', should_display_textbox);
});
$("#authType").change(function(){
updateUI();
});
$(document).ready(function() {
updateUI(); //update also when page load
});
Something like this maybe?
$("#authType").change(function(){
var disabled = !$(this).val() ? true : false;
$("input:radio[name='authPermission']").each(function(){
$(this).prop('disabled', disabled );
$(this).prop('checked',false);
});
});
i have a field with Radio Buttons: Hide and Show, I want when Hide is selected to hide all fields below and to display all when Show is selected. Below is my code:
<div id="product-options-wrapper" class="product-options">
<dd>
<div class="input-box display">
<ul class="options-list">
<li>
<input class="radio product-custom-option" type="radio" checked="checked"><label for="options_6032_2">Show</label>
</li>
<li>
<input class="radio product-custom-option" type="radio"><label for="options_6032_3">Hide</label>
</li>
</ul>
</div>
</dd>
<dd>
<div class="input-box fontclass">
<select>
<option>Arial </option>
<option>Lato </option>
<option>Disney Print </option>
</select>
</div>
</dd>
<dd>
<div class="input-box">
<input id="mirror" type="text" value="">
</div>
</dd>
<dd class="last">
<div class="colorclass">
<select>
<option>red </option>
<option>black </option>
</select>
</div>
</dd>
</div>
Update:
Radio Buttons don't have a fixed ID or class, the only stable thing in that radio buttons is the text.
Update:
I am almost there i use div:contains function and siblings, the function is work to hide but I don't know why is not work to show again. This is the jquery:
jQuery('div:contains("Hide ")').on('click', function(){
jQuery(this).closest('dd').siblings().hide();
});
jQuery('div:contains("Show ")').on('click', function(){
jQuery(this).closest('dd').siblings().show();
});
this is my html:
<li>
<input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" price="0" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked">
<span class="label">
<label for="options_6032_2">Hide </label>
</span>
</li>
<li>
<input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" price="100" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()">
<span class="label">
<label for="options_6032_3">
Show
<span class="price-notice">
+
<span class="price">Dkr100.00</span>
</span>
</label>
</span>
</li>
Update:
Maybe this will help, this code is the php code that generate this radio options:
$selectHtml = '<ul id="options-'.$_option->getId().'-list" class="options-list">';
$require = ($_option->getIsRequire()) ? ' validate-one-required-by-name' : '';
$arraySign = '';
switch ($_option->getType()) {
case Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO:
$type = 'radio';
$class = 'radio';
if (!$_option->getIsRequire()) {
$selectHtml .= '<li><input type="radio" id="mylabel options_' . $_option->getId() . '" class="'
. $class . ' product-custom-option" name="options[' . $_option->getId() . ']"'
. ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
. ' value="" checked="checked" /><span class="label"><label for="options_'
. $_option->getId() . '">' . $this->__('None') . '</label></span></li>';
}
break;
case Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX:
$type = 'checkbox';
$class = 'checkbox';
$arraySign = '[]';
break;
}
Hiding and showing elements with jQuery/JavaScript is very straightforward. Add a class to the elements you wish to hide (in my example below I have named it hidden), then use the hide and show functions as follows:
$('#options_6032_3').click(function() {
$('.hidden').hide();
})
$('#options_6032_2').click(function() {
$('.hidden').show();
})
Check out this jsfiddle to see how it works.
EDIT
Based on the example you have provided in the comments to this answer, this alternative should work:
var hideRadio = $('li:nth-child(2) input:radio');
var showRadio = $('li:first input:radio');
hideRadio.click(function() {
$(this).closest('dd').siblings(':nth-child(3)').hide();
$(this).closest('dd').siblings(':nth-child(4)').hide();
})
showRadio.click(function() {
$(this).closest('dd').siblings(':nth-child(3)').show();
$(this).closest('dd').siblings(':nth-child(4)').show();
})
Check out this jsfiddle to see how it works.
NOTE:
Your dynamically created HTML code will need to be generated in the same format each time (with the dd and dt tags your most recent code contains).
if($('#radio').is(':checked')) { alert("it's checked"); }
Why don't you add class fields to the <dd> you want to hide and use jQuery or something similar to hide the <dd>. You may also want an identifier like a class or id to the radio buttons. Then you can hide the fields this way.
$(".show").change(function() {
if(this.checked) {
$(".fields").show();
}
});
$(".hide").change(function() {
if(this.checked) {
$(".fields").hide();
}
});
Here's a working fiddle: https://jsfiddle.net/28nboav9/
Is this similar to what you where looking for?
wrap your html code inside the div which need to be show/hide for better code optimization
HTML
<div id="product-options-wrapper" class="product-options">
<dd>
<div class="input-box display">
<ul id="options-6032-list" class="options-list">
<li>
<input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked"><label for="options_6032_2">Show </label>
</li>
<li>
<input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()"><label for="options_6032_3">Hide</label>
</li>
</ul>
</div>
</dd>
<div id="toggleVisibility"> //wrapped inside div
<dd>
<div class="input-box fontclass">
<select id="select_6031" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6031]">
<option price="0" value="42969">Arial </option>
<option price="0" value="42970">Lato </option>
<option price="0" value="42971">Disney Print </option>
</select>
</div>
</dd>
<dd>
<div class="input-box">
<input id="options_6030_text mirror" class="input-text required-entry validate-length maximum-length-25 product-custom-option form-control" type="text" value="" name="options[6030]" onchange="opConfig.reloadPrice()">
</div>
</dd>
<dd class="last">
<div class="input-box colorclass">
<select id="select_6028" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6028]">
<option price="0" value="42965">red </option>
<option price="0" value="42966">black </option>
</select>
</div>
</dd>
</div>
</div>
Please add this script into your page/js file
Jquery
$(document).ready(function () {
var $div=$('#toggleVisibility');
$('#options_6032_2').click(function () {
if ($(this).is(':checked')) {
$div.show();
}
})
$('#options_6032_3').click(function () {
if ($(this).is(':checked')) {
$div.show();
}
})
});
Try something like this. It finds the radio's parent DD and hides all it's siblings:
$('#options_6032_2').on('click', function(){
$(this).closest('dd').siblings().show();
});
$('#options_6032_3').on('click', function(){
$(this).closest('dd').siblings().hide();
});
It al depends a bit how dynamic your radio's are build up. You might want to assign a specific class for the selector.
Also see this fiddle: https://jsfiddle.net/cp5ses3y/
This should work
opConfig.reloadPrice = function(show){
if(show){
$('#select_6028,#options_6030_text,#select_6031').show();
}else{
$('#select_6028,#options_6030_text,#select_6031').hide();
}
}
You can change the selector to hide/show whatever you want. The best way I think, is to add a class to all the field you want to hide/show so you will only do $('.classToHideShow').show()
Here is the code with the modification : https://jsfiddle.net/55mrk3xf/
$("#hide").click(function() {
$('div.fontclass').hide();
$('div').children('#mirror').hide();
$('div.colorclass').hide();
});
$("#show").click(function() {
$('div.fontclass').show();
$('div').children('#mirror').show();
$('div.colorclass').show();
});
Try this. It uses a combination of JQuery and relative selectors to achieve the effect you want. Fiddle: https://jsfiddle.net/ut6jc4vp
I am new in programming. I have a code in which i use Jquery on HTML select tag. I have two Select Tag
<div style="margin-top:10px; width:280px; float:left">
<select name="s_name" id="s_name">
<option value="shahzad">Muhammad Shahzad Saleem</option>
<option value="hanif">Muhammad Jhangeer Hanif</option>
<option value="rana">Rana Muhammad Nadeem</option>
</select>
<br>
<select name="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
</div>
On first Select tag i use Jquery
<script>
$(function() {
$('#s_name').on('change',function(){
if( $(this).val()=="rana"){
$("#rana").show()
}
else{
$("#rana").hide()
}
if( $(this).val()=="hanif"){
$("#hanif").show()
}
else{
$("#hanif").hide()
}
});});
</script>
This Jquery is working fine for the following code
<div id="rana" style="display:none; margin-left:350px; width:auto; float:left">
<input type="text" name="uh1" value="Muhammad Jhangeer Hanif"/>
</br>
<input type="text" name="uh1_designation" value="Unit Head"/>
</div>
<div id="hanif" style="display:none; margin-left:350px; width:auto; float:left">
<input type="text" name="uh2" value="Rana Muhammad Nadeem"/> <br/>
<input type="text" name="uh2_designation" value="Unit Head"/>
</div>
Now i want to use jquery on my second select tag. I want that when user change the value in select tag s_name then it will make change automatically in second select tag s_designation For example by defalut my select tag show s_name is shahzad saleem and against its designation s_designation is cheif operating offecier. But i want when user click on s_name Hanif or rana then against its designation s_designation will automatically change Unit Head.
How i can do it? please tell me, Which will work with my existing jquery as well
Take a look at this:
$(function () {
var hanif = $("#hanif");
var rana = $("#rana");
var value = null;
var sName = $('#s_name');
var sDesignation = $('select[name="s_designation"]');
sName.on('change', function () {
value = $(this).val();
hanif.toggle(value === 'hanif');
rana.toggle(value === 'rana');
sDesignation.val(value === 'hanif' || value === 'rana' ? 'uh' : 'coo');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="margin-top:10px; width:280px; float:left">
<select name="s_name" id="s_name">
<option value="shahzad">Muhammad Shahzad Saleem</option>
<option value="hanif">Muhammad Jhangeer Hanif</option>
<option value="rana">Rana Muhammad Nadeem</option>
</select>
<br />
<select name="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
</div>
<div id="rana" style="display:none; margin-left:350px; width:auto; float:left">
<input type="text" name="uh1" value="Muhammad Jhangeer Hanif" />
<br />
<input type="text" name="uh1_designation" value="Unit Head" />
</div>
<div id="hanif" style="display:none; margin-left:350px; width:auto; float:left">
<input type="text" name="uh2" value="Rana Muhammad Nadeem" />
<br />
<input type="text" name="uh2_designation" value="Unit Head" />
</div>
Hope this helps. Is this the kind of result you were expecting?
You have to check the value of the first Select element and based on it's value you can change second select element as follows,
EDIT
$(function() {
$('#s_name').on('change',function(){
if( $(this).val()=="rana"){
$('#s_designation').val('coo');
} else {
$('#s_designation').val('uh');
}
});
Also put an id to your second select as s_designation.
#Sunny yes, you can use $('#s_name') in another function.
<div class="table-thing with-label widget uib_w_114 d-margins" data-uib="app_framework/flip_switch" data-ver="1">
<label class="narrow-control label-inline">Notifications</label>
<div class="wide-control">
<input type="checkbox" class="toggle" id="af-flipswitch-1" name="af-flipswitch-1" checked="checked">
<label for="af-flipswitch-1" data-off="Off" data-on="On">
<span></span>
</label>
</div>
</div>
I am not sure how to get the value from the flip switch (On or Off) and assign to a javascript variable.
Edit: The above code is from App Designer (Intel XDK)
To get the value use,
if ($('#af-flipswitch-1').is(":checked"))
{
console.log("On");
} else {
console.log("Off");
}
flip switch html code
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<button id="submit">Submit</button>
Jquery code
$(document).delegate("#submit", "tap", function() {
alert($("#flip-1").val());
});
Click to Demo