I have a form. The user will fill it out, and at the bottom of that form I am trying to display a value based values inserted into the form page.
I'm so far not getting any kind of output at all, here is my attempt:
HTML FORM:
<form id="myform">
<select
name="sv_313"
onchange="calculate()"
id="sv_313"
>
<option value="Select One">Select One</option>
<option value="0.1">A</option>
<option value="0.2">B</option>
<option value="0.3">C</option>
</select>
<br/>
<input
type="number"
name="sv_312"
size="10"
maxlength="10"
onblur="calculate()"
id="sv_312"
/>
Calculated value
<div id="coverage"> </div>
</form>
The javascript:
<script>
//define an array for the possible values input via select menu
var spv = new Array();
spv["A"]=0.1;
spv["B"]=0.2;
spv["C"]=0.3;
//function to get the value from select menu
function getSAMprevalence()
{
var SAMprevalence=0;
var theForm = document.forms["myform"];
var selectedSAMprevalence = theForm.elements["sv_313"];
SAMprevalence = spv[selectedSAMprevalence.value]
return SAMprevalence;
}
//function to get the value from input field
function getInputvalue()
{
var Inputvalue=0;
var theForm = document.forms["myform"];
var Inputvalue = theForm.elements["sv_312"];
return Inputvalue;
}
//function to calculate using these two functions, and output into div named coverage:
function calculate()
{
var treatmentCoverage = getSAMprevalence() + getInputvalue();
document.getElementById('coverage').innerHTML =
""+treatmentCoverage;
}
</script>
I am really not experienced with javacsript or anything really, any pointers would be very appreciated. Thanks!
EDIT: here is a jsfiddle with it set up in, illustrating the lack of any output :(
http://jsfiddle.net/rHu8J/3/
Try using jQuery ..
DEMO
$(function() {
$('#sv_313').on('change', function() {
calculate();
});
$('input[name=sv_312]').on('blur', function() {
calculate();
});
});
function calculate() {
var $select = $('#sv_313').val();
var $text = $('input[name=sv_312]').val();
if ($select == undefined || $select == '' ||$select == 'Select One') {
$select = 0;
}
else {
$select = parseFloat($select);
}
//
if ($text == undefined || $text == '') {
$text = 0;
}
else {
$text = parseFloat($text);
}
$('.coverage').html($select + $text);
}
HTML:
<form id="myform">
<select name="sv_313" onchange="calculate()" id="sv_313">
<option value="0">Select One</option>
<option value="0.1">A</option>
<option value="0.2">B</option>
<option value="0.3">C</option>
</select>
<br/>
<input type="number" id="sv_312" size="10" maxlength="10" onchange="calculate()"/>
</form>
Calculated value
<div id="coverage"></div>
Javascript:
function calculate() {
var myForm = document.forms['myform'];
var selectVal = myForm.elements['sv_313'].value;
var inputVal = myForm.elements['sv_312'].value;
if(!inputVal) inputVal = 0;
document.getElementById('coverage').innerHTML = parseFloat(selectVal) + parseInt(inputVal);
}
I believe your error is when you get the selected option. Try this instead:
SAMprevalence = spv[selectedSAMprevalence.options[selectedSAMprevalence.selectedIndex].text]
thanks to:
Get selected value in dropdown list using JavaScript?
Related
I am new to Js and I am having trouble with the code. The problem is that when I multiply different methods together the program does not work. However, some of the methods are are working even though they are kind of identical. The other problem is that I have to change the first selection first and then the other to get the total I need. I want to get a total that changes whenever I choose any selection from the drop box regardless of ordering. I know I am foreseeing a mistake here or simply cant understand. Please feel free to point out my mistakes and help me better my code because I know its more complicated than it should be. Thank you for your help.
HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/scriptt.js "></script>
</head>
<body onload="hideTotal()">
<form method="POST" class="device"/>
<center class="all" >
<div class= "data">
<label class="req">Select The Device</label>
<select class="mydevice" id= "selectDevice" onChange="calculateTotal()">
<option> None </option>
<option value="100" id='lg'> LG X CHARGE </option>
<option value="129"> ZTE MAX XL </option>
<option value="123"> LG DYNASTY </option>
<option value="400"> LG TRIBUTE </option>
</select>
<label for="For" class="req"> For </label>
<select class="mydevice" id="port" onChange="calculateTotal()">
<option id= 'none' value='none'> None </option>
<option id='port' value="129" >Port-In</option>
<option class="upgrade">Upgrade</option>
<option class="newAct">New Activation</option>
</select>
<label for="Plan" class="req">Plan</label>
<select class="plan" id='plan' onChange="calculatedToral()">
<option>None</option>
<option value="35" >$35 plan</option>
<option value="50">$50 plan</option>
<option value="60">$60 plan</option>
</select>
<div class="access" >
<label for="phoneInsurance"> Phone Insurance </label>
<select class="myinsurance" id='insurance' onChange="calculatedToral()">
<option>None</option>
<option value="7">Yes</option>
</select>
<label for="phoneCase"> Phone Case </label>
<select class="mycases" id='case' onChange="calculatedToral()">
<option>None</option>
<option value="25">Regular</option>
<option value="35">Wallet</option>
</select>
<label for="screenProtector"> Screen Protector </label>
<select class="myscreen" id='screen' onChange="calculatedToral()">
<option value="15">Yes</option>
<option>No</option>
</select>
<center>
<div id="total"></div>
Js
var device_prices = new Array();
device_prices["100"]=100;
device_prices["129"]=129;
device_prices["123"]=123;
device_prices["400"]=400;
var port_prices = new Array();
port_prices["129"]=0.097;
var plan_prices = new Array();
plan_prices["35"]=35;
plan_prices["50"]=50;
plan_prices["60"]=60;
var insurance_prices = new Array();
inusrance_prices["7"]=7;
var phone_case = new Array();
phone_case["25"] = 25;
phone_case["30"] = 30;
var screen_protector = new Array();
screen_protector["15"] = 15;
function getDevicePrice() {
var deviceSelect = document.getElementById('selectDevice');
//alert(device_prices[deviceSelect.value]);
return device_prices[deviceSelect.value];
}
function getPortPrice() {
var portSelect = document.getElementById('port');
return port_prices[portSelect.value];
}
function getPlanPrice() {
var planSelected = document.getElementById('plan');
return plan_prices[planSelected.value];
}
function getInsurancePrice() {
var insurancee = document.getElementById('insurance');
return insurance_prices[insurancee.value];
}
function getCasePrice() {
var caseSelect = document.getElementById('case');
return phone_case[caseSelect.value];
}
function getScreenPrice() {
var screenSelect = document.getElementById('screen');
return screen_protector[screenSelect.value];
}
function calculateTotal() {
var total = getDevicePrice()*getPlanPrice()*getPortPrice();
total = total.toFixed(2);
var totalEl = document.getElementById('total');
document.getElementById('total').innerHTML = "Your Total is: $" + total;
totalEl.style.display = 'block';
}
function hideTotal() {
var totalEl = document.getElementById('total');
totalEl.style.display = 'none';
}
spelling
var insurance_prices = new Array();
inusrance_prices["7"]=7;
funtion or method not define
calculatedToral
var device_prices = new Array();
device_prices["100"]=100;
device_prices["129"]=129;
device_prices["123"]=123;
device_prices["400"]=400;
var port_prices = new Array();
port_prices["129"]=0.097;
var plan_prices = new Array();
plan_prices["35"]=35;
plan_prices["50"]=50;
plan_prices["60"]=60;
var insurance_prices = new Array();
insurance_prices["7"]=7;
var phone_case = new Array();
phone_case["25"] = 25;
phone_case["30"] = 30;
var screen_protector = new Array();
screen_protector["15"] = 15;
function getDevicePrice() {
var deviceSelect = document.getElementById('selectDevice');
//alert(device_prices[deviceSelect.value]);
alert("1");
return device_prices[deviceSelect.value];
}
function getPortPrice() {
var portSelect = document.getElementById('port');
alert("2")
return port_prices[portSelect.value];
}
function getPlanPrice() {
var planSelected = document.getElementById('plan');
alert("3")
return plan_prices[planSelected.value];
}
function getInsurancePrice() {
alert("4")
var insurancee = document.getElementById('insurance');
return insurance_prices[insurancee.value];
}
function getCasePrice() {
alert("5")
var caseSelect = document.getElementById('case');
return phone_case[caseSelect.value];
}
function getScreenPrice() {
alert("6")
var screenSelect = document.getElementById('screen');
return screen_protector[screenSelect.value];
}
function calculateTotal() {
alert("7")
var total = getDevicePrice()*getPlanPrice()*getPortPrice();
total = total.toFixed(2);
var totalEl = document.getElementById('total');
document.getElementById('total').innerHTML = "Your Total is: $" + total;
totalEl.style.display = 'block';
}
function calculatedToral()
{
alert("8")
}
function hideTotal() {
alert("9")
var totalEl = document.getElementById('total');
totalEl.style.display = 'none';
}
i was corrected your all function or method of your JavaScript and all are working (i was add alert() for function check). check calculation errors yourself
The JS calls in your HTML tags have wrong names.
Eg: You've calculatedToral() instead of calculatedTotal()in the following:
<select class="myinsurance" id='insurance' onChange="calculatedToral()">
<option>None</option>
<option value="7">Yes</option>
</select>
Check all the names properly.
Also, some footnotes since you're a beginner:
Try to avoid inline scripting. (look at this) I.e., as far as possible, don't mix the javascript event calls (like onChange(), onClick()) in the HTML tags. It'll make the code difficult to read and change in future.
Instead of inline scripting, try to put all Javascript either within the <script> tags (at end of page is usually better). Use .getElementsByClass() for wider control and .getElementById() for granular control of events.
Also, since you're using jQuery, include the <script> calling the jQuery CDN at the end, just before </body>
function SetUtcTimeZone() {
var UTCTimeZone = document.getElementById("txtPortorAnchorDeparture").value;
document.getElementById('ddlUTCTimeZone').selectedIndex = UTCTimeZone;
}
how can we set textbox value to dropdownlist using dropdownlist id
I guess it would look like this:
function SetTxt() {
var indx = document.getElementById('ddlUTCTimeZone').selectedIndex;
var val = document.getElementById('ddlUTCTimeZone').options[indx].text;
document.getElementById("txtPortorAnchorDeparture").value = val;
}
Just replace .selectedIndex by .value it will be done
Try this
function SetUtcTimeZone() {
var UTCTimeZone = document.getElementById("txtPortorAnchorDeparture").value;
document.getElementById('ddlUTCTimeZone').value = UTCTimeZone;
}
<!-- Simple example -->
<select id="ddlUTCTimeZone">
<option value="1">USA</option>
<option value="2">Egypt</option>
<option value="0">GMT</option>
</select>
<input id="txtPortorAnchorDeparture" type="text" />
<button type="button" onclick="SetUtcTimeZone()">Go</button>
Here is a simple function
function dropdownToTextbox(dropdown, textbox) {
var selectedOption = dropdown.options[dropdown.selectedIndex];
textbox.value = selectedOption.value;
}
Javascript and I will never be best friends.
I try to set a checkbox to checked by changing the elements from a dropdownlist.
This is the snippet
<select name="change_status_to" id="sel">
<option>....</option>
<option>....</option>
</select>
<input type="checkbox" name="do_status_change" value="on">
How could I use Javascript with the onchange-event to set the checkbox to the state checked?
You can set its .checked property:
document.getElementById("do_status_change").checked = true;
document.getElementById("do_status_change").checked = false;
However, you need to set an id; the name attribute will not suffice.
> Example <
Here is an example of why you should be friends with javascript.
JSFiddle - http://jsfiddle.net/juc7Q/1/
HTML
You're feeling toward Javascript
<select name="friends" id="friends">
<option value="love">I love JS</option>
<option value="weird">JS is weird</option>
<option value="misunderstood">Are we speaking the same language?</option>
</select>
<button id="selectWeird">Keep JS Weird</button>
<div>
<input type="checkbox" id="we_friends"> - Friends?
</div>
JavaScript
//Select this using js
var list = document.getElementById('friends');
var cb = document.getElementById('we_friends');
//Add event when change happens
list.onchange = function () {
var value = list.value;
if(value == 'love') {
alert('I knew you would come around');
cb.setAttribute('checked', '');
} else if(value == 'weird') {
alert('And I like being weird :-)!!');
cb.removeAttribute('checked');
} else {
alert('And you think I understand you?');
cb.removeAttribute('checked');
}
}
//Change to 'Weird' when I click on it
var btn = document.getElementById('selectWeird');
btn.onclick = function () {
list.options.selectedIndex = 1;
}
Ok so i am trying to get a textarea where a user can type in text. select a delimiter from a dropdown list. Hit count and it will count how many times it splits.
I cant seem to get my code to split at all. here is my code.
JavaScript
window.onload = function() {
document.getElementById("change").onclick = function() {
var paragraph = document.getElementById('box').value;
var x = document.getElementById("changeCase");
var getInfo = document.getElementById('ParaWrite');
var LowerCase = " ";
var splitAT = " ";
alert("above the for loop");
if (x.checked === true)
{
LowerCase = paragraph.toLowerCase();
}
else
{
LowerCase = paragraph;
}
for (var i = 0; i <document.form1.split.options.length; i++)
{
if (document.form1.split.options[i].selected === true)
{
splitAT = paragraph.split(options[i]);
}
}
document.write(splitAT);
doc write is just so i can see if it even makes it that far in the code and it does not.
here is my HTML
<form name="form1" id="form1">
<textarea type="text" id="box" value=""/></textarea>
<input type='checkbox' name='write' id='changeCase' value='Check'/><br>
<input type='button' value="Count" id="change"/>
<select name="split" id="split">
<option value="like">like</option>
<option value="monkey">monkey</option>
<option value="I">I</option>
<option value=".">.</option>
<option value=",">,</option>
<option value="?">?</option>
<option value=" ">[Space]</option>
</select>
</form>
<div id="ParaWrite">
</div>
options is not defined.
splitAT = paragraph.split(document.form1.split.options[i]);
http://jsfiddle.net/ExplosionPIlls/KeZEd/
I would like to change the style of a text field based on the value selected in a combo box. Specifically, what I'd like to do is make the txtDepartment field gray and marked as "read only" if the option value selected in cboSource is 1. I've tried the code below, but I imagine my style code at least is wrong, if not other things. Any help appreciated. Thanks!
<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>
<script>
function displayDepartment(obj)
{
var selectedValue = obj.value;
var txtDepartment = document.getElementById("txtDepartment");
if (selectedValue == "1")
{
txtDepartment.style.display = "Disabled style='background-color:#E8E8E8'";
}
}
</script>
txtDepartment.style.backgroundColor = "#E8E8E8";
txtDepartment.disabled = 'disabled';
with jQuery your whole function gets a lot smaller:
function displayDepartment(obj)
{
if($(obj).value=="1") {
$("#txtDepartment").css('background-color','#E8E8E8');
$("#txtDepartment").disabled ='disabled'
}
}
First, use onchange on cboSource.
Then:
if(selectedValue == "1")
txtDepartment.disabled = 'disabled';
Set the disabled attribute for your element
// on
txtDepartment.setAttribute("disabled","disabled")
// off
txtDepartment.removeAttribute("disabled")
possible solution using jQuery:
<style>
.disabled {
background-color:#E8E8E8;
}
</style>
<script language="javascript">
$(document).ready(function() {
var txtDepartment = $("#txtDepartment");
var cboSource = $("#cboSource");
cboSource.change(function() {
txtDepartment.removeClass().removeAttr("disabled");
if (cboSource.val() == 1) {
txtDepartment.addClass("disabled").attr("disabled", true);
}
});
});
</script>
<select name="cboSource" id="cboSource">
<option value = 0>Choose</option>
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>
In my opinion onclick is more suitable as on change has different meaning for different browser
Try this
<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>
<script>
function displayDepartment(obj)
{
var txtDepartment = document.getElementById("txtDepartment");
txtDepartment.disabled = false;
txtDepartment.style = "";
if (obj.value == "1")
{
txtDepartment.style = "background-color:#E8E8E8";
txtDepartment.disabled = true;
}
}
</script>