I am building a point calculation system that calculates points based on input value.
I've used some jquery ui styling on this radio button and now it doesnt add up, in the total.
Code is too long to post here so check this live preview. i read through code a lot of times cou;ldnt find anything.
EDIT: here's a stripped down version of my code:
the problem is with the radio buttons in div part2, please read my comments.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quebec and Federal Immigration Points Calculator</title>
<link rel="stylesheet" href="files/jquery00.css">
<link rel="stylesheet" href="files/flexselect.css">
<link rel="stylesheet" href="files/demos000.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="files/liquidmetal.js"></script>
<script src="files/jquery.flexselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select.flexselect").flexselect();
$( ".radio" ).buttonset();//here they are made into jquery ui buttonsets
$('#part1').show('slow', function() {
});
});
</script>
<script type="text/javascript">
function showAge(){
var d =document.getElementById('dob').value.split('/');
var today = new Date();
var bday = new Date(d[2],d[1],d[0]);
var age = today.getFullYear() - bday.getFullYear();
if(today.getMonth() < bday.getMonth() || (today.getMonth() == bday.getMonth() && today.getDate() < bday.getDate()))
{
t = age-1;
}
else {
t = age
}
document.getElementById('form').age.value = t;
}
</script>
<script type="text/javascript">
function compute(form)
{
var a = parseInt(document.getElementById('form').age.value, 10) || 0;
if ((18 <= a) && (a <= 35)){
q = 16;
}
else if (a == 36){
q = 14;
}
else if (a == 37){
q = 12;
}
else if (a == 38){
q = 10;
}
else if (a == 39){
q = 8;
}
else if (a == 40){
q = 6;
}
else if (a == 41){
q = 4;
}
else if (a == 42){
q = 2;
}
else if ((18 > a) || (a > 43)){
q = 0;
}
var b = parseInt(document.getElementById('form').highed.value, 10) || 0;
if (b == 1){
c = 0;
}
else if (b == 2){
c = 2;
}
else if (b == 3){
c = 4;
}
else if (b == 4){
c = 6;
}
var aos = parseInt(document.getElementById('form').selectareaofstudy.value, 10) || 0;
//here the value of the radiio button is parsed, and if nothing is selected it will default to zero
var tcfc2 = parseInt(document.getElementById('form').TCFC2.value, 10) || 0;
qt = (aos + c + q + tcfc2);
document.getElementById('total').age.value = q;
document.getElementById('total').ed.value = c;
document.getElementById('total').aos.value = aos;
document.getElementById('total').tcfc2.value = tcfc2;//here the value is displayed
document.getElementById('total').total.value = qt;//total displayed here
}
</script>
<script type="text/javascript">
function show2() {
$('#part1').hide('fast');
$('#part2').show('slow');
}
function back2() {
$('#part1').show('slow');
$('#part2').hide('fast');
}
function showTCF() {
if($('#radio1-1').is(':checked')) { alert("it's checked"); }
}
</script>
</head>
<body>
<div id="formbox">
<form id="form" name="form">
<div id="part1" style="display:none">
<div id="hidden">
<p>Your Date of Birth (format:<strong>dd/mm/yyyy</strong>)</p>
<br />
<input onBlur="compute(this.form)" onchange="showAge()" name="dob" id="dob" />
</div>
<p>Your Age</p>
<input class="sev" name="age" type="text" onMouseOver="compute(this.form)" style="font-size: 15px" value="" size="7" />
<h1>Your education</h1>
<h2>Your highest level of Education:</h2>
<select onchange="compute(this.form)" name="highed">
<option value="">Select One</option>
<option value="1">No high school diploma or general Professional</option>
<option value="2">High school general diploma +2 or 12th grade</option>
<option value="3">Postsecondary diploma 2 years general of full-time studies</option>
<option value="4">Postsecondary technical diploma 1 year of full-time studies</option>
<option value="4">Postsecondary technical diploma 2 years of full-time studies</option>
</select>
<h2>Your Area of Education:<small>(start typing..)</small></h2>
<select class="flexselect" name="selectareaofstudy">
<option value=""></option>
<option value="6">3D Animation and Image Synthesis Techniques (DCS - 3 years) </option>
<option value="6">LOADS OF OTHER VALUES HERE</option>
</select>
<br />
<br />
<INPUT class="ten" NAME="calc" VALUE="Calculate" TYPE="button" onClick="compute(this.form)">
<INPUT class="ten" NAME="calc" VALUE="Next" TYPE="button" onClick="show2()">
<br />
</div>
<div id="part2" style="display:none">
<h2>French Proficiency</h2>
<p>Have you written: <strong>TCF Quebec/ TEFaQ/ TCF/ TEF level C2- DALF C2?</strong> </p>
<div id="radio1" class="radio">
<!--These radio buttons have values of 1 and 2 but when calculated they always show up as zero, the default values.-->
<input id="radio1-1" name="TCFC2" type="radio" value="1" checked="checked" />
<label for="radio1-1">Yes</label>
<input id="radio1-2" name="TCFC2" type="radio" value="2" />
<label for="radio1-2">No</label>
</div>
<br />
<br />
<br />
<INPUT class="ten" NAME="calc" VALUE="Calculate" TYPE="button" onClick="compute(this.form)">
<table>
<tr>
<td><INPUT class="ten" NAME="calc" VALUE="Back" TYPE="button" onClick="back2()"></td>
<td><INPUT class="ten" NAME="calc" VALUE="Next" TYPE="button" onClick="show3()"></td>
</tr>
</table>
</div>
</form>
</div>
<div style="" id="totalmenu" class="port-menu-wrapper">
<form id="total">
<h3>Points For</h3>
<table>
<tr>
<td><label>Age</label></td>
<td><input class="sev" name="age" type="text" style="font-size: 15px" value="" size="7" readonly></td>
</tr>
<tr>
<td><label style="font-size: 18px">Your Education</label></td>
</tr>
<tr>
<td><label>Education 1</label></td>
<td><input class="sev" name="ed" type="text" style="font-size: 15px" value="" size="7" readonly></td>
</tr>
<tr>
<td><label>Area of Study</label></td>
<td><input class="sev" name="aos" type="text" style="font-size: 15px" value="" size="7" readonly></td>
</tr>
<tr>
<td><label style="font-size: 18px">French Proficiency</label></td>
</tr>
<tr>
<td><label>TCFC2</label></td>
<td><input class="sev" name="tcfc2" type="text" style="font-size: 15px" value="" size="7" readonly></td>
</tr>
<tr>
<td><label style="font-size:20px;"><strong>Total</strong></label></td>
<td><input class="ten" name="total" type="text" style="font-size: 20px" value="" size="10" readonly></td>
</tr>
</table>
</form>
</div>
</body>
</html>
i don't think it's linked to jquery ui, but to the line
var tcfc2 = parseInt(document.getElementById('form').TCFC2.value, 10) || 0;
as you have 2 elements with radio buttons called TCFC2, an array is created with them. Moreover, the the value is always 1 for the first radio, and 2 for the second. You need to check the "checked" property, not the value to identify if people speak french.
var tcfc2 = document.getElementById('form').TCFC2[0].checked -0 ;
No parseInt, as "true" or "false" are returned, the "-0" is to force the int conversion.
Finally, I would rename the radios OR the input type text to something else than TCFC2. (and merge your css, get the scripts and styles out the html file and into their own files for maintenance stake, and name your vars to something more meaningful than a, b, and c...)
Related
I'm new to JavaScript and I’m having issues trying to create a drop down list unit converter. The project calls for the code to convert miles to feet, Celsius to Fahrenheit and pounds to grams. The issue is when I enter the values the output is way off.
No matter what number I enter or unit I select I get the same result of 14514.944, instead of the appropriate (5280 feet, 33.8°, 453.592g, etc.). If I double click the submit button I get 62573043513.9154, triple click 269748534086686000, etc.
I know I’m missing something in the convert_unit function, but I’m not sure what. I’ve tried adding and removing various code and nothing is working.
var numInput = document.getElementById("numInput");
var numInput = document.getElementById("numOutput");
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
function convert_unit() {
numOutput.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(1.8*numInput.value)+32
var x = document.getElementById("fahrenheit").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(453.592*numInput.value)
var x = document.getElementById("grams").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
}
<form>
<fieldset>
<label id="enter">Numeric Value</label>
<p>
<input type="number" placeholder="Enter Value" name=" " value=" " id="numInput" />
</p>
</fieldset>
<fieldset><label>Conversion Menu</label>
<p>
<select id="" name="" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select>
</p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value=" " onClick="convert_unit()";>Convert</button>
</fieldset>
<fieldset><label id="results">Results</label>
<p>
<input type="number" placeholder="Results" name="to_unit" id="numOutput" readonly /></p>
</fieldset>
</form>
Both of your variables are named numInput:
var numInput = document.getElementById("numInput");
var numInput = document.getElementById("numOutput");
I'm guessing your second one should be numOutput. Also, there's no need to redefine these variables in JS unless you want to make it explicitly known what they are. HTML elements with IDs are already available in the global scope based on their ID name (with some caveats). In this case you could simply use numInput and numOutput throughout your program and it would still work even without these two lines.
i found 2 problems in your code.
The first is that in line 4 of the script, you overwrite the input of variable "numInput" with "numOutput" element. (Rename to 'numOutput')
The second problem is that, when script is loaded on page, the elements is not yet instanced. To solve that you can put the import tag right before </body> or add variables definition inside the function.
PS: Don't forget to use semicolons after every statement;
Jah Bless =)
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<fieldset>
<label id="enter">Pounds to Grams</label>
<p><input placeholder="Enter Value" name=" " value=" " id="numInput" type="number"></p>
</fieldset>
<fieldset>
<label>Conversion Menu</label>
<p>
<select id="" name="" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select>
</p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value=" " onclick="convert_unit()" ;="">Convert</button>
</fieldset>
<fieldset>
<label id="results">Pounds to Grams</label>
<p><input placeholder="Results" name="to_unit" id="numOutput" readonly="" type="number"></p>
</fieldset>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
function convert_unit() {
var numInput = document.getElementById('numInput');
var numOutput = document.getElementById('numOutput');
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
numOutput.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(1.8*numInput.value)+32;
var x = document.getElementById("fahrenheit").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(453.592*numInput.value);
var x = document.getElementById("grams").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
}
Your code corrected, customized and working perfectly!
var numInput = document.getElementById("numInput");
var numOutput = document.getElementById("numOutput");
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
function convert_unit() {
if(numInput.value === "") {
if(confirm("No value inputed to convert! Consider default 1 unit?")) {
numInput.value = 1;
}
}
if(getSelectedUnitToConvert("conversion_type") == null) {
if(confirm("No conversion unit selected! Consider default Miles to Feet?")) {
document.getElementById("conversion_type").selectedIndex = 0;
}
}
if(getSelectedUnitToConvert("conversion_type") == "Miles to Feet") {
numOutput.value=numInput.value;
numOutput2.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("result1").innerHTML = "Miles";
document.getElementById("result2").innerHTML = "Feet";
} else if(getSelectedUnitToConvert("conversion_type") == "Celcius to Fahrenheit") {
numOutput.value=numInput.value;
numOutput2.value=(1.8*numInput.value)+32;
var x = document.getElementById("fahrenheit").label;
document.getElementById("result1").innerHTML = "Celcius";
document.getElementById("result2").innerHTML = "Fahrenheit";
} else if(getSelectedUnitToConvert("conversion_type") == "Pounds to Grams") {
numOutput.value=numInput.value;
numOutput2.value=(453.592*numInput.value);
var x = document.getElementById("grams").label;
document.getElementById("result1").innerHTML = "Pounds";
document.getElementById("result2").innerHTML = "Grams";
}
}
function getSelectedUnitToConvert(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1) {
return null;
}
return elt.options[elt.selectedIndex].text;
}
div {
margin: 5px;
}
<form>
<fieldset>
<label id="enter">Value to Convert</label>
<p><input type="number" placeholder="Enter Value" value="" id="numInput" /></p>
</fieldset>
<fieldset><label>Units for Conversion</label>
<p><select id="conversion_type" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select></p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value="" onclick="convert_unit();">Convert</button>
</fieldset>
<fieldset><label id="results">Conversion Result:</label>
<p>
<div>
<input placeholder="Original Value" name="to_unit" id="numOutput" readonly />
<label id="result1"></label>
</div>
<div>
<input placeholder="Conversion Result" name="to_unit2" id="numOutput2" readonly />
<label id="result2"></label>
</div>
</p>
</fieldset>
</form>
Hi i'm having trouble trying to validate a simple form. I'm not the best at Javascript and am unsure where i'm going wrong. It may be a simple speelling mistake or a complete clash between my code that i can't see. All help is appreciated. Sorry for the big chunk of code, i wanted to make sure you see every detail.
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet"
type = "text/css"
href = "Stylesheet.css" />
<title>Customer details form</title>
<script src="gen_validatorv4.js" type="text/javascript"></script>
<!-- ============================== My failed attempt to try and validate my form with Javascript ============================== -->
<script>
function check() {
document.getElementById("Agree").checked = true;
}
function uncheck() {
document.getElementById("Agree").checked = false;
}
</script>
<center><img src= Images/HorizonHomePageTitle.png ALT="Horizon Bed and Breakfast Title"></center>
</head>
<body>
<script>
window.alert(Please enter data where * is assigned.);
</script>
<center>Budget Rooms<center>
<HR COLOR="blue" WIDTH="60%">
<center>Luxury Rooms<center>
<HR COLOR="blue" WIDTH="60%">
<center>Home<center>
<HR COLOR="blue" WIDTH="60%">
<center>Our privacy policy<center>
<HR COLOR="blue" WIDTH="60%">
<center>Our terms of conditions<center>
<HR COLOR="blue" WIDTH="60%">
<center>Our terms and conditions<center>
<HR COLOR="blue" WIDTH="60%">
<center>Contact us<center>
<form id='CustomerDetailForm' action="">
<!-- ============================== Fieldset 1 - includes personal information of clients ============================== -->
<fieldset>
<legend>Personal Information:</legend>
<hr class="form" />
<label for="Full Name"><strong>Full Name:*</strong></label>
<input name="FullNm" type="text" size="20" id="FN" class="text"/>
<label for="Email"><strong>Email:</strong></label><br/>
<input name="Emil" type="text" size="20" id="EM" class="text"/>
<label for="Age"><strong>Input age if between 18 and 100:</strong></label>
<input name="Ages" type="text" size="20" id="AG" class="text"/>
<label for="select" class="choose"><strong>On what continent do you live?</strong></label>
<select id="select" name="select">
<option value="1">Africa</option>
<option value="2">Europe</option>
<option value="3">Asia</option>
<option value="4">North Amrica</option>
<option value="5">South America</option>
<option value="6">Ausralia</option>
</select>
</fieldset>
<!-- ============================== Fieldset 2 - Includes further optional information from clients to help productivity ============================== -->
<fieldset>
<legend>Questions:</legend>
<hr class="form" />
<label for="select2" class="choose">How long was your stay?</label><br />
<select id="select" name="select2">
<option value="7">Less than one week</option>
<option value="8">More than one week</option>
<option value="9">Months/years</option>
</select>
<label for="select3" class="choose">How many stars would you rate our BnB?</label><br />
<select id="selectCon" name="select3">
<option value="10">One star</option>
<option value="11">Two star</option>
<option value="12">Three star</option>
<option value="13">Four star</option>
<option value="14">Five star</option>
</select>
</fieldset>
<!-- ============================== Fieldset 3 - Holds the comments section, aggreement radio button, submit button and a date button for the client ============================== -->
<fieldset>
<legend>Further commetns:</legend>
<hr class="form" />
<textarea name="message" id="message" cols="20" rows="10"></textarea><br />
<label for="protection" class="spam-protection">Spam check: 1 + 1=</label><br />
<input name="ochrana" type="text" id="protection" class="answer" /><br />
Do you agree to our terms?*<br>
<input type="radio" name="Agreement" id="Agree">Agree<br>
<button onclick="formValidation()">SUBMIT</button>
<script>
function submitFunction() {
alert("Thankyou for your submission");
}
</script>
<script>
function formValidation()
{
var uname = document.registration.FullNm;
var uemail = document.registration.Emil;
var uage = document.registration.Ages;
var ucon = document.registration.select;
{
if(nameinput(FullName,2,25))
{
if(emailval(uemail))
{
if(agenum(ag))
{
if(conselect(con))
{
}
}
}
}
}
}
}
}
return false;
}
function nameinput(uname,2,25)
{
var uname_len = uname.value.length;
if (uname_len == 0 || uname_len >= 2 || uname_len < 25)
{
alert("Full Name is needed. Between "+2+" to "+25" characters.);
uname.focus();
return false;
}
return true;
}
function emailval(uemail,2,25)
{
var uemail_len = uemail.value.length;
if (uemail_len == 0 || uemail_len >= 2 || uemail_len < 30)
{
alert("Email is required.");
uemail.focus();
return false;
}
return true;
}
function agenum(uage,18,100)
{
var uage_len = uage.value.length;
if (uage_len == 0 || uage_len >= 18 || uage_len < 100)
{
alert("Age is required. Between 18 and 100.");
uage.focus();
return false;
}
return true;
}
function conselect(ucon)
{
if(ucon.value == "Default")
{
alert('Select your continent from the list');
ucon.focus();
return false;
}
else
{
return true;
}
}
</script>
</form>
<button type="button"
onclick="document.getElementById('date/time').innerHTML = Date()">
Display date and time.</button>
<p id="date/time"></p>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
<title>Customer details form</title>
<script src="gen_validatorv4.js" type="text/javascript"></script>
<!-- ============================== My failed attempt to try and validate my form with Javascript ============================== -->
<script type="text/javascript">
function check() {
document.getElementById("Agree").checked = true;
}
function uncheck() {
document.getElementById("Agree").checked = false;
}
function formValidation() {
var uname = document.getElementById("FullNm");
var uemail = document.getElementById("Email");
var uage = document.getElementById("Ages");
var ucon = document.getElementById("select1");
if (nameInput(uname)) {
if (emailVal(uemail)) {
if (ageNum(uage)) {
if (conSelect(ucon)) {
}
}
}
}
}
function nameInput(uname) {
var uname_len = uname.value.length;
if (uname_len == 0 || uname_len <= 2 || uname_len > 25) {
alert("Full Name is needed. Between 2 to 25 characters.");
uname.focus();
return false;
}
else {
return true;
}
}
function emailVal(uemail) {
var uemail_len = uemail.value.length;
if (uemail_len == 0) {
alert('Email is required');
return false;
}
else {
return true;
}
}
function ageNum(uage) {
var age = uage.value;
if (age == 0 || age < 18 || age > 100) {
alert("Age is required. Between 18 and 100.");
uage.focus();
return false;
}
else
return true;
}
function conSelect(ucon) {
if (ucon.value == 0) {
alert('Select your continent from the list');
ucon.focus();
return false;
}
else {
return true;
}
}
</script>
<center>
<img src="Images/HorizonHomePageTitle.png" alt="Horizon Bed and Breakfast Title"></center>
</head>
<body>
<center>
Budget Rooms<center>
<hr color="blue" width="60%">
<center>
Luxury Rooms<center>
<hr color="blue" width="60%">
<center>
Home<center>
<hr color="blue" width="60%">
<center>
<a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/"
target="_blank">Our privacy policy</a><center>
<hr color="blue" width="60%">
<center>
<a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf" target="_blank">
Our terms of conditions</a><center>
<hr color="blue" width="60%">
<center>
<a href=" http://www.blogtyrant.com/best-about-us-pages/" target="_blank">Our terms
and conditions</a><center>
<hr color="blue" width="60%">
<center>
Contact us<center>
<form id='CustomerDetailForm' action="">
<!-- ============================== Fieldset 1 - includes personal information of clients ============================== -->
<fieldset>
<table>
<tr>
<td colspan="2">
<legend>Personal Information:</legend>
</td>
</tr>
<tr>
<td>
<label for="Full Name">
<strong>Full Name:*</strong></label>
</td>
<td>
<input id="FullNm" name="FullNm" type="text" size="20" class="text" />
</td>
</tr>
<tr>
<td>
<label for="Email">
<strong>Email:</strong></label><br />
</td>
<td>
<input id="Email" name="Email" type="text" size="20" class="text" />
</td>
</tr>
<tr>
<td>
<label for="Age">
<strong>Input age if between 18 and 100:</strong></label>
</td>
<td>
<input name="Ages" type="text" size="20" id="Ages" class="text" />
</td>
</tr>
<tr>
<td>
<label for="select" class="choose">
<strong>On what continent do you live?</strong></label>
</td>
<td>
<select id="select1" name="select">
<option value="0">Select</option>
<option value="1">Africa</option>
<option value="2">Europe</option>
<option value="3">Asia</option>
<option value="4">North Amrica</option>
<option value="5">South America</option>
<option value="6">Ausralia</option>
</select>
</td>
</tr>
</table>
</fieldset>
<!-- ============================== Fieldset 2 - Includes further optional information from clients to help productivity ============================== -->
<fieldset>
<legend>Questions:</legend>
<hr class="form" />
<label for="select2" class="choose">
How long was your stay?</label><br />
<select id="select" name="select2">
<option value="7">Less than one week</option>
<option value="8">More than one week</option>
<option value="9">Months/years</option>
</select>
<label for="select3" class="choose">
How many stars would you rate our BnB?</label><br />
<select id="selectCon" name="select3">
<option value="10">One star</option>
<option value="11">Two star</option>
<option value="12">Three star</option>
<option value="13">Four star</option>
<option value="14">Five star</option>
</select>
</fieldset>
<!-- ============================== Fieldset 3 - Holds the comments section, aggreement radio button, submit button and a date button for the client ============================== -->
<fieldset>
<legend>Further commetns:</legend>
<hr class="form" />
<textarea name="message" id="message" cols="20" rows="10"></textarea><br />
<label for="protection" class="spam-protection">
Spam check: 1 + 1=</label><br />
<input name="ochrana" type="text" id="protection" class="answer" /><br />
Do you agree to our terms?*<br>
<input type="radio" name="Agreement" id="Agree">Agree<br>
<button onclick="formValidation();">
SUBMIT</button>
</fieldset>
</form>
<script type="text/javascript">
function submitFunction() {
alert("Thankyou for your submission");
}
</script>
<button type="button" onclick="document.getElementById('date/time').innerHTML = Date()">
Display date and time.</button>
<p id="date/time">
</p>
</body>
</html>
Here is my script:
<script type="text/javascript" language="javascript">
function EstimateBMR() {
if ((document.getElementById("Age").value <= 30)&&(document.getElementById('PatientGender').value == 'M')){
(document.FormName.EBMR[0].checked = true);
}
else if ((document.getElementById("Age").value > 30)&&(document.getElementById("PatientGender").value == 'M')){
(document.FormName.EBMR[1].checked = true);
}
else if ((document.getElementById("Age").value <= 30)&&(document.getElementById('PatientGender').value == 'F')){
(document.FormName.EBMR[2].checked = true);
}
else if (document.getElementById("Age").value > 30)&&(document.getElementById('PatientGender').value == 'F')){
(document.FormName.EBMR[3].checked = true);
}
}
</script>
The relevant parts of the rest of the code are:
This code refers to several tables (oscarDB) to pull the values - I wish to use this information to select the appropriate category for the individual.
OSCAR is an opensource emr www.oscarcanada.org
<body onload=" EstimateBMR();">
<form method="post" action="" name="FormName" id="FormName" >
<input name="PatientGender" id="PatientGender" type="hidden" oscarDB=sex>
<td colspan=4 rowspan=3>Name:<input name="PtName" id="PtName" type="text" class="OscarFilled" style=" width:200px;" oscarDB=first_last_name ><br>
DOB:<input name="DOB" id="DOB" type="text" class="OscarFilled" oscarDB=DOBC ><br>
Age:<input name="Age" id="Age" type="text" class="OscarFilled" oscarDB=age ></td>
<span style='background-color:lightgrey;'><b><u>Step 1 Estimate Basal Metabolic Rate</u></b></span> <input name="EBMRCalc" id="EBMRCalc" type="text" class="OscarFilled" ><br>
<input type="radio" name="EBMR" value="0">♂ 18-30 =(0.063XActual Wt Kg+2.8957)X240Kcal/d<br>
<input type="radio" name="EBMR" value="1">♂ 31-60 =(0.0484XActual Wt Kg+3.6534)X240Kcal/d<br>
<input type="radio" name="EBMR" value="2">♀ 18-30 =(0.0621XActual Wt Kg+2.0357)X240Kcal/d<br>
<input type="radio" name="EBMR" value="3">♀ 31-60 =(0.0342XActual Wt Kg+3.5377)X240Kcal/d<br>
I have found my own answer - A missing opening bracket in this line: else if (document.getElementById("Age").value > 30)&&(document.getElementById('PatientGender').value == 'F')){ (document.FormName.EBMR[3].checked = true); } It needs to start else if (( document.getElementById("Age").value ...
Trying to calculate a selection value from a radio group and values from other fields. Any 'Name' input adds a value to the Total. I need the value from the radio group to be added to that total.
Here is the HTML:
<FORM NAME="testauthorization" ACTION="" METHOD=POST id="exhibitreg">
<table>
<tr>
<td><label>
<input type="radio" name="sponsorship" value="3000" id="sponsor1" />
$3,000</label>
<br />
<label>
<input type="radio" name="sponsorship" value="1500" id="sponsor2" />
$1,500</label>
<br />
<label>
<input type="radio" name="sponsorship" value="1000" id="sponsor3" />
$1,000</label>
<br /></td>
</tr>
<tr>
<td>Name 1 <INPUT NAME="Name_1" TYPE="TEXT" id="name1" onchange="updatecost(1, 50)" onkeyup="updatecost(1, 50)" VALUE="" size="30"></td>
<td><INPUT NAME="cost_1" TYPE="TEXT" VALUE="" size="4" id="cost1"></td>
</tr>
<tr>
<td>Name 2<INPUT NAME="Name_2" TYPE="TEXT" id="name2" onchange="updatecost(2, 50)" onkeyup="updatecost(2, 50)" VALUE="" size="30"></td>
<td><INPUT NAME="cost_2" TYPE="TEXT" VALUE="" size="4" id="cost2"></td>
</tr>
<tr>
<td>Name 3<INPUT NAME="Name_3" TYPE="TEXT" id="name3" onchange="updatecost(3, 50)" onkeyup="updatecost(3, 50)" VALUE="" size="30"></td>
<td><INPUT NAME="cost_3" TYPE="TEXT" VALUE="" size="4" id="cost3"></td>
</tr>
<tr>
<td colspan="4">Total:
<INPUT NAME="Total" id="Total" TYPE="TEXT" VALUE="" size="8" onFocus="this.form.elements[0].focus()" >
<INPUT TYPE="HIDDEN" onchange="totalcost()" onkeyup="totalcost()"></td>
</tr>
</table>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<input type="RESET" name="Reset" value="Reset" />
</FORM>
And here is the JS:
<script language="JavaScript" type="text/javascript">
function getRadioValue(name) {
var group = document.getElementsByName('sponsorship');
for (var i=0;i<group.length;i++) {
if (group[i].checked) {
return group[i].value;
}
}
return '';
}
function updatecost(num, dollars) {
var text = document.getElementById("name" + num);
var cost = document.getElementById("cost" + num);
if (!text) return;
if (!cost) return;
if (text.value == "") {
cost.value = "";
}
else {
cost.value = dollars;
}
totalcost();
}
function totalcost() {
var total = 0;
for (var i = 1; i <= 3; i++) {
var cost = document.getElementById("cost" + i);
if (cost.value) total += Number(cost.value);
}
document.getElementById("Total").value = total;
}
//-->
</script>
What am I missing? By the way, in case it is not clear, I am a JS novice, so I fully accept criticism that helps me understand a more fundamental error in my approach. Simple is best for me: ;-) Thank you in advance.
Change below function in place of existing
function updatecost(num, dollars) {
var text = document.getElementById("name" + num);
var cost = document.querySelector('input[name="sponsorship"]:checked');
if (!text) return;
if (!cost) return;
totalcost(cost);
}
function totalcost(cost) {
var total = 0;
for (var i = 1; i <= 3; i++) {
var text1 = document.getElementById("name" + i);
if (text1.value != "") total += Number(cost.value);
}
document.getElementById("Total").value = total;
}
I've been fighting with this for a couple of days now...need some guidance please.
I have pared down a much bigger form to a "sample" size to demonstrate what I am after.
The area in question is blocked off in a very recognizable area in the calcFees function.
I also tried to get fancy and have the vars self post to the form so they could be seen, but that does not work.
UPDATE: Here is a bit more info as to what I am running into.
//At this point the var regularfee is = 26.5
// (confirmed by console.log(regularfee);)
// I want to assign it to the hidden field with the id="regularfee"
// I have tried both of the following lines:
document.getElementById('regularfee').value=regularfee.value;
// console.log(document.getElementById('regularfee.value')); shows "null"
document.getElementById('regularfee').value=regularfee;
// console.log(document.getElementById('regularfee')); shows "[object HTMLDivElement]"
What am I doing wrong?
END OF UPDATE *****************************
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="multiForm" action="post.php" method="POST" id="app" name="app">
<div id="page1" class="page" style="visibility:visible;">
Name: <input type="text" size="40" name="name1" >
<br><br>
<table border="1" cellpadding="5" width="50%">
<tbody>
<tr>
<td align="center" colspan="3"><strong>Membership Classification</strong></td>
</tr>
<tr><td width="1000">
<input name="paymethod" type="radio" class="pay" id="paypal" value="paypal" />I would like to use PayPal
<input name="paymethod" type="radio" class="pay" id="check" value="check" />I would like to pay by check
</td>
<td style="width:150px" align="right">Fee
</td>
<td style="width:150px">
</td></tr>
<tr>
<td><input name="memberclass" type="radio" class="membership" id="regular" value="regular"/> Regular Membership</td>
<td align="right"><div id=regularfee></td>
<td><div align="right" id=regselectedfee></td>
</tr>
<tr><td colspan="2" align="right">Total </td>
<td><div align="right" id=total>
</td></tr></tbody>
</table>
<input type="hidden" name="regularfee" id="regularfee" value="">
<input type="hidden" name="regselectedfee" id="regselectedfee" value="">
<input type="hidden" name="total" id="total" value="">
</form>
<br>
<input type="button" id="C1" value="Continue" onClick="showLayer('page2')">
</td></tr>
</table>
</div>
<div id="page2" class="page">
<b>Page 2
<br><br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="submit" name="submit" value="Click to see Vars" />
</div>
</form>
</body>
</html>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">
var paypalselected
var checkselected
var regularfee
var memberfee1
var total
$(function () {
function clearForm()
{
paypalselected = "0";
checkselected = "0";
regularfee = 0.0;
memberfee1 = 0.0;
total = 0.0;
$("#regselectedfee").text(memberfee1.toFixed(2));
$("#total").text(total.toFixed(2));
// clear all radio buttons
$("#regular").prop("checked", false );
}
function calcFees()
{
total = (memberfee1);
$("#total").text(total.toFixed(2));
// **********************************************************************************
// Here is where I want to plug in the 3 JS vars to the hidden fields
// regularfee, regselectedfee, total
// Here is what I've tried:
// vars are not getting plugged in
// If possible, I would like the vars to be plugged in dynamically
// just as the form is updateddynamically when user selects buttons
document.getElementById('regularfee').value=regularfee;
document.getElementById('regselectedfee').value=regselectedfee;
document.getElementById('total').value=total;
// **********************************************************************************
}
function selectPayment()
{
$(".pay").change(function () {
clearForm();
if ($("#paypal").prop("checked")) {
regularfee = 26.50;
$("#regularfee").text(regularfee.toFixed(2));
paypalselected = "1";
checkselected = "0";
}
if ($("#check").prop("checked")) {
regularfee = 25.0;
$("#regularfee").text(regularfee.toFixed(2));
checkselected = "1";
paypalselected = "0";
}
});
}
clearForm();
selectPayment();
//start of membership button selection
$(".membership").change(function () {
if (paypalselected == "1"){
if ($("#regular").prop("checked")) {
memberfee1 = 26.5;
$("#regselectedfee").text(memberfee1.toFixed(2));
calcFees();
}
} //end of paypalselected test
if (checkselected == "1"){
if ($("#regular").prop("checked")) {
memberfee1 = 25.0;
$("#regselectedfee").text(memberfee1.toFixed(2));
calcFees();
}
} //end of checkselected test
}); //end of $(".membership").change(function () {
});
//end of main function
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
window.scrollTo(0,0);
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
</script>
<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
p.small
{
line-height: 5px;
}
p.smalltext12
{
font-size:12px
}
</style>
You have 2 elements #total. Only the first is given a value:
document.getElementById('total').value = total;
Same for the others.
IDs must be unique to be useful.