Hi I'm having a hard time hiding my div. my CampusID div doesnt hide. Any help / suggestion would be greatly appreciated
$(document).ready(function() {
$('#Type').change(function() {
if ($('#type').val() == '1') {
$('#CampusID').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input form-control" id="Type" name="Type" required>
<option value="1">Student</option>
<option value="2">Employee</option>
</select>
<div class="form-group" id="CampusID">
<label>Campus</label>
<select class="input form-control" id="CampusID" name="CampusID">
<option value="CampusID">---Select Campus---</option>
</select>
</div>
selectors are case-sensitive, type should be Type in if
if($('#Type').val() == '1') {
or even
if( $(this).val() == '1') {
Typo
if($('#type').val() == '1') {
should be
if($('#Type').val() == '1') {
You had one Typo in your code (you selected $("type"), but it should have been $("Type")) and additionally you closed the $(document).ready() twice with });
As for the future I would advice you to use camelCase for IDs instead of PascalCase, which is typically used for class names in Javascript.
<select class="input form-control" id="type" name="type" required>
<option value="1">Student</option>
<option value="2">Employee</option>
</select>
<div class="form-group" id="CampusID">
<label>Campus</label>
<select class="input form-control" id="CampusID" name="CampusID">
<option value="CampusID">---Select Campus---</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#type').change(function () {
if ($(this).val() == '1') {
$('#CampusID').hide();
}
});
});
</script>
Related
I want to make input element name="sellprice" enable if i select value sell option else input element will be disabled.
<select id="selling" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
Here is my Javascript Code, I have try this below code but it's not working.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "free"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
Please have a look I hope it's useful for you.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "sell"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
I want to make input element name="sellprice" enable
- that is not an input, it's a dropdown
If i select value sell option else input element will be disabled. - from your current explanation i understand that you want to disable the drop-down if the third option is selected
If the third option is selected, the drop-down will be disabled.
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#mounth').prop( "disabled", true );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't Want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
If you want to disable the input if the third option is selected, the following code will do it
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#textInput').prop( "disabled", true );
} else {
$('#textInput').prop( "disabled", false );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="" selected="selected">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 ">
</div>
<select id="mounth" onchange="myOnChangeFunction()" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
in js
<script>
function myOnChangeFunction() {
var val = document.getElementById("mounth").value;
if(val === "sell"){
document.getElementById('4').disabled = false;
}else{
document.getElementById('4').disabled = true;
}
}
</script>
Hi actually i want to show a new dropdown according to the values in the first dropdown. Here i can show the dropdowns on select but i couldn't hide the other dropdowns, if we select some other options. So, If we select the "buyer-contact-details", we should show the lst1 dropdown. If we select "supplier-contact-details", the lst1 dropdown hide and lst2 should shown. Please Help me.
$(document).ready(function() {
$(".deny-lst").on("change", function() {
if ($(this).val() == "buyer-contact-details") {
$(".lst1").slideDown();
} else if ($(this).val() == "supplier-contact-details") {
$(".lst2").slideDown();
} else if ($(this).val() == "other-to-deny") {
$(".lst3").slideDown();
} else {
$(".lst1, .lst2, lst3").slideUp();
}
});
$(".lst3").on("change", function() {
if ($(this).val() == "other") {
$(".textarea").slideDown();
} else {
$(".textarea").slideUp();
}
});
})
.textarea {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<select class="form-control input-md deny-lst">
<option> Please Select </option>
<option value="buyer-contact-details">Buyer shared their contact details</option>
<option value="supplier-contact-details">Supplier shared their contact details</option>
<option value="other-to-deny">Other Reason</option>
</select>
<select class="form-control input-md lst1" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
</select>
<select class="form-control input-md lst2" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
</select>
<select class="form-control input-md lst3" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
<option value="other">Other</option>
</select>
<div class="textarea">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
</div>
You are showing the dropdowns which are necessary to be shown but you are not hiding the ones which are not required. See the first line under change handler.
http://jsfiddle.net/dnr1bocv/
$(document).ready(function() {
$(".deny-lst").on("change", function() {
$(".lst1, .lst2, lst3").slideUp();
if ($(this).val() == "buyer-contact-details") {
$(".lst1").slideDown();
} else if ($(this).val() == "supplier-contact-details") {
$(".lst2").slideDown();
} else if ($(this).val() == "other-to-deny") {
$(".lst3").slideDown();
} else {
$(".lst1, .lst2, lst3").slideUp();
}
});
$(".lst3").on("change", function() {
if ($(this).val() == "other") {
$(".textarea").slideDown();
} else {
$(".textarea").slideUp();
}
});
})
This is probably how I'd do it. I'd attach a class to the subdropdowns and subparts and slide them up when the main dropdown is changed.
$(document).ready(function() {
$(".deny-lst").on("change", function() {
$(".subdrop").slideUp();
if ($(this).val() == "buyer-contact-details") {
$(".lst1").slideDown();
} else if ($(this).val() == "supplier-contact-details") {
$(".lst2").slideDown();
} else if ($(this).val() == "other-to-deny") {
$(".lst3").slideDown();
} else {
$(".lst1, .lst2, lst3").slideUp();
}
});
$(".lst3").on("change", function() {
if ($(this).val() == "other") {
$(".textarea").slideDown();
} else {
$(".textarea").slideUp();
}
});
})
.textarea {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<select class="form-control input-md deny-lst">
<option> Please Select </option>
<option value="buyer-contact-details">Buyer shared their contact details</option>
<option value="supplier-contact-details">Supplier shared their contact details</option>
<option value="other-to-deny">Other Reason</option>
</select>
<select class="form-control input-md subdrop lst1" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
</select>
<select class="form-control input-md subdrop lst2" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
</select>
<select class="form-control input-md subdrop lst3" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
<option value="other">Other</option>
</select>
<div class="textarea subdrop">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
</div>
I have the following code:
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
I would like the form to show a new input text below this drop-down list when user chooses 'other' so that he/she can input his own city. The same way, if the user chooses back one of the existing cities in the drop-down list, the generated text input would disappear.
Add a input after the select and make it as display none
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
and inside the script tag
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
and you also should add Jquery in your html file before the above script tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
after combine the Html and Scripts your html file should look like this
<html>
<body>
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
</body>
</html>
Vadivel's fixed code:
<script type="text/javascript">
$( document ).ready(function() {
$('#city_value').attr('type','hidden');
$('#city').change( function(){
var city=$('#city').val();
if(city=="other")
{
$('#city_value').attr('type','text');
}
else
{
$('#city_value').attr('type','hidden');
}
});
});
</script>
$('#city').live('change', function() {
var selectedCity = $(this).val();
if(selectedCity == "other"){
$('#city').after('<input type="text" id="othercity" name="othercity">');
}else{
$('#othercity').remove():
}
});
JavaScript Code:
function otherOptionCall()
{
var e = document.getElementById("city");
var einput = document.getElementById("inputother");
var strUser = e.options[e.selectedIndex].value;
if(strUser == 2)
{
einput.style.display="block";
}
else
{
einput.style.display="none";
}
}
Html code:
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="otherOptionCall()">Other...</option>
</select>
<input type="text" name="strother" id="inputother" style="display:none">
Use this code .
this is work fine.
You create this type use Jquery or JavaScript functions
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id=" " style="">
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1" onselect="city(this.val)">city1</option>
<option value="city2" onselect="city(this.val)">city2</option>
<option value="other" onselect="city(this.val)">Other...</option>
</select>
<input type="text" value="" id="city_value" placeholder="Enter City"/>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('#city_value').hide();
$('#city').change( function(){
var city=$('#city').val();
if(city=="other")
{
$('#city_value').attr('required',true);
}
else
{
$('#city_value').attr('required',false);
}
});
});
</script> </body>
I did this in javascript code, but it does not work perfectly, the second "select" perfectly "disabled" by default, but I want when I selected an option from the first "select": the second will be "enabled" but it does not work,
and this is the code :
// JavaScript Document
var update_select = function () {
if ($("#edit-field-villes-tid").is(":selected")) {
$('#edit-field-villages-tid-option-limit').prop('disabled', false);
}else {
$('#edit-field-villages-tid-option-limit').prop('disabled', 'disabled');
}
};
$(update_select);
$("#edit-field-villes-tid").change(update_select);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form >
<div class="views-exposed-widgets clearfix">
<label for="edit-field-villes-tid">Villes </label>
<select id="edit-field-villes-tid" name="field_villes_tid" class="form-select">
<option value="All" selected="selected">- Any -</option>
<option value="21">Sousse</option>
<option value="22">Tunis</option></select>
<label for="edit-field-villages-tid-option-limit">Villages </label>
<select id="edit-field-villages-tid-option-limit" name="field_villages_tid_option_limit" class="form-select">
<option value="All" selected="selected">- Any -</option>
<option value="24">El Zahra</option>
<option value="23">Sahlool</option>
</select>
<input class="ctools-use-ajax ctools-auto-submit-click js-hide form-submit" type="submit" id="edit-submit-tunisia" name="" value="Apply">
</div></form>
someone can help me ?
This worked for me;
<script language='javascript' type='text/javascript'>
var update_select = function () {
if ($("#edit-field-villes-tid")[0].selectedIndex > 0) {
console.log("is selected");
$('#edit-field-villages-tid-option-limit').prop('disabled', false);
} else {
console.log("is NOT selected");
$('#edit-field-villages-tid-option-limit').prop('disabled', true);
};
};
$(update_select);
$("#edit-field-villes-tid").on("change", update_select);
</script>
Changing the IF check to [0].selectedIndex > 0 was the key.
To get straight to the point here's I want to accomplish. I want to hide a certain DIV when a certain <OPTION> in <SELECT> was selected.
Here's my HTML markup:
THE SELECT
<select name="cutoffselect" id="cutoff" class="text ui-widget-content ui-corner-all" style="padding-right: 80px;">
<option value="">Choose One</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="semimonthly">Semi Monthly</option>
<option value="monthly">Monthly</option>
</select>
and the DIV I want to hide if DAILY was selected.
THE PERIOD
<div class="input-group-addon" style="width:20%;" title='Filter By' id = "perioddiv">
<!--PERIOD-->
<label for="period" style="padding-right: 10px;margin-top:7px;" visible="false">Period</label>
<select name="period" id="period" class="text ui-widget-content ui-corner-all">
<option value="">Choose Period</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<!--PERIOD-->
</div>
I have tried using different query but I cannot do what I want. Here's the query I used but its not functioning and if I may ask for another jQuery suggestion that actually might work the greater. Thanks to all in advance.
HERE'S THE QUERY
<script type="text/javascript">
$("#cutoffselect").change(function(){
$("#perioddiv div:eq(" + $(this).attr("selectedIndex") + ")").show();
});
</script>
this will do it:
<script type="text/javascript">
$(function(){
$("#cutoff").change(function(){
if($(this).val()=='daily'){
$('#perioddiv').hide();
}
else{
$('#perioddiv').show();
}
});
});
</script>
here is your answer.
$('#cutoff').change(function () {
if ($('#cutoff').find(":selected").text() == 'Daily') {
$('#perioddiv').hide();
} else {
$('#perioddiv').show();
}
});
jsfiddle:
http://jsfiddle.net/LNMW3/
Check this Fiddle
Using the ID's you can easily sort this out by using:
$("#selectorID").hide();
try
$("#cutoff").change(function () {
if (this.value == "daily") {
$("#perioddiv").hide();
} else {
$("#perioddiv").show();
}
});
DEMO
try this:
$('#period').change(function(){
// check if "daily" is selected
if($(this).val() == "daily") {
$('#perioddiv').hide();
}
});
Check if the selected option is daily and then hide the div.
$(document).ready(function(){
$('#cutoff').change(function(){
if($('#cutoff option:selected').val() == 'daily')
{
$('#perioddiv').hide();
}
else
{
$('#perioddiv').show();
}
});
});
DEMO FIDDLE
To hide div with id=perioddiv when daily option selected, you can try below jquery:
<script type="text/javascript">
// bind change event using '#cutoff' as select id="cutoff"
$("#cutoff").change(function(){
// hide if selected value is "daily"
if($(this).val() == "daily")
$("#perioddiv").hide();
else
$("#perioddiv").show();
});
</script>