Execute javascript on new born DOM elements after select change

Execute javascript on new born DOM elements after select change - javascript

i have a problem on new elements created after select change event.
This is my HTML:
<div class="cont-filtri">
<div class="form-group uno">
<label>Marca <span class="mandatory">*</span>:</label>
<select name="brad" class="form-control" required>
<option value="">Scegli</option>
<option value="1">Yamaha</option>
</select>
</div>
<div class="form-group due hide">
<label>Modello <span class="mandatory">*</span>:</label>
<select name="model" class="form-control" required disabled>
<option value="">Scegli</option>
<option value="1">Super bella</option>
</select>
</div>
<div class="form-group tre hide">
<label>Anno :</label>
<select name="year" class="form-control" disabled>
<option value="">Scegli</option>
<option value="1">2017</option>
</select>
</div>
</div>
<button type="button" class="btn btn-default aggiungi-filtro"><i class="fa fa-plus" aria-hidden="true"></i> Aggiungi filtro</button>
And this is my javascript :
$(".aggiungi-filtro").click(function(){
$(this).before('<hr/><div class="cont-filtri"><div class="form-group uno"> <label>Marca <span class="mandatory">*</span>:</label> <select name="brad" class="form-control" required> <option value="">Scegli</option> <option value="1">Yamaha</option> </select> </div><div class="form-group due hide"> <label>Modello <span class="mandatory">*</span>:</label> <select name="model" class="form-control" required disabled> <option value="">Scegli</option> <option value="1">Super bella</option> </select> </div><div class="form-group tre hide"> <label>Anno :</label> <select name="year" class="form-control" disabled> <option value="">Scegli</option> <option value="1">2017</option> </select> </div></div>')
});
$(".uno select").on("change",function(){
$(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".due").removeClass("hide");
});
$(".due select").on("change",function(){
$(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});
Here is the css for hidden elements:
.hide{
display:none;
}
This is my fiddle:
CLICK HERE
I'm trying to have the same control on new born elements.
For instance, when i switch my first select option, another select shows-up and so on.
This works perfectly on my first html element, but it doesn't work on the new borns.
Can you please help me?
Thank you!

You also can use delegation like this too:
$(document).on("change", ".uno select", function(){
....
});

With your code, the event listener is registered only on the pre-existing select.
You can either register a new listener for the new select in the method that creates it or use a listener that is registered a the document level as already suggested in other comments.

You can use event delegation, attaching the listener to a parent element (via JQuery selector or the document itself):
$(document).on("click", ".aggiungi-filtro", function(){
$(this).before('<hr/><div class="cont-filtri"><div class="form-group uno"> <label>Marca <span class="mandatory">*</span>:</label> <select name="brad" class="form-control" required> <option value="">Scegli</option> <option value="1">Yamaha</option> </select> </div><div class="form-group due hide"> <label>Modello <span class="mandatory">*</span>:</label> <select name="model" class="form-control" required disabled> <option value="">Scegli</option> <option value="1">Super bella</option> </select> </div><div class="form-group tre hide"> <label>Anno :</label> <select name="year" class="form-control" disabled> <option value="">Scegli</option> <option value="1">2017</option> </select> </div></div>')
});
$(document).on("change", ".uno select", function(){
$(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".due").removeClass("hide");
});
$(document).on("change", ".due select", function(){
$(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});

In your case you can avoid the event delegation because you may act differently.
I suggest you to use clone(true): Create a deep copy of the set of matched elements preserving the event handlers.
In this way you will reduce your code.
$(".aggiungi-filtro").click(function () {
$(this).before('<hr/>')
.before($('.cont-filtri:first').clone(true)
.find('select.form-control').val('').end()
.find(".form-group:gt(0)").addClass("hide").end());
});
$(".uno select").on("change", function () {
$(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".due").removeClass("hide");
});
$(".due select").on("change", function () {
$(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont-filtri">
<div class="form-group uno">
<label>Marca <span class="mandatory">*</span>:</label>
<select name="brad" class="form-control" required>
<option value="">Scegli</option>
<option value="1">Yamaha</option>
</select>
</div>
<div class="form-group due hide">
<label>Modello <span class="mandatory">*</span>:</label>
<select name="model" class="form-control" required disabled>
<option value="">Scegli</option>
<option value="1">Super bella</option>
</select>
</div>
<div class="form-group tre hide">
<label>Anno :</label>
<select name="year" class="form-control" disabled>
<option value="">Scegli</option>
<option value="1">2017</option>
</select>
</div>
</div>
<button type="button" class="btn btn-default aggiungi-filtro"><i class="fa fa-plus" aria-hidden="true"></i> Aggiungi
filtro
</button>

Related

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop

You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>

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);
}
});

How to replace class name inside div id?

HTML:
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
How to replace col-md-6 with col-md-4 inside div id payment_group by using jQuery? Sorry for my weak English.

Normally, you could simply do this:
$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
//Or
$('#payment_group .col-md-6').addClass("col-md-4").removeClass("col-md-6"‌);
The toggle option is not the best, it will add a class if it does not exist and remove it if it does... It's a bit more concise tough...

<div id="payment_group">
<div class="col-md-6" id="changeclass">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
add one id named="changeclass" for col-md-6 div
then in jquery
$("#changeclass").toggleClass('col-md-4');

You can use $("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")
Working demo
$("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")
console.log("elements with class col-md-4: " + $("#payment_group .col-md-4").length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>

Use addClass() and removeClass()
$("#payment_group .col-md-6").addClass('col-md-4').removeClass('col-md-6')
.col-md-4 {
color: red
}
.col-md-6 {
color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>

You can set the class regardless of what it was.
$("#payment_group .col-md-6").attr("class", "class-name-you-want-to-assign");

$("#payment_group").find(".col-md-6").addClass("col-md-4");
$("#payment_group").find(".col-md-6").removeClass(".col-md-6");

Try with this one
$( "#payment_group div:first-child" )
$( this ).removeClass( ".col-md-6" );
$( this ).addClass( ".col-md-4" );
});
Thanks

Try this to remove the class
$(selector).removeClass(classname,function(index,currentclass))
And to add
$(selector).addClass(classname,function(index,currentclass))
You can check w3schools site here.
and for add class, check this.

I think this will going to help u as well !
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
});
</script>
</head>
<body>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
<button id="gete">Submit</button>
</body>
</html>

