We Keep Coding

Automatically insert the input form by selectpicker

I want to make auto input by selectpicker then calculate that form, but my code below is not auto input except I click first the input form, the calculate javascript is working but I want to make the Input Price automatically has value when i select the package & trip without click the input form first.
sorry for my bad english grammar and i just started learning programming. thank you, this my code below :
HTML
<label>Package</label>
<select onblur="findTotal()" class="selectpicker" id="package">
<option value="" disabled selected>Select package...</option>
<option value="Engagement">Engagement</option>
<option value="Wedding">Wedding</option>
<option value="Other">Other</option>
</select>
<br/>
<label>Trip</label>
<select onblur="findTotal()" class="selectpicker" id="trip">
<option value="" disabled selected>Select trip...</option>
<option value="shorttrip">Short Trip</option>
<option value="longttrip">Long Trip</option>
</select>
<br/><br/>
<label>Package Price</label>
<input onblur="findTotal()" type="text" name="qty" id="packageprice" placeholder="autoinput by selectpicker" />
<br/>
<label>Trip Price</label>
<input onblur="findTotal()" type="text" name="qty" id="tripprice" placeholder="autoinput by selectpicker" />
<br/>
<label>Tip</label>
<input onblur="findTotal()" type="text" name="qty" placeholder="manual input" />
<br/><br/>
<label>Total Price</label>
<input type="text" name="result" id="total" />
JAVASCRIPT
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
var paket = document.getElementById('package').value;
var trp = document.getElementById('trip').value;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
if (paket == "Engagement") {
document.getElementById('packageprice').value = "1000";
} else if (paket == "Wedding") {
document.getElementById('packageprice').value = "2000";
} else {
document.getElementById('packageprice').value = "0";
}
if (trp == "shorttrip") {
document.getElementById('tripprice').value = "3000";
} else if (trp == "longttrip") {
document.getElementById('tripprice').value = "4000";
} else {
document.getElementById('tripprice').value = "0";
}
document.getElementById('total').value = tot;
}
or you can view the code on JS Fiddle here : http://jsfiddle.net/ryh7vpwa/5/

You should use oninput instead of onblur on the elements implementing findTotal function
<select oninput="findTotal()" class="selectpicker" id="package">
<option value="" disabled selected>Select package...</option>
<option value="Engagement">Engagement</option>
<option value="Wedding">Wedding</option>
<option value="Other">Other</option>
</select>
<br/>
<label>Trip</label>
<select oninput="findTotal()" class="selectpicker" id="trip">
<option value="" disabled selected>Select trip...</option>
<option value="shorttrip">Short Trip</option>
<option value="longttrip">Long Trip</option>
</select>

How to select and get two input value?

I have an issue when I select an option it will get the input value perfectly but I want to add one more input value which is email so for example,
when I select (Elvis) option & get two value phone and email in different input field.
<select class="name" name="name[]">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber[]" value="" >
<input type="text" class="email" name="email[]" value="" >
<br />
<select class="name" name="name[]">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber[]" value="" >
<input type="text" class="email" name="email[]" value="" >
<br />
here is script
<script>
$(document).ready(function() {
$('.name').live('change', function() {
$(this).next($('.phonenumber')).val($(this).find('option:selected').attr('data-phonenumber'));
})
});
</script>

