Jquery show/hide element based on multiple conditions - javascript

I am trying to disable button element based on selection value from a dropdown and when textarea is not empty. So when user select Reject from dropdown list, they have to also fill the textarea input, otherwise they cannot update (the button is disable not hide).
However I am unable to achieve it completely, I've only success for dropdown condition only (also in hide state, not disable). This is what I've got:
(Also it could be nice if someone can code this with pure javascript, not jquery, thank you)
$(document).ready(function(){
$(".input-wrap > select").on("change", function() {
if ( this.value == "Reject")
{
$("button").hide();
}
else
{
$("button").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-wrap">
<select class="select-class" id="selectId">
<option value="Reject">Reject</option>
<option value="Earn">Earn</option>
</select>
</div>
<div class="input-wrap">
<textarea class="textarea-class"></textarea>
</div>
<button type="button" class="button-class">Update</button>

you can disable the button using
$("button").prop('disabled', true);
and also check text field empty or not using
if($("#textid").val().trim()!="")
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".input-wrap > select").on("change", function () {
if (this.value == "Reject") {
$("button").prop('disabled', true);
}
else {
$("button").show();
$("button").prop('disabled', false);
}
});
$("#textid").on('keyup', function () {
if ($("#textid").val().trim() != "") {
$("button").prop('disabled', false);
} else {
$("button").prop('disabled', true);
}
});
});
</script>
</head>
<body>
<div class="input-wrap">
<select class="select-class" id="selectId">
<option value="Reject">Reject</option>
<option value="Earn">Earn</option>
</select>
</div>
<div class="input-wrap">
<textarea class="textarea-class" id="textid"></textarea>
</div>
<button type="button" class="button-class">Update</button>
</body>
</html>

You can use the and operator (&&)
if(this.value == "reject" && ... your other condition) {
// both conditions are met
}else {
// one or more condition is not met
}

Related

How can I use the value of a checkbox to hide the div with the corresponding ID?

I'm using a set of checkboxes with each corresponding to a div containing content. I'm trying to only use a single function for all the checkboxes.
I've created a function which looks for any checkbox being clicked, identifies if the checkbox is checked and then attempts to show the corresponding content.
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
$($(this).value).show();
}
else if($(this).prop("checked") == false){
$($(#this).value).hide();
}
});
});
</script>
<input type="checkbox" name="dieConstant" value="'#dc'"> Show Dielectric Constant<br>
<div id="#dc" style="display:none">
content
</div>
When the checkbox is ticked, the content in the "dc" div should appear, but it does not. Note that replacing " $(this).show(); " with " $(#dc).show(); " gives the intended result and that is what I need, but it needs to work will all checkboxes.
For this purpose it is better to use data-attribute. I named it data-id. The value attribute is then still available to hold real values.
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
$($(this).data('id')).show();
}
else if($(this).prop("checked") == false){
$($(this).data('id')).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="dieConstant" value="" data-id="#dc"> Show Dielectric Constant (dc)<br>
<input type="checkbox" name="dieConstant" value="" data-id="#dc2"> Show Dielectric Constant (dc2)<br>
<div id="dc" style="display:none">
content dc
</div>
<div id="dc2" style="display:none">
content dc2
</div>
A good suggestion from #Rory McCrossan to reduce code with toggle():
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
$($(this).data('id')).toggle();
});
});
$(this) in that context references the checkbox.
$('#dc') is correct
EDIT
Based on your comment, you can get the value of the clicked checkbox like so:
var divId = $(this).attr('value')
And then you can use that value in the div selector:
$(divId).show() // or hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
$($(this).data('id')).css('display','block');
}
else if($(this).prop("checked") == false){
$($(this).data('id')).css('display','none');
}
});
});
</script>
<input type="checkbox" name="dieConstant" value="" data-id="#dc"> Show Dielectric Constant (dc)<br>
<input type="checkbox" name="dieConstant" value="" data-id="#dc1"> Show Dielectric Constant (dc1)<br>
<div id="dc" style="display:none">
content dc
</div>
<div id="dc1" style="display:none">
dc1
</div>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
let div = $(this).attr("value");
if ($(this).prop("checked") == true) {
$(div).show();
} else {
$(div).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="dieConstant" value="#dc"> Show Dielectric Constant<br>
<div id="dc" style="display:none">
content
</div>

jQuery show/hide div based on select option

So I know this has been asked a bunch and I've cycled through several posts and have done, it seems, exactly what has been said, but can't get it to work. You can see my page here.
Essentially I want to show a div and make its inputs/selects required (once shown; if hidden, they are not required). Obviously the div should show/hide depending on the selection.
$('#table-meals, .product-addon-please-choose-your-meal').hide();
$('#purchase').change(function(){
if($(this).val()=="Individual") {
$('#table-meals').show();
$('select').prop('required',true);
}
if($(this).val()=="Table of 10") {
$('.product-addon-please-choose-your-meal').show();
$('input').prop('required',true);
}
});
I figured it out, instead of using $('#purchase').change(function(){ I need to use $('form').on('change', '#purchase', function(){
The following code does work for me on your test page.
It looks like you had the individual/table of 10 elements mixed up.
// Using jQuery instead of $ because it looks like there's some sort of conflict on the site
jQuery('#purchase').change(function(){
// Reset required fields and hide fields
jQuery('select, input').prop('required', false);
jQuery('#table-meals, .product-addon-please-choose-your-meal').hide();
if(jQuery(this).val() == "Individual") {
jQuery('.product-addon-please-choose-your-meal').show();
jQuery('input').prop('required', true);
}
if(jQuery(this).val() == "Table of 10") {
jQuery('#table-meals').show();
jQuery('select').prop('required', true);
}
});
Based on dropdown list selection
jQuery(function () {
$("select").change(function () {
$(this).find("option:selected").each(function () {
window.onunload = unloadPage;
function unloadPage(){
$('#dropdown').find('option:first').attr('selected', 'selected');
}
if ($(this).attr("value") == "user") {
$(".box").not(".user").hide();
$(".user").fadeIn(3000);
}
else if ($(this).attr("value") == "group") {
$(".box").not(".group").hide();
$(".group").fadeIn(3000);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-sm-12" >
<select class="selectpicker" id="dropdown">
<option value="default" selected="selected">Select Module..</option>
<option value="group">Group Management</option>
<option value="user">User Management</option>
</select>
</div>
<div class="group box" style="display:none">
<h4>Group Management</h4>
<p>Div 2.</p>
</div>
<div class="user box" style="display:none">
<h4>User Management</h4>
</div>

I want to validate drop down menu on value change not on submit button click

I have written this code for fetching data on submission of drop down menu, it is working on submit button click, but now I want this to work only on change of value in drop down menu, here is my working code.
<script language="javascript">
function validFormDataCity() {
if (document.getElementById("jobsbycitymenu").value == "Not Selected") {
alert("Please select a City.");
document.citysearch.jobsbycitymenu.focus();
return false;
}
}
</script>
<div id='jobsbycity'>
<form id="citysearch" name="citysearch" method="POST" action="jobs-by-city-results">
<p id='jobsbycitytitle'>Jobs by City</p>
<select name="city" id='jobsbycitymenu'>
<option value="Not Selected">---Select City---</option>
<option value='Abbottabad'>Abbottabad</option>
<option value='Arifwala'>Arifwala</option>
<option value='Attock'>Attock</option>
<option value='Badin'>Badin</option>
</select>
<input type="submit" name="Submit" value=" Go " id='jobsbycitymenubtn' onclick="return validFormDataCity();"/>
</form>
</div>
will be great thankful for your help
Since you are tagging jQuery you could use:
$('#jobsbycitymenu').on('change', function(){
$(this).closest('form').submit();
});
So your whole code (and please remove the inline script) would be:
$(function () {
$('#jobsbycitymenu').on('change', function () {
if (validFormDataCity()) $(this).closest('form').submit();
});
$('#citysearch').submit(function (e) {
e.preventDefault;
return validFormDataCity();
});
function validFormDataCity() {
if (document.getElementById("jobsbycitymenu").value == "Not Selected") {
alert("Please select a City.");
document.citysearch.jobsbycitymenu.focus();
return false;
}
return true
}
});
Demo
For plain Javascript you can use this.

using jquery to hide and show buttons on option change on the dropdown

I'm trying to display different buttons on selecting different field from the drop down. here's my code, it's working partialy only for the first item in the dropdown. Please advice what's wrong with my code:
<select id="my_id">
<option value="select">--Select--</option>
<option value="foo">foo</option>
<option value="bear">bear</option>
</select>
<div id="display_bt1" style="display:none;">
<input type="button" value="bt1" onclick ="" >
</div>
<div id="display_bt2" style="display:none;">
<input type="button" value="bt2" onclick ="" >
<script>
$(document).ready(function(){
$('#my_id').change(function() {
if ($(this).val() == 'foo') {
$('#display_bt2').show();
} else if ($(this).val() == 'bear'){
$('#display_bt1').show();
} else {
}
});
});
</script>
Some syntax errors, other than that, it should work:
$('#my_id').change(function() {
if (this.value == 'foo') {
$('#display_bt2').show();
} else if (this.value == 'bear') {
$('#display_bt1').show();
}
});
If you want to hide the other div on the change, add a class to each div, for example divClass, then hide that class on each change (of course this is if you want this functionality).
$('#my_id').change(function() {
$(".divClass").hide();
if (this.value == 'foo') {
$('#display_bt2').show();
} else if (this.value == 'bear') {
$('#display_bt1').show();
}
});
You can add name attribute to input element
<select id="my_id">
<option>foo</option>
<option>bear</option>
</select>
<div id="display_bt1" style="display:none;">
<input type="button" value="bt1" name="foo" onclick ="" />
</div>
<div id="display_bt2" style="display:none;">
<input type="button" value="bt2" name="bear" onclick ="" />
</div>
And then you can itterate over array of elements and compare selected option value with input's parent name attribute like this:
$(document).ready(function(){
$('#my_id').change(function() {
$this = $(this);
$('#display_bt1, #display_bt2').each(function() {
$(this).hide();
if($this.val() == $(this).children().attr('name')) $(this).show();
});
});
});
It's maybe not best way how to do it but i tried not modify HTML too much and make code more universal.
jsFiddle code

Is there a way to do this with basic JS DOM?

I need to apply/remove to an input field according to a user's selection in a separate drop down form - but I can't figure out how to target the input's class.
I need to add/remove the 'pageRequired' class from this input:
<input type="text" title="Company Required" name="customfields-tf-2-tf" class="inputclass pageRequired textInput" id="customfields-tf-2-tf" />
When the user selects one of two options from a drop down field. For example:
<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" >
<option value="Owner"<?php if(in_array("Owner",$temp_values)) { ?> selected='selected'<?php } ?>> Owner</option>
<option value="Broker"<?php if(in_array("Broker",$temp_values)) { ?> selected='selected'<?php } ?>> Broker</option>
</select>
If the user selects broker than I want to add the pageRequired class to the first input field and remove it if the user selects Owner.
EDIT- Ok, so here is the code I am working with:
<script type="text/javascript">
function changeClass(myDropdown) {
if (#customfields-s-1-s.selectedIndex == 1 ) {
$('#customfields-tf-2-tf').addClass('pageRequired');
}
else {
$('#customfields-tf-2-tf').removeClass('pageRequired');
}
}
</script>
If you don't want to use JQuery you can also do this with just plain JavaScript:
<script>
function changeClass(obj) {
var input = document.getElementById("customfields-tf-2-tf");
if(obj.value == 'Broker') {
input.className = input.className.replace('pageRequired','');
}
else if(obj.value == 'Owner') {
input.className = input.className + ' pageRequired';
}
}
</script>
<input title="Company Required" id="customfields-tf-2-tf" class="inputclass pageRequired textInput" type="text">
<br>
<select name="matt" onchange="changeClass(this)">
<option value="Owner">Owner</option>
<option value="Broker">Broker</option>
</select>
This can be done very simply using jquery:
Just add the onchange event to your dropdown and then call a function that either removes the class or adds it depending on the dropdown selection
<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" onchange="javascript:changeClass(this);" >
function changeClass(myDropdown) {
if (myDropdown.selectedIndex == 1 ) {
$('#customfields-tf-2-tf').addClass('pageRequired');
}
else {
$('#customfields-tf-2-tf').removeClass('pageRequired');
}
}
Here are the links on use:
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/

Categories