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 find out particular value in a input field without regex using jquery?

In the given html code name_with_initials such as mr,mrs,ms,master.While retrieving name from database it is like "MR:Raju" Based on this value i need to select value in of prefix name(MR) and name(Raju) should be in input box.How to do this?
<div class="input-group">
<span class="input-group-addon">
<select name="name_with_initials" id="name_with_initials">
<option value="MR">MR</option>
<option value="MRS">MRS</option>
<option value="MS">MS</option>
<option value="MASTER">MASTER</option>
</select>
</span>
<input type="text" name="name_with_initials" id="customername" onKeyPress="return ValidateAlpha(event);" class="form-control detailinfo" placeholder="Full Name">
</div><!-- /input-group -->

You can split the initials and name with colon(:) and set the values to the select dropdown and input text box:
var dbValue = 'MR:Raju';
var initials = dbValue.split(':')[0];
var username = dbValue.split(':')[1];
$('#name_with_initials').val(initials);
$('#customername').val(username);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span class="input-group-addon">
<select name="name_with_initials" id="name_with_initials">
<option value="MR">MR</option>
<option value="MRS">MRS</option>
<option value="MS">MS</option>
<option value="MASTER">MASTER</option>
</select>
</span>
<input type="text" name="name_with_initials" id="customername" onKeyPress="return ValidateAlpha(event);" class="form-control detailinfo" placeholder="Full Name">
</div>

How to make dropdown selection compulsory if the variable is true?

I have an angular js dropdown. I want that if my variabl e.g. 'x' has value true it makes it compulsory to select a value from the drop down and incase of false value it can allow it to save it without selecting anything from the drop down. Here is my drop down:
<select class="form-control dropdownheight"
ng-model="search.hardware"
ng-change="search()" >
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>

You can use ng required for this.
<form name="form">
<select ng-model="hardware" class="form-control dropdownheight" ng-change="search()" >
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>
<label for="input">This input must be filled if `required` is true: </label>
<input type="text" id="input" name="input" ng-required="isRequired" /><br>
<hr>
<code>{{form.input.$error}}</code><br>
isRequired = <code>{{isRequired}}</code>
<input type="submit" value="Save" ng-disabled="isRequired"/>
</form>
I have created plunkr for it:
https://plnkr.co/edit/bfWuGCOYLGIV0Krlaaeo?p=preview

Use the ng-required directive:
<select class="form-control dropdownheight"
ng-model="search.hardware"
ng-change="search()"
ng-required="x">
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>
See this jsfiddle

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>

Emailing Preselected HTML Inputs

I am trying to figure out how to write some code that will take inputs chosen from a dropdown and preselect them so that an individual can just copy the code after it is generated. I currently have 6 attributes a person needs to choose and at the end a part number is generated at the bottom. Ideally, I would want to either have the code that is generated be sent to an email that can be sent to my company for an RFQ or have the inputs in the boxes below preselected so that the user only needs to right click and all 6 boxes get copied, which they can then post into forms, emails, etc.
I am having an issue doing that with my code. My current code for the form and page format is here:
<div style="width: 900px; float: left; margin-left: 30px;"><h1>Request a Quote</h1>
<div style="width: 300px; float: left; padding-right:30px;">
<h4 style="line-height:24px;">Please complete the form at the right to contact a representative regarding your request.</h4>
</div>
<div style="width: 500px; float: left; padding: 20px; background-color: #eee;">
<div>
<body>
<form id="example" name="example">
<b>Sensor Type</b><br>
<select id="sensor" onchange="updateText('sensor')">
<option value="">Select One</option>
<option value="J">J</option>
<option value="K">K</option>
</select>
<br>
<br>
<b>Voltage</b><br>
<select id="voltage" onchange="updateText('voltage')">
<option value="">Select One</option>
<option value="120V">120V</option>
<option value="240V">240V</option>
</select>
<br>
<br>
<b>Amps</b><br>
<select id="amps" onchange="updateText('amps')">
<option value="">Select One</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<br>
<br>
<b>Channels</b><br>
<select id="channels" onchange="updateText('channels')">
<option value="">Select One</option>
<option value="1">1</option>
</select>
<br>
<br>
<b>Sensor Connector</b><br>
<select id="connector" onchange="updateText('connector')">
<option value="">Select One</option>
<option value="ML2">NEMA ML2 Mini Twist Lock (Standard)</option>
</select>
<br>
<br>
<b>Thermocouple</b><br>
<select id="thermocouple" onchange="updateText('thermocouple')">
<option value="">Select One</option>
<option value="J">JType</option>
<option value="K">KType</option>
</select>
<br>
<br>
<br />
<input type="text" value="" maxlength="1" size="1" id="sensorText" /> - <input type="text" value="" maxlength="1" size="1" id="voltageText" /> - <input type="text" value="" maxlength="1" size="1" id="ampsText" /> - <input type="text" value="" maxlength="1" size="1" id="channelsText" /> - <input type="text" value="" maxlength="1" size="1" id="connectorText" /> - <input type="text" value="" maxlength="1" size="1" id="thermocoupleText" />
</form>
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
document.getElementById(id).value = document.getElementById(type).value;
}
</script>
</body>
</div>
Any help would be greatly appreciated. If possible I am trying to achieve this with HTML or Javascript. I can expand on anything if needed. Thank you so much!