Hope it helps. I've used jquery
-edit----
code indent and added comments
//body render wait
$(document).ready(function (){
//loop selects with "name" class a attach change callback on each
$('.name').each(function(idx, elem){
$(elem).change(function(){
//get selected option element
var option = $(this).find(':selected');
//get phone number data
var p = $(option).data('phonenumber');
//get email data
var e = $(option).data('email');
//find next phonenumber input and set value
$(elem).parent().find('.phonenumber').val(p);
//find next email input and set value
$(elem).parent().find('.email').val(e);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tamplate">
<select class="name">
<option value="">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber" value="" >
<input type="text" class="email" name="email" value="" >
</div>
<div class="tamplate">
<select class="name">
<option value="">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber" value="" >
<input type="text" class="email" name="email" value="" >
</div>

Jquery On change array ID

I have multiple selector on loop in php code
var new_acc = $("div[id^=new_acc]").hide();
for (var i = 1; i <= id; i++) {
$('#reason_change\\['+id+'\\]').change(function(e) {
$( "#reason_change\\["+id+"\\] ").show();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
if i click on change my selctor id = reason_change[2] i wanna show id="new_acc[2]" showing

Your JS doesn't need the loop and doesn't need to reference the individual element IDs, because you can select all of the select elements at once and bind a single change handler to them, then within the handler use this to reference the changing element and (DOM navigation method) .next() to get its associated div element:
$("select[id^=reason_change]").change(function() {
$(this).next().show();
});
If you wanted to make it so that the div is only shown when certain values are selected in the select element, and hidden otherwise, you can do something like this:
var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if(this.value === "2") { // show only if certain option is selected
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>

var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if($(this).val() === "2"){
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]">
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>

How display listbox option based on a variable value using jquery?

I have a select box with options now I want to show only those options which value id is greater than the user input value.
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something</option>
<option value="14" hidden>Something</option>
<option value="20" hidden>Something</option>
</select>
this is my select box. User will input a value based on that i want only the options which value is greater then the user input to show. Please help me on this.

You need to use .filter() to filtering options tag. In callback of function check that value of every option is greater than user input value.
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>

You cn try this:
$(document).ready(function(){
$("#txtUserInput").keyup(function(){
getUserInput(this);
});
});
function getUserInput(_this){
var userInput=parseInt($.trim($(_this).val()));
if(userInput!=null && userInput != isNaN){
$("#dtime option").each(function(){
var option=parseInt($.trim($(this).val()));
if(option!=0 && option<userInput){
$(this).css("display","none");
}
else{
$(this).css("display","block");
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtUserInput" />
<br/><br/>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>
<br/>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<select class="form-control" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" >Something</option>
<option value="14" >Something</option>
<option value="20" >Something</option>
</select>
<input id="inputData" value="0">
</html>
here is jquery code
$("#inputData").on('blur', function(){
var inputd = parseInt($(this).val());
$("#dtime option").each(function(){
if(parseInt($(this).val()) <= inputd ){
$(this).hide();
}
});
});

How can I do calculations using Jquery and output them in html?

I want to calculate percentage using javascript.
If the selected value in place1 & place2 is not equal then the calculation should be displayed in both flvalue & flvalues.
Ex: If value is 1000 and selected percent is 10 and selected place1 & place2 value is equal then flvalue should be 1100.
If value is 1000 and selected percent is 10 and selected place1 & place2 value is notequal then flvalue should be 1100 and flvalues should be 1100.
<script>
$('#percent,#input,#place,#places').on('change input', function() {
var val = Number($('#input').val()) || 0,
per = Number($('#percent').val()) || 0;
if($('#place').val()!=$('#places')){
$('#total').val(val + val * per / 100)
$('#totals').val(val + val * per / 100)
})
</script>
Value
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
<select name="percent" id="percent" class="input">
<option value="Country" selected>Select Percentage</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
Place_1
<select name="place_1" id="place_1" class="input">
<option value="Place" selected>Place</option>
<option value="Place 1">Place 1</option>
<option value="Place 2">Place 2</option>
<option value="Place 3">Place 3</option>
</select>
Place_2
<select name="place_2" id="place_2" class="input">
<option value="Place" selected>Place</option>
<option value="Place 1">Place 1</option>
<option value="Place 2">Place 2</option>
<option value="Place 3">Place 3</option>
</select>
Final Value
<input type="text" name="flvalue" class="input" id="total" required/>
<input type="text" name="flvalues" class="input" id="totals" required/>

Give it a try to this,
$('#percent,#input,#place_2,#place_1').on('change input', function() {
var val = Number($('#input').val()) || 0,
per = Number($('#percent').val()) || 0;
var tot_am = val + val * per / 100;
if ($('#place_1').val() != $('#place_2').val()) {
$('#total').val(tot_am);
$('#totals').val(tot_am);
} else if ($('#place_1').val() == $('#place_2').val()) {
$('#total').val()
$('#totals').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Value
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
<select name="percent" id="percent" class="input">
<option value="Country" selected>Select Percentage</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
Place_1
<select name="place_1" id="place_1" class="input">
<option value="Place" selected>Place</option>
<option value="Place 1">Place 1</option>
<option value="Place 2">Place 2</option>
<option value="Place 3">Place 3</option>
</select>
Place_2
<select name="place_2" id="place_2" class="input">
<option value="Place" selected>Place</option>
<option value="Place 1">Place 1</option>
<option value="Place 2">Place 2</option>
<option value="Place 3">Place 3</option>
</select>
Final Value
<input type="text" name="flvalue" class="input" id="total" required/>
<input type="text" name="flvalues" class="input" id="totals" required/>
Hope this will solve your problem.

You've just to add condition on places selected value :
if($('#place').val()=="10"){
$('#totals').val(val + val * per / 100);
}else{
$('#totals').val('');
}
And to add attach the change event also to the #place select :
$('#percent,#input,#place').on('change input', function() {
Hope this helps.
$('#percent,#input,#place').on('change input', function() {
var val = Number($('#input').val()) || 0,
per = Number($('#percent').val()) || 0;
$('#total').val(val + val * per / 100);
if($('#place').val()=="10"){
$('#totals').val(val + val * per / 100);
}else{
$('#totals').val('');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Value
<input type="text" name="gvalue" id="input" class="input" required/>
<br>Percentage
<select name="percent" id="percent" class="input">
<option value="Country" selected>Select Percentage</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<br>
Place
<select name="place" id="place" class="input">
<option value="Country" selected>Place</option>
<option value="5">Place 1</option>
<option value="10">Place 2</option>
<option value="15">Place 3</option>
</select>
<br><br>
Final Value
<input type="text" name="flvalue" class="input" id="total" required/>
<input type="text" name="flvalues" class="input" id="totals" required/>