I have 2 dropdowns (EmployeeType, Type) and a textbox (Rate) and I just want to hide "Type" and "Rate" according to the selected value of "EmployeeType". I've done it with no issues to the "Rate", but for the "Type" only the dropdown hides not the label. Can anyone help me to hide the label of the dropdown as well?
<div class="control-group">
<label class="control-label" for="Designation">Employee Type</label>
<div class="controls">
<select name="Designation" onchange="ajaxRate(this)" id="Designation">
<option value="">--Select Employee Type--</option>
<option value="Center">Center</option>
<option value="Visiting">Visiting</option>
<option value="Other">Other</option>
</select>
<span id="ajax_img3"></span>
</div>
<!-- designation-->
<br/>
<!-- 2019-03-18 Visiting Type -->
<div class="control-group">
<label class="control-label" for="Type">Type</label>
<div class="controls">
<select name="Type" id="TypeValue">
<option value="">--Select Type--</option>
<option value="Yes">Regular</option>
<option value="No">Visiting</option>
</select>
</div>
</div>
<div class="control-group" id='rate'>
<label class="control-label" for="Rate">Hourly Rate</label>
<div class="controls">
<input type="number" name="Rate" id='rateValue'/>
</div>
</div>
#include('includes.footer')
<script>
$(document).ready(function () {
$("#rate").hide();
// $("#Type").hide();
});
function ajaxRate(x) {
if (x.value == 'Center') {
$("#rate").hide();
$("#rateValue").val('0');
$("#TypeValue").show();
} else {
$("#rate").show();
$("#rateValue").val('0');
$("#TypeValue").hide();
}
}
$( document ).ready(function()
{
$("#rate").hide();
// $("#Type").hide();
});
function ajaxRate(x)
{
if(x.value=='Center')
{
$("#rate").hide();
$("#rateValue").val('0');
$("#TypeValue").show();
$("#TypeValue").parents(".control-group").show();
}
else
{
$("#rate").show();
$("#rateValue").val('0');
$("#TypeValue").hide();
$("#TypeValue").parents(".control-group").hide();
}
}
You have to hide full div using parents or you have to add any id to main div to hide.
function ajaxRate(x) {
if(x.value=='Center')
{
$("#rate").hide();
$("#rateValue").val('0');
$("#TypeValue").closest('div.control-group').show();
}
else
{
$("#rate").show();
$("#rateValue").val('0');
$("#TypeValue").closest('div.control-group').hide();
}
}
Related
HI i have a example with me when if select the drop down list - price by recyclables a hidden field apppear but how can i when select the Service charger the hidden field disappear
I have try using .attr to add back but it seems to be not working
$("#select-price-mode").change(function() {
if (this.value === "Price By Recyclables") {
$('.col').removeAttr('hidden');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col">
<label for="select-price-mode" class="col-form-label">Price Mode</label>
<select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
<option selected disabled value="">Select ....</option>
<option value="Price By Recyclables">Price By Recyclables</option>
<option value="Service Charger">Service Charger</option>
</select>
</div>
<div class="col" hidden>
<label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
<select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
<option selected disabled value="">Select ....</option>
</select>
</div>
i think this will solve your issue
$("#select-price-mode").change(function() {
if (this.value === "Price By Recyclables") {
$('.col').removeAttr('hidden');
} else {
$('.col').attr('hidden', '');
}
});
I want to set attribute name & show select option if the selected text is not "Super Admin" and unset the attribute name & hide the select option if the selected text is "Super Admin".
<div class="form-group">
<select id="role_user" name="role" class="form-control" required>
<option value="">Select role user</option>
<option value="Admin">Admin</option>
<option value="Supervisor">Supervisor</option>
<option value="Super Admin">Super Admin</option>
</select>
</div>
The element that I want to show & hide:
<div class="form-group" id="company" style="display: none">
<label>Company</label>
<select id="company_i" class="form-control">
<option value="">Select Company</option>
#foreach ($company as $cp)
<option value="{{ $cp->id }}">{{ $cp->name }}</option>
#endforeach
</select>
</div>
JQuery code:
$(document).ready(function() {
$('#role_user').change(function() {
if ($('#role_user option:selected').text() != "Super Admin") {
$('#company').show();
$('#company_i').attr('name', 'company_id');
} else if ($('#role_user option:selected').text() == "Super Admin") {
$('#company').hide();
$('#company_i').removeAttr("name");
}
})
});
I have tried it using the code above, but only the set & remove name attribute are working. The show & hide not working.
$(document).ready(function () {
$('#role_user').change(function () {
if ($(this).val() != "Super Admin") {
$('#company').show();
$('#company_i').attr('name', 'company_id');
} else {
$('#company').hide();
$('#company_i').removeAttr("name");
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<select id="role_user" name="role" class="form-control" required>
<option value="">Select role user</option>
<option value="Admin">Admin</option>
<option value="Supervisor">Supervisor</option>
<option value="Super Admin">Super Admin</option>
</select>
</div>
<div class="form-group" id="company" style="display: none">
<label>Company</label>
<select id="company_i" class="form-control">
<option value="">Select Company</option>
</select>
</div>
On the front-end I'm asking the user 2 questions, the first one visible, the second will be visible depending on the firs answer. But somehow my removeClass is not working as expected (not working at all)
<div class="form-group col-md-4 md-form">
<label for="savingcontratos">Cancelamento de Contratos?</label>
<select class="mdb-select md-form" id="savingcontratos" searchable="Pesquisar">
<option value=""></option>
<option value="0">Sim</option>
<option value="1">Não</option>
</select>
</div>
<div class="form-group col-md-4 md-form invisible" id="divcontratos">
<label for="txtcontratos">Insira os contratos envolvidos</label>
<input type="text" class="form-control" id="txtcontratos" value="0">
</div>
And the functions I'm using are:
$('#savingfinanceiro').on('change',function () {
var component = $("#divfinanceiro");
makevisible($('#savingfinanceiro').val(), component);
});
function makevisible(value,component){
if (value === "0"){
component.removeClass("invisible");
}
}
Any help would be greatly appreciated.
as pointed out in the comments #savingfinanceiro and #divfinanceiro do not exist in your html. You must have overlooked that. In the following snippet I have fixed that. There, #savingfinanceiro, from the <select>, was changed to #savingcontratos and var component = $("#divfinanceiro");, the 'to-hide' <div> was changed to var component = $("#divcontratos");. After applying these changes your code should work as expected.
$('#savingcontratos').on('change', function() {
var component = $("#divcontratos");
makevisible($('#savingcontratos').val(), component);
});
function makevisible(value, component) {
if (value === "0") {
component.removeClass("invisible");
} else {
component.addClass("invisible");
}
}
.invisible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-4 md-form">
<label for="savingcontratos">Cancelamento de Contratos?</label>
<select class="mdb-select md-form" id="savingcontratos" searchable="Pesquisar">
<option value=""></option>
<option value="0">Sim</option>
<option value="1">Não</option>
</select>
</div>
<div class="form-group col-md-4 md-form invisible" id="divcontratos">
<label for="txtcontratos">Insira os contratos envolvidos</label>
<input type="text" class="form-control" id="txtcontratos" value="0">
</div>
Hope this helps!
Below is part of my CSS code for HTML. I want all the inputs to be filled when the button "register" is pressed. If I don't have an address, a little pop-up warning comes right up to the input field. I would like the same with a drop-down menu. I know the code gives you the warning when the button "register" is pressed because of the JavaScript code. But I am wondering: is it possible to change the location of that warning from the "register" button to the drop-down menu?
Thank you for all your help.
<html lang="en">
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action=".">
<div class="form-group">
<label for="adress" class="form-text">Adress</label>
<input type="text" class="form-control" id="adress" placeholder="Rainbow 3" name="adress" required>
</div>
<div class="form-row">
<div class="form-group col-md-8" style="height:70px">
<label for="inputState" class="form-text">State</label>
<select id="inputState" class="form-control" name="state" required>
<option selected disabled value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button href="/oglasi/" type="submit" class="btn btn-outline-secondary" role="button" aria-pressed="true" onclick="check(this)">Register</button>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
if (document.getElementById('inputState').value == "0") {
input.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
</form>
</div>
</body>
</html>
you need setCustomValidity to select element
function check(input) {
const inputStateElm = document.getElementById('inputState');
if (inputStateElm.value == "0") {
inputStateElm.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
--
Full code
<html lang="en">
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action=".">
<div class="form-group">
<label for="adress" class="form-text">Adress</label>
<input type="text" class="form-control" id="adress" placeholder="Rainbow 3" name="adress" required>
</div>
<div class="form-row">
<div class="form-group col-md-8" style="height:70px">
<label for="inputState" class="form-text">State</label>
<select id="inputState" class="form-control" name="state" required>
<option selected disabled value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button href="/oglasi/" type="submit" class="btn btn-outline-secondary" role="button" aria-pressed="true" onclick="check(this)">Register</button>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
const inputStateElm = document.getElementById('inputState');
if (inputStateElm.value == "0") {
debugger;
inputStateElm.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
</form>
</div>
</body>
</html>
I was wondering how to add a class to a div if the option has the value selected. For example I'm making a website for my cousin's business, we want an easy way to shuffle through menus.
<code>
<div id="select"><form>
Menu:
<select name="select" class="form-control">
<option value="drinks">Drinks</option>
<option value="breakfast">Breakfast</option>
</select>
<input type="submit" value="Submit">
</form>
</code>
I would like if the value is breakfast to hide the div drinks and show the div breakfast, and also have it reversible. Thank you here's my code on JSFiddle http://jsfiddle.net/t5R9s/
Here it is
$(document).ready(function() {
$(".form-control").change(function() {
if($(this).val() == "drinks") {
$("#drinks").show();
$("#breakfast").hide();
} else {
$("#drinks").hide();
$("#breakfast").show();
}
});
});
Here is the FIDDLE.
You can use javascript. Do you want to do it when you hit submit or just after you make the selection?
[
Fiddle
]
<script type="text/javascript">
function changeClass(){
var myVariable = document.getElementById('control').value;
if(myVariable == "drinks"){
document.getElementById('drinks').className = "";
document.getElementById('breakfast').className = "hide";
}
else if(myVariable == "breakfast"){
document.getElementById('drinks').className = "hide";
document.getElementById('breakfast').className = "";
}
}
</script>
<div id="select">
<form>Menu:
<select name="select" class="form-control" id="control" onChange="changeClass()">
<option value="drinks">Drinks</option>
<option value="breakfast">Breakfast</option>
</select>
</form>
</div>
<div id="drinks">
<h2 align="center">Drinks</h2>
<table width="888" border="" cellpadding="9" class="">..</table>
</div>
<!--Breakfast table-->
<div id="breakfast" class="hide">
<h2 align="center">Breakfast</h2>
<table width="888" border="" cellpadding="9" class="">..</table>
</div>