You might want to consider joining the different inputs into one input. As far as I can tell there is unfortunately no way to select text from multiple inputs simultaneously.
Maybe a long input for a nice design:
<input type="text" size="40" id="txtcode" style="letter-spacing: 5px;"/>
And the code should be straight forward; simply concat all the different values into one, with a dash in between.
<script>
var types = ['sensor', 'voltage', 'amps', 'channels', 'connector', 'thermocouple'];
function updateText(type) {
var text = '';
for (var i in types) {
if (i != 0) text += '-';
text += document.getElementById(types[i]).value;
}
document.getElementById('txtcode').value = text;
document.getElementById('txtcode').select();
}
</script>
Notice that to "pre-select" the text from the input field you can use document.getElementById('txtcode').select();
JSFiddle: http://jsfiddle.net/dx24dkkw/3/

Hi i have edit your form a bit to try to reach your expectation
<div style="width: 900px; float: left; margin-left: 30px;"><h1>Request a Quote</h1>
<div style="width: 300px; float: left; padding-right:30px;">
<h4 style="line-height:24px;">Please complete the form at the right to contact a representative regarding your request.</h4>
</div>
<div style="width: 500px; float: left; padding: 20px; background-color: #eee;">
<div>
<body>
<form id="example" name="example">
<b>Sensor Type</b><br>
<select id="sensor" onchange="updateText('sensor')">
<option value="">Select One</option>
<option value="J">J</option>
<option value="K">K</option>
</select>
<br>
<br>
<b>Voltage</b><br>
<select id="voltage" onchange="updateText('voltage')">
<option value="">Select One</option>
<option value="120V">120V</option>
<option value="240V">240V</option>
</select>
<br>
<br>
<b>Amps</b><br>
<select id="amps" onchange="updateText('amps')">
<option value="">Select One</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<br>
<br>
<b>Channels</b><br>
<select id="channels" onchange="updateText('channels')">
<option value="">Select One</option>
<option value="1">1</option>
</select>
<br>
<br>
<b>Sensor Connector</b><br>
<select id="connector" onchange="updateText('connector')">
<option value="">Select One</option>
<option value="ML2">NEMA ML2 Mini Twist Lock (Standard)</option>
</select>
<br>
<br>
<b>Thermocouple</b><br>
<select id="thermocouple" onchange="updateText('thermocouple')">
<option value="">Select One</option>
<option value="J">JType</option>
<option value="K">KType</option>
</select>
<br>
<br>
<br />
<input type="hidden" value="" maxlength="1" size="1" id="sensorText" />
<input type="hidden" value="" maxlength="1" size="1" id="voltageText" />
<input type="hidden" value="" maxlength="1" size="1" id="ampsText" />
<input type="hidden" value="" maxlength="1" size="1" id="channelsText" />
<input type="hidden" value="" maxlength="1" size="1" id="connectorText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermocoupleText" />
<input type="text" value="" maxlength="1" size="1" id="completeText" style="width: 300px;" />
</form>
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
var endValue;
var inputValue = document.getElementById(type).value;
document.getElementById(id).value = inputValue;
endValue = document.getElementById("sensorText").value;
if(document.getElementById("voltageText").value != ""){
endValue = endValue+"-"+document.getElementById("voltageText").value;
}
if(document.getElementById("ampsText").value != ""){
endValue = endValue+"-"+document.getElementById("ampsText").value;
}
if(document.getElementById("channelsText").value != ""){
endValue = endValue+"-"+document.getElementById("channelsText").value;
}
if(document.getElementById("connectorText").value != ""){
endValue = endValue+"-"+document.getElementById("connectorText").value;
}
if(document.getElementById("thermocoupleText").value != ""){
endValue = endValue+"-"+document.getElementById("thermocoupleText").value;
}
document.getElementById("completeText").value = endValue;
}
</script>
</body>
</div>
i had set the main inputs to hidden and than create a main input where the js will add the text of the hidden input so the user can easily copy it.
I wrote the javascript in an easy way there will be probably other way to reach the same result without force listing each input in an if condition

You can follow these other people's suggestions for formulating the body of the email. However, while you certainly can do AJAX to send the email, you might just need to have the user send it themselves using the default email client. For this just use window.open():
window.open("mailto:myname#somedomain.com?Subject=My%20Test&Body=This%20is%20my%20test%20email.");