Develop Reference

jquery show/hide div after already showing a div from a dropdown

So i using a modal, than when loaded, the first select option shows two divs. I got that to function properly, but now i want it to show specific divs based on the third dropdown. Basically, they are choosing one of two options from the top. depending on what those are it displays two more drop downs. they choose the second one, and than depending on what they do for the third dropdown, it will display the next bit of divs. But no matter where or how i place to pull the value and declare it, its not responding, nor showing the next set of divs. Heres the code :
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<center>Owner Controls</strong>
<hr>
<?php echo form_open(base_url('admin/work/owner_control'), 'class="form-container"'); ?>
<div class="form-group">
<label for="chng_fun">Mine or Refinery:</label>
<select id="chng_fun" name="chng_fun" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select</option>
<option value="mine">Mines</option>
<option value="refinery">Refineries</option>
</select>
<span id="chng_funx" class="errx"></span>
</div>
<div class="form-group" id="minesli" style="display:none">
<label for="mineslist">Select Mine:</label>
<select id="mineslist" name="mineslist" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select </option>
<?php foreach($mineat as $minev){ ?>
<option value="<?php echo $minev['mi_id'];?>"><?php echo $minev['mname'];?></option>
<?php } ?>
</select>
<span id="mineslistx" class="errx"></span>
</div>
<div class="form-group" id="refineli" style="display:none">
<label for="refinelist">Select Refinery:</label>
<select id="refinelist" name="mineslist" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select </option>
<?php foreach($refneat as $refv){ ?>
<option value="<?php echo $refv['ref_id'];?>"><?php echo $refv['rename'];?></option>
<?php } ?>
</select>
<span id="refinelistx" class="errx"></span>
</div>
<div class="form-group" id="moption" style="display:none">
<label for="moptionsl">Pick Mine Option:</label>
<select id="moptionsl" name="moptionsl" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select </option>
<option value="upgrade">Upgrade</option>
<option value="sell" disabled>Sell</option>
<option value="taxes">Taxes</option>
<option value="destroy">Destroy</option>
</select>
<span id="moptionslx" class="errx"></span>
</div>
<div class="form-group" id="roption" style="display:none">
<label for="roptionsl">Pick Refinery Option:</label>
<select id="roptionsl" name="roptionsl" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select </option>
<option value="upgrade">Upgrade</option>
<option value="sell" disabled>Sell</option>
<option value="taxes">Taxes</option>
<option value="destroy">Destroy</option>
</select>
<span id="roptionslx" class="errx"></span>
</div>
<div class="form-group" id="minupgrade" style="display:none">
<center> FREAKING WORK!</center>
<span id="muppgradex" class="errx"></span>
</div>
<div class="form-group" id="refupgrade" style="display:none">
ROCK ON
<span id="ruppgradex" class="errx"></span>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
</div>
So basically what im trying to pull is the value from moptions1 and roptions1, declare them, and than display minupgrade div if moptions1 is upgrade, and refupgrade div if roptions1 is upgrade. Heres the Javascript:
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
$(document).ready(function(){
$("#chng_fun").change(function(){
var action = $("#chng_fun").val();
if(action == "mine"){
$('#minesli').show('slow');
$('#moption').show('slow');
}else{
$('#minesli').hide('slow');
$('#moption').hide('slow');
}
var choice = $('#moptions1').val();
if(choice == "upgrade"){
$('#minupgrade').show('slow');
}else{
$('#minupgrade').hide('slow');
}
if(action == "refinery"){
$('#refineli').show('slow');
$('#roption').show('slow');
}else{
$('#refineli').hide('slow');
$('#roption').hide('slow');
}
var choice2 = $('#roptions1').val();
if(choice2 == "upgrade"){
$('#refupgrade').show('slow');
}else{
$('#refupgrade').hide('slow');
}
});
});
</script>
I have tried moving variables around, i also tried using a if (action == "mine" && choice == "upgrade") in both itself and inside the action == "mine" as an if else. Ive trie dmoving the var and portion of the code to various places to see if it responds better, but no matter what ive tried its not capturing the value and displaying the divs.

