Develop Reference

how to apply reset button selected value

code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
<div style="margin-top:2%;display:none; " id="filt_box" id="reset">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown" id="filter_seller_user" name="filter_seller_user[]"
multiple="multiple">
#foreach($seller_user as $key=>$value)
<option value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown" id="filter_generated_by_user"
name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="btn_filter_submit" onclick="show_reset_data();">Clear</button>
</div>
</div>
using multiple try javascript code but not apply any changes
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script>
function show_reset_data() {
$("reset").each(function() { this.selectedIndex = 0 });
}
function show_reset_data() {
document.getElementById("reset").reset();
}
function show_reset_data() {
document.getElementById("reset").value="";
}
</script>

I inserted class="reset" in each selected field means input field and button clear Id="reset" create and simple write javascript code.
<div style="margin-top:2%;display:none; " id="filt_box">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown reset" id="filter_seller_user" name="filter_seller_user[]" multiple="multiple">
#foreach($seller_user as $key=>$value)
<option style = "font-size:13px;" value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown reset" id="filter_generated_by_user" name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option style = "font-size:13px;" value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option style = "font-size:13px;" value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control reset">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="reset" style="background-color: #ae3029; color:white;">Clear</button>
</div>
javascript code
$("#reset").on('click', function () {
$('.reset').val('');
});

How to check v-if condition with a arrray in vue js html?

I am selecting multiple options from select and based on the selected options i need to dynamically add rows. How can It be possible. If I select 1 option ata time. I am getting the result. But If I select multiple options, I am not able to get the result.
If I select options 1 and 2 from select. I need to add rows corresponding to options 1 and 2
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
<div class="row" v-if="selectedType==='1'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="selectedType==='2'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
My vue js code is
new Vue({
el: "#addForm",
data: {
selectedType: '',
address:'',
fullname:'',
released:''
},
methods: {
}
});
I need to select multiple options and based on the same, I need to add the rows dynamically.
Now if I select one option I am able to achieve the result as shown in my code (Above code) but,
I need to select multiple options and based on the options selected, I need to add rows dynamically. ie. If i choose option 1 and 2, i need to add the rows for both options 1 and 2.
Please help me to have a solution.

First of all, selectedType shouldn't be a string but an array. You should have received a warning in the console. Secondly, you will never get more than 1 match if you're using === since you're only looking for if the value matches, you need to use some kind of array value finder like include
https://codesandbox.io/s/0pwjq98j5v
<template>
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select #change="show" class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
</div>
<div class="row" v-if="selectedType.includes('1')">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="selectedType.includes('2')">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
selectedType: [],
address: "",
fullname: "",
released: ""
};
},
methods: {
show() {
console.log(this.selectedType);
}
}
};
</script>

selectedType should be an array, and use selectedType.includes() in the condition of v-if.
const app = new Vue({
el: "#addForm",
data: {
selectedType: [],
address:'',
fullname:'',
released:''
},
methods: {
}});
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
<div class="row" v-if="selectedType.includes('1')">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="selectedType.includes('2')">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>

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

How to append child div into a parent div using jquery on the click of a button

<div class="addMore">
<div class="row addPlus">
<p class="emergencyTitle">Child 1</p>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">Student Name</label>
<input type="text" class="form-control" name="ch1_name">
</div>
<div class="form-group">
<label for="name">Class</label><br>
<select name="ch1_class">
<option value=""> 1 </option>
<option value=""> 2</option>
<option value=""> 3 </option>
</select>
</div>
</form>
</div>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">DOB</label>
<input type="text" class="form-control" name="ch1_dob" id="datepicker">
</div>
<div class="form-group">
<label for="name">Section</label><br>
<select name="ch1_secion">
<option value=""> A </option>
<option value=""> B </option>
<option value=""> C </option>
</select>
</div>
</form>
</div>
</div>
</div>
On the click of a button I am doing this ..
$child = $('.addPlus')
$('.addMore').append($child)
But I cannot seem to add the addPlus div, how over $('.addMore').append("hi") works fine. Can anyone help me out where I am going wrong.

if you want to clone the item - you can use
$('.addPlus').first().clone().appendTo('.addMore')

.addPlus is already appended to .addMore, so your jQuery would work but have no effect.
Assuming you want to copy the existing instance of .addPlus you should call clone() on it before appending it to the parent, like this:
var $newChild = $('.addPlus').first().clone()
$('.addMore').append($newChild)

Why does the change event never fire on a select box?

I've 3 list box like this one with a different id and name:
<div class="col-md-4 column">
<div class="form-group">
<input type="hidden" name="identityCardList[0].identityCardId">
<label for="identityCardType1" class="col-sm-3 control-label">Type</label>
<div class="col-sm-9">
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label for="idCardValue1" class="col-sm-3 control-label">Valeur</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="idCardValue1" name="identityCardList[0].value" placeholder="Entrer la valeur">
</div>
</div>
<div class="form-group">
<label for="expirationDateCard1" class="col-sm-3 control-label">Expiration</label>
<div class="col-sm-9">
<div class="input-group date" id="expirationDateCardPicker1">
<input type="text" id="expirationDateCard1" name="identityCardList[0].expiration" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label><input type="checkbox" name="identityCardList[0].lodgerOwn" value="">Garde sur eux</label>
</div>
</div>
</div>
</div>
<div class="col-md-4 column">
...
</div>
<div class="col-md-4 column">
...
</div>
In the list box, I've this kind of value:
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
<option value=""></option>
<option value="1" data-card-expiration="false">Certificat de naissance</option>
<option value="2" data-card-expiration="false">N.A.S</option>
<option value="3" data-card-expiration="true">N.A.M</option>
</select>
When I select a value in the list box, I'd like to read the data-card-expiration value and disable expiration input text if needed.
This is my generic attempt:
$("select[id^='identityCardType']").on('change', 'select', function (e){
debugger;
if($(e.target).data("data-card-expiration")){
//disabled the nearest component expirationDateCard after this select
}
});
Why does the change event never occur?

You don't need to pass the selector 'select' to .on() just remove it. the selector filters the descendant of element.
$("select[id^='identityCardType']").on('change', function (e){ //Removed 'select'
});

Try this easy code
$("select#identityCardType1").on('change', function (e){
if($(this).data("cardexpiration")){
//disabled the nearest component expirationDateCard after this select
}
});