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>

how to calculate the amount by multiplying one select box value & one textbox value onchange in jquery

i'am new with jquery & javascript,I have one textbox value & one select box ,when i enter value in textbox & select value from selectbox,i want to diplay multiplication of both values in another textbox.I have tried using it, but using 2 textboxes.i want one select box & one textbox calculation
HTML :
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="volume">Volume</label>
<input type="text" class="form-control required" id="box1" name="box1" maxlength="128">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="paymentmod">Rate</label>
<select class="form-control required" id="box2" name="box2">
<option value="0">Select rate</option>
<?php
if(!empty($rate))
{
foreach ($rate as $pl)
{
?>
<option value="<?php echo $pl->Id ?>"><?php echo $pl->rate ?></option>
<?php
}
}
?>
</select>
</div>
</div>
</div>
Javascript :
$('input[name="box2"]').keyup(function() {
var a = $('input[name="box1"]').val();
var b = $(this).val();
$('input[name="box3"]').val(a * b);
});

Add an onchange listener to both the elements and check for numeric values in the event listener and change the value attribute of the third textbox
function myFunction() {
first = Number($('#val1').val());
second = Number($('#mySelect').val());
if(first && second && !isNaN(first) && !isNaN(second)){
$('#val2').val(first * second);
}
else {
$('#val2').val(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="val1" onchange="myFunction()">
<select id="mySelect" onchange="myFunction()">
<option value="15">15
<option value="25">25
<option value="35">35
<option value="45">45
</select>
<input id="val2" disabled>

Please see below snippet. It is tested and working fine.
I hope this helps :-)
thanks
function Multiply() {
var txtbox_Value = $("#txtBox").val();
var selectBox_Value = $("#Select").val();
if (selectBox_Value == "0") {
alert("Select Valid Integer!");
}
else {
var MultipliedValue = (txtbox_Value * selectBox_Value);
$("#TotalValue").val(MultipliedValue);
}
}
.form-control
{
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<label>Enter a Number</label>
<input type="text" id="txtBox" class="form-control" />
<br/><br/>
<select id="Select" onchange="Multiply()" class="form-control">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br/><br/>
<label>Total Multiplied Value</label>
<input type="text" id="TotalValue" class="form-control"/>
</div>

Here we go with the easier solution possible, hope it helps:
$(document).on('change keyup blur', "#box1, #box2", function() {
var val1 = $("#box1").val()
var val2 = $("#box2").val()
var result = val1 * val2
$("#box3").val(result)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="form-group">
<label for="rate">rate</label>
<input type="number" class="form-control required" id="box1" name="box2" maxlength="128">
<select class="form-control required" id="box2" name="box2">
<option value="0" disabled selected>Select rate</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="volume">Volume</label>
<input type="text" class="form-control required" id="box3" name="box3" maxlength="128">
</div>
</div>

Haven't tested.
<intput type="text" id="text1" value="1" />
<select id="select1">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<intput type="text" id="text2" />
$(document).ready(function () {
// Text box 1 blur event
$('#text1').on('blur', function () {
MyMultiply();
});
// select1 change event
$('#select1').on('change', function () {
MyMultiply();
});
function MyMultiply() {
var txtNum1 = parseInt($('#text1').val(), 10);
var seleNum1 = parseInt($('#select1').val(), 10);
$('#text2').val(txtNum1 * seleNum1);
}
});

You can do like this
$('select[name="dropdown"]').change(function(){
var val1 = $("#txtbox1").val(); // textbox value
var val2 = $(this).val(); // select box value
var val3 = val1 * val2; // multiply both value
$("#txtbox2").val(val3);
});
​

input onchange function calling not only on change

So as the title states I have dynamic form that adds inputs dynamically and one of those inputs dropdown on change calls for val(this) function and I would also like to call this function when somebody adds this field so when a.AddSpell on click function is executed
$('div#ChampionInput').on('click', 'a.AddSpell',function(){
var championName = $(this).closest(".Champion").find(".ChampionInput").val();
if($.inArray(championName, championsWithExtraSpells)==-1){
OptionsChampion = '\
<option value="Passive">Passive</option>\
<option value="Q" selected>Q</option>\
<option value="W">W</option>\
<option value="E">E</option>\
<option value="R">R</option>'
;}
else{
OptionsChampion = '\
<option value="Passive">Passive</option>\
<option value="Q" selected>Q</option>\
<option value="Q2">Q2</option>\
<option value="W">W</option>\
<option value="W2">W2</option>\
<option value="E">E</option>\
<option value="E2">E2</option>\
<option value="R">R</option>\
<option value="R2">R2</option>';}
$(this).siblings('.SpellChanges').append(
'<div class="Spell" data-id="'+$(this).siblings("div.SpellChanges").children("div.Spell").length+'">\
<select name="change['+$(this).parent('div').data('id')+'][]" onchange="val(this)">\
'+OptionsChampion+'\
</select>\
<input type="text" name="championSpell['+$(this).parent('div').data('id')+'][]" readonly>\
<br>\
<div class="Change">\
<textarea type="text" size="20" rows="3" cols="50" maxlength="500" name="SpellDescription['+$(this).parent('div').data('id')+'][][]" placeholder="Enter Description" required></textarea>\
<select name="SpellChange['+$(this).parent('.Champion').data('id')+'][][]">\
<option value="buff">Buff</option>\
<option value="nerf">Nerf</option>\
<option value="new">New</option>\
<option value="change">Change</option>\
<option value="bugfix">Bugfix</option>\
</select>\
Add Change \
Remove Spell\
</div>\
</div>\
');
//alert($(this).siblings('div.SpellChanges').children('div.Spell').last().children('input').html());
});
alert($(this).siblings('div.SpellChanges').children('div.Spell').last().children('input')); this is what I've tried to target that field but I have no idea how to call on change with (this) in it.
Here is also html
<div id="wrap">
<form name="second_form" id="second_form" action="#" method="POST">
<select id="season" name="season" onchange="checkseason();">
<option value="newseasons" selected>Season 3+</option>
<option value="oldseasons">Season 1, 2</option>
</select>
<input id="patch" type="text" name="patch" placeholder="e.g. 4.20" required autofocus><br/>
Add Champion
<div id="ChampionInput">
</div>
<br><br>
<input type="submit" name="submit">
</form>
</div>

Javascript is not working - help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Validation and Dynamic Forms</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('shipping1').onclick = calcShipping;
document.getElementById('shipping2').onclick = calcShipping;
document.getElementById('shipping3').onclick = calcShipping;
document.getElementById('Text1').onblur = recalculate;
document.getElementById('Text2').onblur = recalculate;
document.getElementById('Text3').onblur = recalculate;
}
function calcShipping() {
document.getElementById('shippingTbx').value = parseFloat(this.value).toFixed(2);
recalculate();
}
function recalculate() {
var prod1, prod2, prod3;
var prod1$ = 1.5;
var prod2$ = 2.25;
var prod3$ = 3.45;
var merchandise$ = 0;
prod1 = parseInt(document.getElementById('Text1').value);
prod2 = parseInt(document.getElementById('Text2').value);
prod3 = parseInt(document.getElementById('Text3').value);
if (!isNaN(prod1)) {
merchandise$ += (prod1 * prod1$)
}
if (!isNaN(prod2)) {
merchandise$ += (prod2 * prod2$)
}
if (!isNaN(prod3)) {
merchandise$ += (prod3 * prod3$)
}
document.getElementById('merchTbx').value = parseFloat(merchandise$).toFixed(2);
var shipping$ = parseFloat(document.getElementById('shippingTbx').value);
var total$ = merchandise$;
if (!isNaN(shipping$))
total$ += shipping$;
document.getElementById('totalTbx').value = parseFloat(total$).toFixed(2);
}
</script>
<style type="text/css">
body{
background:
#F4F0F4
url(topleft.jpg)
no-repeat
top left;
padding-right: 20px;
padding-bottom: 50px;
font: 0:8em Verdana, sans-serif;}
.row{width:98%; overflow:auto;}
div.header {width:20%; text-align:left;}
div.field { width:75%; text-align:left;}
.style1 {width: 367px}
#Text1
{
width: 58px;
}
#Text2
{
width: 58px;
}
#Text3
{
width: 58px;
}
</style>
</head>
<body >
<h2 style = "text-align:center;">Form Validation and Dynamic Forms</h2>
<table border="10" width="600" align="center" bgcolor="#DEB887">
<tr>
<td class="style1">
<form action= "thankupage.html">
<fieldset>
<legend>Product Information:</legend>
<input type="checkbox" name="Product1" id="Checkbox1" value="yes" tabindex="1" /> Product 1 # 1.50/unit
<input id="Text1" type="text" /><br />
<input type="checkbox" name="Product2" id="Checkbox2" value="yes" tabindex="2" /> Product 2 # 2.25/unit
<input id="Text2" type="text" /><br />
<input type="checkbox" name="Product3" id="Checkbox3" value="yes" tabindex="3" /> Product 3 # 3.45.unit
<input id="Text3" type="text" /><br />
</fieldset>
<br />
<div align="left" style="width: 569px">
<fieldset id="Fieldset2" style="position: relative">
<legend> Billing Address </legend>
<div class="row">
<div class="header">Last Name:</div>
<div class="field"><input type="text" name="lname" tabindex="1" /></div>
</div>
<div class="row">
<div class="header">First Name:</div>
<div class="field"><input type="text" name="lname" tabindex="1" /></div>
</div>
<div class="row">
<div class="header">Address:</div>
<div class="field"><input type="text" name="address" tabindex="3" /></div>
</div>
<div class="row">
<div class="header">City:</div>
<div class="field"><input type="text" name="address" tabindex="3" /></div>
</div>
<div class="row">
<div class="header">State:</div>
<select name="State" id="Select1">
<option value="-1"></option>
<option value="73|0">Alabama</option>
<option value="16|1">Alaska</option>
<option value="70|0">Arizona</option>
<option value="75|0">Arkansas</option>
<option value="71|0">California</option>
<option value="72|0">Colorado</option>
<option value="67|0">Connecticut</option>
<option value="69|0">Delaware</option>
<option value="68|0">District of Columbia</option>
<option value="65|0">Florida</option>
<option value="66|0">Georgia</option>
<option value="62|1">Hawaii</option>
<option value="63|0">Idaho</option>
<option value="58|0">Illinois</option>
<option value="59|0">Indiana</option>
<option value="60|0">Iowa</option>
<option value="55|0">Kansas</option>
<option value="56|0">Kentucky</option>
<option value="57|0">Louisiana</option>
<option value="52|0">Maine</option>
<option value="50|0">Maryland</option>
<option value="51|0">Massachusetts</option>
<option value="47|0">Michigan</option>
<option value="48|0">Minnesota</option>
<option value="49|0">Mississippi</option>
<option value="44|0">Missouri</option>
<option value="45|0">Montana</option>
<option value="46|0">Nebraska</option>
<option value="41|0">Nevada</option>
<option value="42|0">New Hampshire</option>
<option value="43|0">New Jersey</option>
<option value="38|0">New Mexico</option>
<option value="39|0">New York</option>
<option value="40|0">North Carolina</option>
<option value="35|0">North Dakota</option>
<option value="36|0">Ohio</option>
<option value="37|0">Oklahoma</option>
<option value="32|0">Oregon</option>
<option value="34|0">Pennsylvania</option>
<option value="30|0">Rhode Island</option>
<option value="31|0">South Carolina</option>
<option value="26|0">South Dakota</option>
<option value="27|0">Tennessee</option>
<option value="28|0">Texas</option>
<option value="23|0">Utah</option>
<option value="24|0">Vermont</option>
<option value="25|0">Virginia</option>
<option value="21|0">Washington</option>
<option value="22|0">West Virginia</option>
<option value="17|0">Wisconsin</option>
<option value="18|0">Wyoming</option>
<option value="-1">------------------------------------</option>
<option value="19|2">Armed Forces Americas</option>
<option value="14|2">Armed Forces Europe</option>
<option value="15|2">Armed Forces Pacific</option>
<option value="-1">------------------------------------</option>
<option value="74|4">American Samoa</option>
<option value="61|4">Guam</option>
<option value="53|4">Marianas Islands</option>
<option value="54|4">Marshall Islands</option>
<option value="64|4">Micronesia</option>
<option value="33|4">Palau</option>
<option value="29|4">Puerto Rico</option>
<option value="20|4">US Virgin Islands</option>
<option value="-1">------------------------------------</option>
<option value="11|3">Alberta</option>
<option value="12|3">British Columbia</option>
<option value="13|3">Manitoba</option>
<option value="8|3">New Brunswick</option>
<option value="9|3">Newfoundland</option>
<option value="5|3">Northwest Territories</option>
<option value="10|3">Nova Scotia</option>
<option value="6|3">Nunavut</option>
<option value="7|3">Ontario</option>
<option value="2|3">Prince Edward Island</option>
<option value="3|3">Quebec</option>
<option value="4|3">Saskatchewan</option>
<option value="1|3">Yukon</option>
</select>
</div>
<div class="row">
<div class="header">Zip:</div>
<div class="field"><input type="text" name="address" tabindex="3" /></div>
</div>
<div class="row">
<div class="header">Phone Number:</div>
<div class="field"><input type="text" name="pnumber" /></div>
</div>
<div class="row">
<div class="header">email:</div>
<div class="field"><input type="text" name="address" tabindex="3"
style="width: 297px" /></div>
</div>
</fieldset>
</div>
<br />
<fieldset>
<legend> Billing Method </legend>
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="3.50" name="Saturday"
id="Radio1"/>
<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3">Saturday Delivery ($3.50)</label> <br />
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="5.00" name="Days"
id="Radio2"/>
<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3">2-3 days Delivery ($5.00)</label> <br />
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="7.50" name="Overnight"
id="Radio3"/>
Overnight<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3"> Delivery ($7.50)</label>
</fieldset>
<br />
<fieldset>
<legend>Order Summary</legend>
<b> Merchandise: </b>:
<input id="Text4" type="text" /><br />
Shipping charges:
<input id="Text5" type="text" /><br />
Sales Tax:
<input id="Text6" type="text" /><br />
<b> Order Total: </b>:
<input id="Text7" type="text" /></fieldset>
<br />
<fieldset>
<legend>Pay with Credit Card</legend>
<b> Card Type: </b>
<select class="coField7 coFieldError" id="ctl00_mainContentPlaceHolder_creditCardPaymentSelector_currentCreditCard_creditCardList1" name="ctl00$mainContentPlaceHolder$creditCardPaymentSelector$currentCreditCard$creditCardList1">
<option value="0">Select Card</option>
<option value="3">Visa</option>
<option value="4">Master Card</option>
<option value="5">Discover</option>
<option value="7">American Express</option>
</select>
<br />
<b> Card Number: </b>: <input type="text" size="10" />
</fieldset>
<input type="submit" value="Submit" />
<br />
</form>
</td>
</tr>
</table>
</body>
</html>

Try moving your method call away from your window.onload.
window.onload = MyFunction;
function MyFunction()
{
document.getElementById('shipping1').onclick = calcShipping;
document.getElementById('shipping2').onclick = calcShipping;
document.getElementById('shipping3').onclick = calcShipping;
document.getElementById('Text1').onblur = recalculate;
document.getElementById('Text2').onblur = recalculate;
document.getElementById('Text3').onblur = recalculate;
}

Short answer: you don't appear to have any element in the document named "shipping1".
Longer answer: The error you're getting is indicating that something on the line
document.getElementById('shipping1').onclick = calcShipping;
is failing. It can't be document since you're not in a using block and it would be very strange if document could be null. The next object being accessed is whatever is returned by getElementById() for the onclick slot. Since there doesn't appear to be any element with that name in the dcument, it's a pretty good guess that that's causing the problem.

Fix your Radio buttons for shipping. You're calling them 'shipping1,2,3' in javascript, but in your html they have the wrong ID's. Also remove their postback event.
<input type="radio" value="3.50" name="Saturday"
id="Shipping1"/>
<label for="Shipping1">Saturday Delivery ($3.50)</label> <br />
<input type="radio" value="5.00" name="Days"
id="Shipping2"/>
<label for="Shipping2">2-3 days Delivery ($5.00)</label> <br />
<input type="radio" value="7.50" name="Overnight"
id="Shipping3"/>
Overnight<label for="Shipping3"> Delivery ($7.50)</label>
Cheers,
~ck

document.getElementById('shipping1')
Above code is "null", means there is no control with the name "shipping1".
document.getElementById('Text1').onblur
This also throws "null" exception as there is no control with the name "shippingTbx" in the html you gave.
function calcShipping() {
// Below code is null
document.getElementById('shippingTbx').value = parseFloat(this.value).toFixed(2);
recalculate();
}
Please make sure you've all the controls and get the element only for the controls available in the html.