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>
Related
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>
Sorry for the poor formatting. I'm on mobile.
Hello
I'm just wondering how can I make the following function into a loop?
Currently, it's just me rehashing the same thing over and over again. I have a textbox ID which goes from "example1" to "example30". So 30 textboxes. There is also a dropdown
with values from 1-30. If I select "5" from the dropdown, it should show 5 of the textboxes and hide the rest.
I currently have this:
$(document).ready(function(){
$('#containers').on('change', function() {
if (this.value == '1'){
$(".Container1").show();
$('.Container2').hide();$('.Container3').hide();$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
else if (this.value == '2'){
$(".Container1").show();
$(".Container2").show();
$('.Container3').hide();$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
else if (this.value == '3'){
$(".Container1").show();
$(".Container2").show();
$(".Container3").show();
$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
else if (this.value == '4'){
$(".Container1").show();
$(".Container2").show();
$(".Container3").show();
$(".Container4").show();
$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
else if (this.value == '5'){
$(".Container1").show();
$(".Container2").show();
$(".Container3").show();
$(".Container4").show();
$(".Container5").show();
$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
});
As you can see, this is a terrible way to do this. Quite frankly, it's embarrassing. I've tried the loop but can't figure it out
If you can change the HTML then better to add a common class to all the textbox say common and then do this,
$('#containers').on('change', function() {
$('.common').hide();
let x = $(this).val();
for(var s = 0 ; s < x ; s++)
$($('.common')[s]).show();
});
And if you cant edit the html do this,
$('#containers').on('change', function() {
$('input[id^="example"]').hide();
let x = $(this).val();
for(var s = 0 ; s < x ; s++)
$('#example'+ (s+1)).show();
});
Edit : Fiddle link if you need for ref
https://jsfiddle.net/wfgvvpv9/
Pure js solution; I have used 5 inputboxes; Kindly scale it up to 30 (as per ur case)
document.getElementById("dropDown").onchange = showHideInputBoxes;
function showHideInputBoxes() {
let chosenValue = document.getElementById("dropDown").value;
let allInputBoxes = document.getElementsByTagName("input");
for(i=0;i<allInputBoxes.length;i++) {
let inputBoxId = allInputBoxes[i].getAttribute('id');
if(inputBoxId<=chosenValue) {
allInputBoxes[i].classList.add('hide');
}
else {
allInputBoxes[i].classList.remove('hide');
}
}
}
.hide {
display:none;
}
<input id="1" type="text" value = "text of inputbox 1">
<input id="2" type="text" value = "text of inputbox 2">
<input id="3" type="text" value = "text of inputbox 3">
<input id="4" type="text" value = "text of inputbox 4">
<input id="5" type="text" value = "text of inputbox 5">
<select id="dropDown">
<option id="option-choose">choose num</option>
<option id="option-1">1</option>
<option id="option-2">2</option>
<option id="option-3">3</option>
<option id="option-4">4</option>
<option id="option-5">5</option>
</select>
<select id="containers">
<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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
<div id='input-containers' style="display:none;">
<input type="text" class="input-containers Container1" value="Container1">
<input type="text" class="input-containers Container2" value="Container2">
<input type="text" class="input-containers Container3" value="Container3">
<input type="text" class="input-containers Container4" value="Container4">
<input type="text" class="input-containers Container5" value="Container5">
<input type="text" class="input-containers Container6" value="Container6">
<input type="text" class="input-containers Container7" value="Container7">
<input type="text" class="input-containers Container8" value="Container8">
<input type="text" class="input-containers Container9" value="Container9">
<input type="text" class="input-containers Container10" value="Container10">
<input type="text" class="input-containers Container11" value="Container11">
<input type="text" class="input-containers Container12" value="Container12">
<input type="text" class="input-containers Container13" value="Container13">
<input type="text" class="input-containers Container14" value="Container14">
<input type="text" class="input-containers Container15" value="Container15">
<input type="text" class="input-containers Container16" value="Container16">
<input type="text" class="input-containers Container17" value="Container17">
<input type="text" class="input-containers Container18" value="Container18">
<input type="text" class="input-containers Container19" value="Container19">
<input type="text" class="input-containers Container20" value="Container20">
<input type="text" class="input-containers Container21" value="Container21">
<input type="text" class="input-containers Container22" value="Container22">
<input type="text" class="input-containers Container23" value="Container23">
<input type="text" class="input-containers Container24" value="Container24">
<input type="text" class="input-containers Container25" value="Container25">
<input type="text" class="input-containers Container26" value="Container26">
<input type="text" class="input-containers Container27" value="Container27">
<input type="text" class="input-containers Container28" value="Container28">
<input type="text" class="input-containers Container29" value="Container29">
<input type="text" class="input-containers Container30" value="Container30">
</div>
$(document).ready(function() {
function hideAllContainers() {
//put common class for all containers
$(".input-containers").hide();
$("#input-containers").show();
}
$('#containers').on('change', function() {
hideAllContainers();
var count = parseInt(this.value);
for (i = 1; i <= count; i++) {
console.log($(".Container" + i));
$(".Container" + i).show();
}
});
});
jsfiddle can be found here
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();
}
});
});
I have simple script which calculates the VAT:
<script>
function count(){
price = document.getElementById("price").value;
vat = document.getElementById("vat").value;
total = price*(1+vat/100);
document.getElementById('total').innerHTML=total;
}
</script>
<input size="20" MAXLENGTH="20" id="price" name="price" type="text" value="" onkeyup="count();">
<select id="vat" onchange="count();">
<option VALUE="22">22 %</option>
<option VALUE="7">7 %</option>
<option VALUE="33">33 %</option>
<option VALUE="ZW">ZW</option>
</select>
<span id="total"></span>
Here is how this script
I want to do to the script, when I will choose from the selection list the value of a text (eg. "ZW"), then the script to ignore this value and the result showed only entered value in the field.
function count(){
price = document.getElementById("price").value;
vat = document.getElementById("vat").value;
if (isNaN(vat))
total=price;
else
total = price*(1+vat/100);
document.getElementById('total').innerHTML=total;
}
<input size="20" MAXLENGTH="20" id="price" name="price" type="text" value="" onkeyup="count();">
<select id="vat" onchange="count();">
<option VALUE="22">22 %</option>
<option VALUE="7">7 %</option>
<option VALUE="33">33 %</option>
<option VALUE="ZW">ZW</option>
</select>
<span id="total"></span>
An easy fix would be to replace:
<option VALUE="ZW">ZW</option>
with:
<option VALUE="0">ZW</option>
This way, all options are consistent with each other. And that would save yourself a specific test where you don't really need one.
function count(){
price = parseFloat(document.getElementById("price").value);
vat = parseFloat(document.getElementById("vat").value);
total = price*(1+vat/100);
document.getElementById('total').innerHTML=total.toFixed(2);
}
<input size="20" MAXLENGTH="20" id="price" name="price" type="text" value="" onkeyup="count();">
<select id="vat" onchange="count();">
<option VALUE="22">22 %</option>
<option VALUE="7">7 %</option>
<option VALUE="33">33 %</option>
<option VALUE="0">ZW</option>
</select>
<span id="total"></span>
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.");