You can use jQuery's addClass and removeClass for this:
$('#payment_group').addClass("col-md-4").removeClass("col-md-6");

jQuery Chained Input

I've done some research but haven't been able to find and answer.
I have 1 text input and 1 selectbox.
If the selected value of the selectbox is 2, I 'd like the textbox to be hidden
If the selected value of selectbox is 1, the textbox should appear.
Here is my code:
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" class="form-control">
</div>
</div>

You can assign an id to the form-group then use that to hide/show that element
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" name="fiyatlandirma">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group" id="fiyat-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="fiyat" class="form-control"/>
</div>
</div>
then
//dom ready handler - wait for the element to load
jQuery(function($){
//change event handler to trigger when the select is changed
$('select[name="fiyatlandirma"]').change(function(){
//hide or display the group element based on the value of select
$('#fiyat-group').toggle(this.value == '2')
}).change();//to set the initial display state
})
http://learn.jquery.com/
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/change
http://api.jquery.com/toggle

Try this:
$(document).ready(function(){
$("select.form-control").change(function(){
if($(this).val()=="1")
$("input[name=fiyat]").hide();
else
$("input[name=fiyat]").show();
});
});

You can give id to all three fields: select, input label and input box
$(document).ready(function () {
$("#pricing").change(function () {
if ($(this).val() == "1") {
$("#textbox").hide();
$("#textLabel").hide();
} else {
$("#textbox").show();
$("#textLabel").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing" id="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" id="textbox" class="form-control">
</div>
</div>

using java script
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" id="select" name="fiyatlandirma" onclick="hide()">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2" >Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" id="fiyat" name="fiyat" class="form-control">
</div>
</div>
<script>
function hide(){
var select = document.getElementById("select").selectedIndex;
var input = document.getElementById("fiyat");
if(select == 1)
input.style.visibility= "hidden";
else if(select == 2)
input.style.visibility= "visible";
}
</script>

How to put option value into another input

When the user selects an option from the list, i want to put the option values into the space - however again every time i try, it goes wrong. Can anyone help or point me in the right direct with this please - thanks.
This is the form code.
<form>
<div class="form-group">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon"><i class="gi gi-user"></i></span>
<select class="form-control input-md" id="subscription" name="subscription">
<option value="1">Choose Plan</option>
<option value="Solo">Solo - 1</option>
<option value="Double">Double - 2</option>
<option value="Triple">Triple - 3</option>
</select>
</div>
</div>
<div class="col-xs-3">
<input id="plan" type="text" name="plan" class="form-control input-md" value="">
</div>
</div>
</form>

Assuming you're using JQuery, try this code:
// JQuery
$("#subscription").on('change', function(){
$('#plan').val($(this).val());
});
// Vanilla JS
var subscription = document.getElementById('subscription');
var plan = document.getElementById('plan');
subscription.onclick = function(){
plan.value = this.value;
}

Develop Reference

JavaScript is the programming language of the Web.

Execute javascript on new born DOM elements after select change - javascript

You also can use delegation like this too: $(document).on("change", ".uno select", function(){ .... });

With your code, the event listener is registered only on the pre-existing select. You can either register a new listener for the new select in the method that creates it or use a listener that is registered a the document level as already suggested in other comments.

Related

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

multiple selectpicker, disable option if selected option in another one

How to replace class name inside div id?

jQuery Chained Input

How to put option value into another input

Categories

Resources