Jquery drop down with hidden form not working after cloning

I have a form with a drop-down with contains names of food items and another with an input field to allow the user to input price. beneath this, i have another drop down with class="IfNotAvailableSelectable" which contains 3 option, with values:0,1,2.
and I have a button called "addMore" to clone everything within the div with class="divContainer"
the following is what I want to achieve:
1.When the user clicks on the "addmore" button, it should clone everything within the div with class="divContainer" and append it to the div with class="addMoreContent". Of which I have been able to do successfully.
2.When the user selects the drop-down with class="IfNotAvailableSelectable" and value =0, it show div with class="thenBuy" , else it should hide it.
now the problem am facing is that, whenever i click the addmore button and select the drop down with option value 1 or 0 or 2, the original cloned div also changes with it,
so e,g: if i select value 1 ,i expect the div with class="thenBuy" to hide but when on the addmore button, and select the dropdown with value = 0, it show the div with class="thenBuy" in the 1st one too,while i don't want it to.
Please help,or if there;s a better solution to this.Will really appreciate.Thank you
HTML:
$(document).ready(function () {
//clone
var divContainer = $(".divContainer");
var addMoreContent = $(".addMoreContent");
var addMoreBtn = $(".addMoreBtn");
var removeItem = $(".removeItem");
addMoreBtn.click(function () {
divContainer.clone(true).appendTo(addMoreContent);
});
removeItem.click(function (e) {
$(this).closest('div').remove();
e.preventDefault();
});
//then buy functionO(when user selects "buy alternative")
$(document).on('change', '.IfNotAvailableSelectable', function () {
console.log($(this).val())
var MainNav = $(this).val();
if (MainNav == 0) {
$(".thenBuy").show();
} else {
$(".thenBuy").hide();
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- card body-->
<div class="card-body bg-white divContainer" >
<!-- delete button -->
<button type="button" class="close col-1 bg-white removeItem" >
<span>×</span>
</button>
<!-- items -->
<select class=" custom-select text-capitalize">
<option >Waakye </option>
<option >Banku</option>
<option >Plain Rice</option>
</select>
<br>
<br>
<!-- price -->
<div >
<input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " >
<!-- "min" above should be the value of the starting price of the selected item and placeholder strating price should be the value of the starting price of the selected item too-->
</div>
<br>
<!-- if item is not available -->
<div style="font-size: medium;" >
<select class="custom-select text-capitalize IfNotAvailableSelectable">
<option value="0" >If item is not available</option>
<option value="1" >Remove it from my order </option>
<option value="2">Cancel entire order</option>
</select>
<br>
<!-- then buy -->
<div class="thenBuy" >
<div>
<span>Then Buy</span>
<select class=" custom-select text-capitalize">
<option >Waakye </option>
<option >Banku</option>
<option >Plain Rice</option>
</select>
</div>
<br>
<!-- price -->
<div >
<span>Price</span>
<input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " >
<!-- "min" above should be the value of the starting price of the selected item and placeholder strating price should be the value of the starting price of the selected item too-->
</div>
</div>
</div>
<!-- end of card body -->
</div>
<br>
<div class="addMoreContent" ></div>
<!-- onclick of add more,display the fiels here -->
<button type="button" class="float-right btn btn-outline-dark btn-sm addMoreBtn">Add More</button>
<br>

With $(".thenBuy") you select all the elements with class name thenBuy you need to use .parent().find(".thenBuy")
To let the new .IfNotAvailableSelectable take change effect after cloned use .IfNotAvailableSelectable
$(document).ready(function () {
//clone
var divContainer = $(".divContainer"),
addMoreContent = $(".addMoreContent"),
addMoreBtn = $(".addMoreBtn"),
removeItem = $(".removeItem");
addMoreBtn.click(function () {
divContainer.clone(true).appendTo(addMoreContent);
addMoreContent.find(".IfNotAvailableSelectable").last().change(); //<<<<<<<<<< trigger the change event for the last/new IfNotAvailableSelectable
});
removeItem.click(function (e) {
$(this).closest('div').remove();
e.preventDefault();
});
//then buy functionO(when user selects "buy alternative")
$(document).on('change', '.IfNotAvailableSelectable', function () {
console.log($(this).val())
var ThisSelect = $(this); // define this
var MainNav = ThisSelect.val(); // get this val
if (MainNav == 0) {
ThisSelect.parent().find(".thenBuy").show(); // use .parent().find
} else {
ThisSelect.parent().find(".thenBuy").hide(); // use .parent().find
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- card body-->
<div class="card-body bg-white divContainer" >
<!-- delete button -->
<button type="button" class="close col-1 bg-white removeItem" >
<span>×</span>
</button>
<!-- items -->
<select class=" custom-select text-capitalize">
<option >Waakye </option>
<option >Banku</option>
<option >Plain Rice</option>
</select>
<br>
<br>
<!-- price -->
<div >
<input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " >
<!-- "min" above should be the value of the starting price of the selected item and placeholder strating price should be the value of the starting price of the selected item too-->
</div>
<br>
<!-- if item is not available -->
<div style="font-size: medium;" >
<select class="custom-select text-capitalize IfNotAvailableSelectable">
<option value="0" >If item is not available</option>
<option value="1" >Remove it from my order </option>
<option value="2">Cancel entire order</option>
</select>
<br>
<!-- then buy -->
<div class="thenBuy" >
<div>
<span>Then Buy</span>
<select class=" custom-select text-capitalize">
<option >Waakye </option>
<option >Banku</option>
<option >Plain Rice</option>
</select>
</div>
<br>
<!-- price -->
<div >
<span>Price</span>
<input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " >
<!-- "min" above should be the value of the starting price of the selected item and placeholder strating price should be the value of the starting price of the selected item too-->
</div>
</div>
</div>
<!-- end of card body -->
</div>
<br>
<div class="addMoreContent" ></div>
<!-- onclick of add more,display the fiels here -->
<button type="button" class="float-right btn btn-outline-dark btn-sm addMoreBtn">Add More</button>
<br>

multiple selectpicker, disable option if selected option in another one

I have multiple select, and user can add more than select (make clone).
In every select includes option, and the same in all select,
on click add button make clone select div.
<select>
<option value="en">English</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
and more,...
I need to make that, when i select English from select one, Disabling the rest.
var stdCountries = $("#countriesContainer").children(".countries").first().clone('.add');
$(document).on('click', '.add',function() {
append_countries();
});
function append_countries() {
var objHtml = stdCountries.clone('.add');
$("#countriesContainer").append(objHtml);
$('.m_selectpicker').selectpicker();
}
/////////////////////////////////////////////////////////
$(".m_selectpicker").selectpicker();
$(document).on("click", ".remove", function(){
if($('#countriesContainer .countries').length > 1)
{
$(this).closest(".countries").remove();
}
else
{
generate('info', 'error');
}
});
$(document).on("change", ".m_selectpicker", function() {
$(this).parents('.countries').find('.lang').attr('name', 'name' + '[' + this.value + ']');
$(this).parents('.countries').find('.lang').attr('value', this.value);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<form class="m-form m-form--fit m-form--label-align-right" id="m_form_1" method="post">
<div class="m-portlet__body">
<div id="countriesContainer">
<div class="form-group m-form__group row countries">
<label class="col-form-label col-lg-2">Language</label>
<div class="col-2">
<select class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
<option value="en">Englsih</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
</div>
<div class="col-lg-6">
<input type='text' class="form-control m-input lang" name="name[]" value=""/>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom add">
add
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom remove">
remove
</a>
</div>
</div>
</div>
</div>
</form>
if you any idea please to help me,
Thanks you
Regards.

<select id="selectOne" class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
<option value="en">Englsih</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
Js
$(document).on("change", "#selectOne", function(){
if($('#selectOne').val() == 'en'){
$('select:not("#selectOne")').attr('disabled', true);​​​
}else{
$('select:not("#selectOne")').attr('disabled', false);​​​
}
});

Displaying options for two select

friends. Faced such a question. I have two select, in each select of the city they are taken from the database, and in the second select - the city that is != To the city from the first select. Help me, pleasee..)
Code
<form action="{{route('countDistance')}}" method="post">
<div class="starter-template">
<select class="selectpicker" name="from" id="from">
#foreach($deps as $depart)
<option>{!!$depart->City!!}</option>
#endforeach
</select>
<select class="selectpicker" name="to" id="to">
#foreach($deps as $depart)
<option>{!!$depart->City!!}</option>
#endforeach
</select>
<button type="submit" class="btn btn-info">Count »</button>
{{ csrf_field() }}
</div>
</form>

I used jquery to accomplish this. For that I had to add first option saying 'Please select' for both. On change of #from select box, I hid the option with the same text from #to select box. And before hiding any option, showed all, so that previously hidden option may be available now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="{{route('countDistance')}}" method="post">
<div class="starter-template">
<select class="selectpicker" name="from" id="from">
<option>Please select</option>
#foreach($deps as $depart)
<option>{!!$depart->City!!}</option>
#endforeach
</select>
<select class="selectpicker" name="to" id="to">
<option>Please select</option>
#foreach($deps as $depart)
<option>{!!$depart->City!!}</option>
#endforeach
</select>
<button type="submit" class="btn btn-info">Count »</button>
{{ csrf_field() }}
</div>
</form>
<script>
$(document).ready(function() {
$("#from").change(function() {
// first show all from #to
$("#to > option").each(function() {
$(this).show();
});
console.log($("#from").val());
var toHide = $("#from").val();
$("#to option:contains('" + toHide + "')").hide();
});
});
</script>

How to display empty values after duplication of form

I have this code javascript to duplicate form , the problem that if I fill in the form and I click on button "Add More" , the form will be duplicated with the same values that I have just filled them in the first form.
How to fix it and get empty fields after duplication form ?
Javascript:
$(document).ready(function() {
var id = 1;
// get item
var item = $("#addparts");
var before = $('#div_button');
// initalize event click
$('#addMore').on('click', function() {
// clone addparts
var clone = item.clone(true);
// remove id
clone.attr('id', '');
// add class duplicate
clone.attr('class', 'duplicate');
// insert duplicate before button div
before.before(clone);
});
});
HTML:
<form action="" method="post" id="sign-up_area" role="form">
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="name[]">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="email[]" id="partsquantity">
</div>
</div>
</div>
<div class="row" id="div_button">
<input type="button" name="addmore" value="Add More" id="addMore">
</div>
<!-- Button -->
<p>
<input type="submit" name="send" class="btn btn-primary">
</p>
</form>

You need to empty the value of input on your clone like this
$(document).ready(function() {
var id = 1;
// get item
var item = $("#addparts");
var before = $('#div_button');
// initalize event click
$('#addMore').on('click', function() {
// clone addparts
var clone = item.clone(true);
// remove id
clone.attr('id', '');
// add class duplicate
clone.attr('class', 'duplicate');
clone.find('input').val(""); // empty input value!
// insert duplicate before button div
before.before(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" id="sign-up_area" role="form">
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="name[]">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="email[]" id="partsquantity">
</div>
</div>
</div>
<div class="row" id="div_button">
<input type="button" name="addmore" value="Add More" id="addMore">
</div>
<!-- Button -->
<p>
<input type="submit" name="send" class="btn btn-primary">
</p>
</form>

You could clear the form after you've appended it:
$('#addMore').on('click', function() {
var clone = item.clone(); // no need for true here
clone.removeAttr('id'); // if you don't want an id attr on the form
clone.addClass('duplicate');
clone[0].reset(); // js method to clear form
before.before(clone);
});