I would like that when I select the select "reject",
that an input field opens immediately and if I select something else
select something else, this input field is closed again.
<div class="col-md-12 mb-12 mt-3">
<label for="order_status">status:</label>
<select class="form-select form-select" name="order_status" id="order_status">
<option value="">select</option>
<option value="accepted">accepted</option>
<option value="reject" id="rejectID">reject</option>
</select>
</div>
<div id="showDiv" style="display: none">
<input type="text" name="reject_commit">
</div>
<script>
$(function () {
$("select[name='order_status']").click(function () {
if ($("#rejectID").is("reject")) {
$("#showDiv").show();
} else {
$("#showDiv").hide();
}
});
});
</script>
You can do it like this, check the value of your select id, not just the id of the reject option
$(function () {
$("select[name='order_status']").change(function () {
if ($("#order_status").val()=="reject") {
$("#showDiv").css("display","inline");
} else {
$("#showDiv").css("display","none");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 mb-12 mt-3">
<label for="order_status">status:</label>
<select class="form-select form-select" name="order_status" id="order_status">
<option value="">select</option>
<option value="accepted">accepted</option>
<option value="reject" id="rejectID">reject</option>
</select>
</div>
<div id="showDiv" style="display: none">
<input type="text" name="reject_commit">
</div>
If you have id attribute use a id selector, then checks select's (this keyword) value. Dont use click but change handler:
$("#order_status").change(function () {
if (this.value === "reject") {
$("#showDiv").show();
} else {
$("#showDiv").hide();
}
});
Related
I have a form with a select, input and a function that locks my input when an option is selected.
I added a warning that inputs are locked when someone selects an option. I would like to add a function to remove this warning when someone chooses an option with value="".
It's removing my warning but for example when I choose option text 1 then text 2 my warning displays twice and then when I choose a selection with first option it removes warning but only first.
How to change it so that the warning displays only once, and not more times, and removes it after select with option first.
$(function() {
$('#stato').change(function() {
var value = $(this).val(); //Pobranie wartości z tego selecta
if (value == "") {
$('#data_consegna').prop('disabled', false);
$("#error").remove();
} else {
$('#data_consegna').prop('disabled', true);
$('#data_consegna').after('<div id="error" style="color:red;">Input locked</div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-4">
<label>Enabled </label>
<select name="stato" id="stato" class="form-control">
<option value="">Choose</option>
<option value="Text1">Text1</option>
<option value="Text2">Text2</option>
<option value="Text3">Text3</option>
<option value="Text4">Text4</option>
</select>
</div>
<div class="col-4">
<label>Disabled when choose option in select</label>
<input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>
my warning displays twice
You don't check if it's already there or remove it.
removes only first
IDs must be unique, so $("#error").remove(); will only remove the first one. Use classes instead of IDs to remove multiple elements. If you only add once, this would not be an issue; just explaining why it removes only the first.
As noted in the other answer, the best solution is to simply .show()/.hide(), so I won't repeat that here.
To update your code, you can always remove the error, then add it back if needed - this isn't the most efficient as noted above.
Updated snippet:
$(function() {
$('#stato').change(function() {
var value = $(this).val(); //Pobranie wartości z tego selecta
// always remove any existing error
$("#error").remove();
if (value == "") {
$('#data_consegna').prop('disabled', false);
} else {
$('#data_consegna').prop('disabled', true);
$('#data_consegna').after('<div id="error" style="color:red;">Input locked</div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-4">
<label>Enabled </label>
<select name="stato" id="stato" class="form-control">
<option value="">Choose</option>
<option value="Text1">Text1</option>
<option value="Text2">Text2</option>
<option value="Text3">Text3</option>
<option value="Text4">Text4</option>
</select>
</div>
<div class="col-4">
<label>Disabled when choose option in select</label>
<input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>
Also note, as it's using an ID, it can only be used for a single error message.
The simple way to achieve what you require is to have the notification div always contained in the DOM, but hidden, and then hide/show it depending on the state of the select, like this:
jQuery(function($) {
$('#stato').change(function() {
var value = $(this).val();
if (value == "") {
$('#data_consegna').prop('disabled', false);
$("#error").hide();
} else {
$('#data_consegna').prop('disabled', true);
$('#error').show();
}
});
});
#error {
color: red;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-4">
<label>Enabled </label>
<select name="stato" id="stato" class="form-control">
<option value="">Choose</option>
<option value="Text1">Text1</option>
<option value="Text2">Text2</option>
<option value="Text3">Text3</option>
<option value="Text4">Text4</option>
</select>
</div>
<div class="col-4">
<label>Disabled when choose option in select</label>
<input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
<div id="error">Input locked</div>
</div>
I have this code where I have to add a validation that whether 'ALL' option is displayed on multi drop down menu although all other elements will also be available in drop down menu or if some other element is selected from drop down then 'ALL' option will automatically be removed but will be available in drop down. Precisely, either 'ALL' or others get selected in multi drop down .
I am a bit new to jquery.
This is what I am trying:
$('#selectPlayerDropDown').change( function() {
console.log($(this).val()+"tttttt");
console.log($(this).val()=='ALL')
var sel = $('#selectPlayerDropDown').val();
if(jQuery.inArray( "ALL", sel)){
console.log("Well Well");
//sel.find("option:sel(0)").remove();
// $('#selectPlayerDropDown').children('option:not(:first)').detach();
}
console.log(sel+"///////////");
});
Here's the original code
if( $.scoreType == 'PLAYER') {
$(".selectPrintOnSingleOrMultiplePage").addClass('hide');
$('#printForAllPlayersDiv').addClass('hide');
$('#selectPlayerDropDown').find('option').remove().end();
$('#selectPlayerDropDown').append($('<option>', {
value : 'ALL',
text : 'All'
}));
$('#printOrderSelection').removeClass('hide');
$.each($.reservationAndPlayerData.playerData, function(index, object) {
$('#selectPlayerDropDown').append($('<option>', {
value : index,
text : object
}));
});
$(".player").removeClass('hide');
$(".selectPracticeCar").addClass('hide');
$('#selectPlayerDropDown').val('ALL').trigger('chosen:updated');
}
HTML CODE:
<div class=" player hide col-md-12 row">
<label for="select-players" class="col-md-6"
th:text="#{label.competition.score.player.select}">Select
players</label>
<div class="col-md-6">
<fieldset class="form-group">
<select class="form-control chosen-select"
id="selectPlayerDropDown" name="playerIds"
data-placeholder="Choose players ..." multiple="multiple">
</select> <label
class="jqueryValidationErrorClass selectPlayerDropDownLabel hide"
id="player-error" th:text="#{label.competition.player.choose}">Choose
Players</label>
</fieldset>
</div>
</div>
Try below code where you can check if ALL is selected or not and remove the ALL value from array of selected values of the dropdown.
$(document).ready(function(){
$('#selectPlayerDropDown').on('change', function(){
var value = $(this).val();
if(value!='ALL' && value.indexOf('ALL')>-1) {
var index = value.indexOf('ALL');
if (index > -1) {
value.splice(index, 1);
}
$(this).val(value);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class=" player hide col-md-12 row">
<label for="select-players" class="col-md-6"
th:text="#{label.competition.score.player.select}">Select
players</label>
<div class="col-md-6">
<fieldset class="form-group">
<select class="form-control chosen-select"
id="selectPlayerDropDown" name="playerIds"
data-placeholder="Choose players ..." multiple="multiple">
<option>ALL</option>
<option>Player 1</option>
<option>Player 2</option>
<option>Player 3</option>
</select>
<label class="jqueryValidationErrorClass selectPlayerDropDownLabel hide"
id="player-error" th:text="#{label.competition.player.choose}">Choose Players</label>
</fieldset>
</div>
</div>
I have a multidrop form at this fiddle : Here's a link! . at this form only can add multidrop 3 times, i want to make always add this multidrop, and how to save the array data into sql
<div id="Yes1">
<label for="name" >Name</label>
<input type="text" id="name1" name="name1">
<br><br>
<label for="multiDrop" >Multi Drop</label>
<select name="multiDrop1" id="multiDrop1">
<option value=""></option>
<option value="Y">YES</option>
<option value="N">NO</option>
</select>
<br><br>
</div>
Check here to add and remove your elements as per your requirement.
You can remove only that block which you selected No for.
$(document).ready(function() {
$(document).on("change", ".multidrop", function() {
if ($(this).val() == 'Y') {
$clone = $(this).closest(".Yes").clone();
var num = parseInt($(".Yes:last").attr("data-index")) + 1;
$clone.attr("data-index", num);
$clone.attr("id", $clone.attr("id").replace(/\d+/, num));
$clone.find("input,select").each(function() {
var name = ($(this).attr("name")).replace(/\d+/, num);
var id = ($(this).attr("id")).replace(/\d+/, num);
$(this).attr("name", name);
$(this).attr("id", id);
});
$clone.insertAfter(".Yes:last"); //Add field html
} else if ($(this).val() == "N" && $(".Yes").length > 1) {
$(this).closest(".Yes").remove();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Yes1" class="Yes" data-index="1">
<label for="name">Name</label>
<input type="text" id="name1" name="name1" class="name">
<label for="multiDrop">Multi Drop</label>
<select name="multiDrop1" id="multiDrop1" class="multidrop">
<option value="">Select Option</option>
<option value="Y">YES</option>
<option value="N">NO</option>
</select>
<br><br>
</div>
I would recommend to use following approach:
get your repetitive block HTML into a variable;
listen for changes of drop down (using event delegation, selecting by class rather than id);
modify necessary attributes (names, id's, etc) based on global counter to distinguish those dynamic blocks;
const block = `
<div class="block">
<div class="yes">
<label>Name</label>
<input type="text" class="name"></input>
<label>Multi Drop</label>
<select class="multiDrop">
<option value=""></option>
<option value="Y">YES</option>
<option value="N">NO</option>
</select>
</div>
</div>
`;
const addAnotherBlock = () => {
$('#wrapper').append(block);
$('.name:last').attr('name',i++);
};
var i = 0;
$(document).ready(() => addAnotherBlock());
$('#wrapper').on('change', '.multiDrop', function(){
if($(this).val() == 'Y') addAnotherBlock();
else if($(this).val() == 'N' && $('.block').length > 1 && !$(this).closest('.block').is('.block:last')){
$(this).closest('.block').remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper"></div>
I have 3 HTML select under 1 div :
<div id="kurir_list">
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<select disabled class="tarif">
<option select="selected"></option>
<option value="12000">JNE REGULER</option>
<option value="18000">JNE YES</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<select disabled class="tarif">
<option select="selected"></option>
<option value="12000">JNE REGULER</option>
<option value="18000">JNE YES</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<select disabled class="tarif">
<option select="selected"></option>
<option value="12000">JNE REGULER</option>
<option value="18000">JNE YES</option>
</select>
</div>
</div>
</div>
and I have this jquery :
$(".tarif").change(function() {
if ($(".tarif").is(':disabled')) {
alert ("yes you still have disabled element, next button disabled");
} else {
alert ("no, you don't have disabled element");
// check the other select value
$(".tarif").each(function() {
alert($(this).val());
});
}
});
every time a .tarif is selected, I need to check the other two select element value. whether it's still empty or not. but, my jquery code alert all 6 values from all select elements.
how to make jquery to be able to inform me, whether in #kurir_list still have empty select or not. thank you.
Perhaps you can try something like this, look at every select in your wrapper, if any have an empty val() then your variable will be true, in which case you can do something
var emptySelect = false;
$('#kurir_list select').each(function(){
if (!$(this).find('option:selected').val()) {
emptySelect = true;
}
});
alert(emptySelect);
My code don't seem to work.
So i have a div like this:
<div class="abc">
<form>
**some input tags**
then this:
<select>
<option value="" onclick="myfx1()">yes</option>
<option value="" onclick="myfx2()">no</option></select>
And this is my js code:
<script type="text/javascript">
function myfx1(){
document.getElementById("hid").style.visibility="hidden";
}
function myfx2(){
document.getElementById("hid").style.visibility="visible";
}
</script>
***************and below is the div that has to appear when no is selected**********************
<div id="hid">
<select>
**some options**
</select>
<font>
**some text**
</font>
**some more textarea and input tags**
</div>
**end of the div**
then it ends with a button:
<input type="button" style="float:right" value="Go">
</div></form>
<select onchange='myfx1(this.value)'>
<option value="1" >yes</option>
<option value="0" >no</option></select>
<script type="text/javascript">
function myfx1(value){
if(value==1) {
document.getElementById("hid").style.visibility="hidden";
}else {
document.getElementById("hid").style.visibility="visible";
}
}</script>
HTML
<select name='options' id="select">
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<div id="hid">
Test
</div>
JS
var elem = document.getElementById("hid");
document.getElementById('select').addEventListener('change', function(){
if(this.value == 'yes'){
elem.style.visibility="visible";
}else{
elem.style.visibility="hidden";
}
})
$("#YourSelectBoxID").change(function(){
if($(this).val() == "YourDesiredConditionForCheckWhichValueIsSelected") {
$(".abc").hide();
} else {
$(".abc").show();
}
});