Printable View
Trying to get my Submit button to work on this calculator script. I want to retrieve the values for the user and CALCULATE...The button only clears the form and I'm not sure if the functions are calling properly. If there is anyone out there that can help me, please respond and I will post the script.
Go ahead and post the script and I'll see what I can do. I need to see the entire form and all the javascript.
Here it is...My issue is in the actual javascript. I'm not sure if I'm going about this the right way.
<!DOCTYPE html PRIVATE Copyright of UNC Charlotte>
<head>
<script type="text/javascript">
function getgmSize(form)
{
//var theForm=documents.forms["ngs1form"];
var gsize=form.gsize.value
//var gsize=0
if(gm.value!="")
{
gsize=parseInt(gsize.value);
}
return gsize;
}
function getRunTime(form)
{
var runtime = new Array();
run_time["r4 FLX"]=10;
run_time["t- g2 75bp SE"]=168;
run_time["t- g2 75bp PE"]=168;
run_time["t- g2 100bp SE"]=228;
run_time["t- g2 100bp PE"]=228;
run_time["t- hp 100bp SE"]=228;
run_time["t- hp 100bp PE"]=228;
run_time["abs"]=160;
run_time["hh-9"]=190;
run_time["pbj"]=3;
run_time["it-6"]=3;
var run_time=0;
//var theForm=document.forms["ngs1form"];
run_index=selectedPlatform.selectedIndex;
var selectedPlatform = ngs1form.elements["Technology"].selectedIndex;
if(selectedPlatform >0)
{
var sel_platform_value=selectedPlatform.options[index].value;
run_time=run_time[selectedPlatform.value];
return run_time;
}
else{
alert('Please select a platform');
}
function getlength(form)
{
var read_length= new Array();
read_length["r4 FLX"]=400;
read_length["t- g2 75bp SE"]=75;
read_length["t- g2 75bp PE"]=75;
read_length["t- g2 100bp SE"]=100;
read_length["t- g2 100bp PE"]=100;
read_length["t- hp 100bp SE"]=100;
read_length["t- hp 100bp PE"]=100;
read_length["abs"]=50;
read_length["hh-9"]=40;
read_length["pbj"]=10000;
read_length["it-6"]=100;
var length=0;
//var theForm =document.forms["ngs1form"];
var selectedPlatform=document.ngs1form.elements["Technology"];
length=read_length[selectedPlatform.value];
document.write(length);
}
function getRuns()
{
var runs = new Array();
reads_run["r4 FLX"]=1000000;
reads_run["t- g2 75bp SE"]=30000000;
reads_run["t- g2 75bp PE"]=60000000;
reads_run["t- g2 100bp SE"]=25000000;
reads_run["t- g2 100bp PE"]=50000000;
reads_run["t- hp 100bp SE"]=168750000;
reads_run["t- hp 100bp PE"]=337500000;
reads_run["abs"]=0;
reads_run["hh-9"]=0;
reads_run["pbj"]=50000;
reads_run["it-6"]=100000;
var rpruns=0;
//var theForm=document.forms["ngs1form"];
var selectedPlatform=document.ngs1form.elements["Technology"];
rpruns=reads_run[selectedPlatform.value];
return rpruns;
}
function getgmSize(form)
{
//var theForm=documents.forms["ngs1form"];
var gsize=form.gsize.value
//var gsize=0
if(gm.value!="")
{
gsize=parseInt(gsize.value);
}
return gsize;
}
function getcv(form)
{
//var theForm=documents.forms["ngs1form"];
var cv=form.cv.value
//var cv=0
if(cv.value!="")
{
cv=parseInt(cv.value);
}
return cv;
}
function calculate(form)
{
form.results.value = (getgmSize*getcv)/(getRuns*getlength);
//var divobj = document.getElementById('totalLanes');
//document.write(lanes);
//divobj.style.display='block';
//divobj.innerHTML = "Estimated number of lanes required"+lanes;
}}
</script>
</head>
<body>
<form name="ngs1form" method="post">
<div id="topbar" class="transparent"></div>
<div id="blueleftbutton"> <a href="index2.html"><img alt="home" src="images/home.png" width=100% height=100%></a></div><div class="center" id="title">Lane Calculator</div></br></br>
<div id="tributton"><div class="links"><a href="ngs1.html">Lanes</a><a href="ngs2.html">Coverage</a><a href="stats.html">Platform Stats</a></div></div></br>
</div>
<span class="graytitle">Genome Size (Mb)</span>
<ul class="pageitem">
<li class="bigfield"><input placeholder="Enter Genome size" type="text" id="gensize"/></li>
</ul>
<span class="graytitle">Platform</span>
<ul class="pageitem">
<li class="select">
<select id="popup" name="Technology" size="1">
<option value="Select"> - Select your Platform - </option>
<option value="0">r4</option>
<option value="Il">Il SE</option>
<option value="IlPE">Il PE</option>
<option value=" SE">Ip SE</option>
<option value="Ip PE">Il</option>
<option value="I 100bp SE">Illbp SE</option>
<option value="Ilq 100bp PE">Il 100bp PE</option>
<option value="A">AD</option>
<option value="Hee">pe</option>
<option value="Po">Po</option>
<option value="I">It</option>
</select>
<span class="arrow"></span>
</li>
</ul>
<span class="graytitle">Coverage</span>
<ul class="pageitem">
<li class="bigfield"><input placeholder="Enter required" type="text" id="coverage" name="coverage"/></li>
</ul>
<center>
<span class="button"></span>
<ul class="pageitem">
<li class="button"><input name="results" type="submit" value="Submit" onclick="javascript:calculate(this.form)"/></li>
</ul>
<div>
<span class="graytitle">Results</span>
<ul class="pageitem">
<li class="bigfield"><input type="text" name="results"/></li>
</ul>
</div>
</form>
</body>
</html>
You're declaring a variable "runtime" then setting a different variable "run_time". An then, after that, you're re-declaring and setting "run_time" to 0. You also didn't close the "getRunTime" function before defining "getlength".
All your variables should be declared in one statement in the top of the function and the function should have clearer structure than you have:
THis makes it easier to read you code and find mistakes.Code:function someFunctionName (arg1, arg2, arg3) {
var someVar, anotherVar = 0, yetAnotherVar;
if (arg1 === true) {
someVar = 1;
} else {
someVar = 2;
}
yetAnotherVar = anotherVar - (someVar * (arg2 + arg3));
return yetAnotherVar;
}
As it stands in your code right now, your "calculate" function and several others are actually being defined inside your "getRunTime" function.
Notice how I moved the brackets for the function. This isn't PhP, and they don't follow the same formatting conventions.
Okay, that definitely means I've been looking at this too long. I missed all of those. Okay, that makes sense. I should keep the arrays consistent correct?
Does it matter if I call more than one javascript in the head part of the document???
Thank you again jamesbcox
Will you be able to reply if I need more help???:)
Yes, I subscribed to this post, so if you fix all your formatting and variable names, and it still doesn't work, post the new code and we'll go from there.
To answer your two questions, whether you keep the arrays consistent is up to you. Keeping them consistent would make it easy to copy and paste or to see mistakes. And no doesn't matter how many scripts you call in the head. They are loaded in the order they are written (synchronously).
I've edited the code and fixed the errors (to my knowledge). Still not working. I've even reduced to one function with an alert and it still does not work.
I want to give the user two text fields and a drop down list. based on the selection of the list and the values, there will be a number generated.
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<!--© 2011 UNC Charlotte | All Rights Reserved.
function getGenomeSize()
{
//var theForm=documents.forms["ngs1form"];
var gensize=form.gensize.value
//var gensize=0
if(size.value!="")
{
size=parseInt(gensize.value);
}
return size;
}
function getRunTime()
{
var runtime = new Array();
runtime["454 FLX"]=10;
runtime[" 75bp SE"]=168;
runtime[" 75bp PE"]=168;
runtime["100bp SE"]=228;
runtime[" 100bp PE"]=228;
runtime[" 100bp SE"]=228;
runtime["100bp PE"]=228;
runtime["A"]=160;
runtime["H"]=190;
runtime["P"]=3;
runtime["I"]=3;
//var run_time=0;
//var theForm=document.forms["ngs1form"];
run_index=selectedPlatform.selectedIndex;
var selectedPlatform = ngs1form.elements["Technology"].selectedIndex;
if(selectedPlatform >0)
{
var sel_platform_value=selectedPlatform.options[index].value;
runt_ime=runtime[selectedPlatform.value];
return run_time;
}
else{
alert('Please select a platform');
}
}
function getReadLength()
{
var read_length= new Array();
read_length[" 454 FLX"]=400;
read_length[" 75bp SE"]=75;
read_length["75bp PE"]=75;
read_length[" 100bp SE"]=100;
read_length[" 100bp PE"]=100;
read_length[" 100bp SE"]=100;
read_length[" 100bp PE"]=100;
read_length["A"]=50;
read_length["H"]=40;
read_length["P"]=10000;
read_length["I"]=100;
//var readLength=0;
//var theForm =document.forms["ngs1form"];
var selectedPlatform=document.ngs1form.elements["Technology"];
length=read_length[selectedPlatform.value];
document.write(length);
}
function getRuns()
{
var reads_run = new Array();
reads_run[" 454 FLX"]=1000000;
reads_run["75bp SE"]=30000000;
reads_run["75bp PE"]=60000000;
reads_run["100bp SE"]=25000000;
reads_run["100bp PE"]=50000000;
reads_run[" 100bp SE"]=168750000;
reads_run["Seq 100bp PE"]=337500000;
reads_run["A"]=0;
reads_run["H"]=0;
reads_run["P"]=50000;
reads_run["I"]=100000;
//var rpruns=0;
//var theForm=document.forms["ngs1form"];
var selectedPlatform=document.ngs1form.elements["Technology"];
readsperun=reads_run[selectedPlatform.value];
return readsperun;
}
function getGenomeSize()
{
//var theForm=documents.forms["ngs1form"];
var gensize=form.gensize.value
//var gensize=0
alert (gensize);
}
function getCoverage()
{
//var theForm=documents.forms["ngs1form"];
var coverage=form.coverage.value
//var coverage=0
return coverage;
}
function calculate()
{
lanes= (getGenomeSize()*getCoverage())/(getRuns()*getReadLength());
var divobj = document.getElementById('results');
//document.write(lanes);
//divobj.style.display='block';
divobj.innerHTML = "Estimated number of lanes required"+lanes;
}
You basically commented out your entire page with the copywrite comment. You need to start a script tag. I'll work with it for a minute and see if I can get it working.
I had to place that inside. I commented it back out once I seen all gray. I figured out how to get the button to work but only with one function which is based on the text field. Now I'm trying to see how I can pull the values from the arrays so that the functions can be completed. Thanks a lot. I too am trying to error proof this piece by piece.
Ok here's what I've got. I simply reprogrammed it the way I would do it if it were my page. Notice I created an object to store the measurements instead of an array. Now, I was just guessing on which ones went with which, because you had them labeled differently, so please go over that and fix if necessary. The reason I created the object was a) to make it easier to set and call and b) arrays have more overhead than objects (wouldn't matter so much here as in a larger script).
Couple of things to note:
1. Javascript comments start with "/*" and end with "*/" or simply start comment the rest of a line with "//".
2. forms and form elements are called with document.formName.inputName. an input in HTML is given an "id" AND a "name" for these purposes. The id is only needed if you wish to call an element directly using document.getElementId([id]). This was where your first problem was. I was getting the error "form is not defined", because you were using it as a variable in the javascript. So look closely at how I called the form in your onclick attribute. Also notice that I removed the "javascript: " part, as that is only used in the HREF of an anchor tag.
3. Keep in mind that no two elements in HTML can have the same name or id.
4. if you look closely, I added ".toFixed(2)" to the result so that it would limit the result to 2 decimals. Change this as needed for precision.
5. If you're going to use private DOCTYPE standards, follow them. You're using an unknown HTML doctype, and then in your body you're actually using XHTML. I converted your elements for this.
6. "placeholder" is part of HTML5. Be careful not to mix standards in your documents. Modern browsers "fix" these mistakes at runtime, but it's better not to make them in the first place.
7. ".innerHTML" will not retrieve the value of an input. For that, use document.formName.inputName.value.
HTML Code:<!DOCTYPE html PRIVATE "Copyright of UNC Charlotte">
<html>
<head>
<title>Lane Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/*<![CDATA[*/
//2011 UNC Charlotte | All Rights Reserved.
var test_vars = {
"0" : {"runs" : 1000000, "read" : 400},
"Il" : {"runs" : 30000000, "read" : 75},
"IlPE" : {"runs" : 60000000, "read" : 75},
"SE" : {"runs" : 25000000, "read" : 100},
"Ip PE" : {"runs" : 50000000, "read" : 100},
"Ilq 100bp P" : {"runs" : 168750000, "read" : 100},
"Seq 100bp PE" : {"runs" : 337500000, "read" : 100},
"A" : {"runs" : 0, "read" : 50},
"H" : {"runs" : 0, "read" : 40},
"P" : {"runs" : 50000, "read" : 10000},
"I" : {"runs" : 100000, "read" : 100}
};
function valToNum(element) {
return parseFloat(element.value);
}
function getTestVar(element, part) {
return test_vars[element.value][part];
}
function calculate(form) {
var lanes;
if (form.Technology.value === "Select") {
alert("Please select a platform.");
return false;
} else {
lanes = (valToNum(form.gensize) * valToNum(form.coverage)) / (getTestVar(form.Technology, "runs") * getTestVar(form.Technology, "read"));
form.results.value = lanes.toFixed(2);
return true;
}
}
/*]]>*/
</script>
</head>
<body>
<form name="ngs1form" action="" method="post">
<div id="topbar" class="transparent">
</div>
<div id="blueleftbutton">
<a href="index2.html">
<img alt="home" src="images/home.png" width="100%" height="100%">
</a>
</div>
<div class="center" id="title">
Lane Calculator
</div>
<br>
<br>
<div id="tributton">
<div class="links">
<a href="ngs1.html">Lanes</a>
<a href="ngs2.html">Coverage</a>
<a href="stats.html">Platform Stats</a>
</div>
</div>
<br>
<div>
<span class="graytitle">Genome Size (Mb)</span>
<ul class="pageitem">
<li class="bigfield">
<input placeholder="Enter Genome size" name="gensize" type="text" id="gensize">
</li>
</ul>
<span class="graytitle">Platform</span>
<ul class="pageitem">
<li class="select">
<select id="popup" name="Technology" size="1">
<option value="Select"> - Select your Platform - </option>
<option value="0">r4</option>
<option value="Il">Il SE</option>
<option value="IlPE">Il PE</option>
<option value="SE">Ip SE</option>
<option value="Ip PE">Il</option>
<option value="I 100bp SE">Illbp SE</option>
<option value="Ilq 100bp PE">Il 100bp PE</option>
<option value="A">AD</option>
<option value="Hee">pe</option>
<option value="Po">Po</option>
<option value="I">It</option>
</select>
<span class="arrow">
</span>
</li>
</ul>
<span class="graytitle">Coverage</span>
<ul class="pageitem">
<li class="bigfield">
<input placeholder="Enter required" type="text" id="coverage" name="coverage">
</li>
</ul>
<span class="button"></span>
<ul class="pageitem">
<li class="button">
<input type="submit" value="Submit" onclick="calculate(document.ngs1form); return false;">
</li>
</ul>
</div>
<div>
<span class="graytitle">Estimated number of lanes required:</span>
<ul class="pageitem">
<li class="bigfield">
<input type="text" id="results" name="results">
</li>
</ul>
</div>
</form>
</body>
</html>
also, if you're going to use a private doctype, you need to define the actual location of the doctype standards so that the browser can properly parse the code. otherwise, just use the standard doctype:
It doesn't mean your document is public, it just means you'll be using the publically published standards. Private means you've got a private standards list published somewhere.HTML Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Okay, you know after reading all these tutorials, it makes more sense the way you explained it. I also like the way the arrays are combined, I was trying to find a way to have the multi-dimension, but could not get it. I will change the private to public and make it easier to handle. I appreciate your time and credit will be given to you for your help. This is my first run in with Javascript. Lol, its getting easier to understand now.
I am going to try this out and get back to you.
Well, to explain the combined arrays thing in more detail, I actually didn't use an array. The thing about arrays is if you try to use strings for the indices (basically creating an associative array), you're going to create an excess of overhead. Arrays come with several methods and properties that objects don't have (essentially objects only have what you give them).
You can easily create a multidimensional array simply by making any element of an array into an array itself:
With an object, you can do basically the same thing, just with a slightly different structure:Code:var myArray = [];
myArray[0] = 2;
myArray[1] = [5, 9];
alert(myArray[1][0]);
Here's some more info on that:Code:var myObject = {
"first" : 2,
"second" : {
"top" : 5,
"bottom" : 9
}
};
alert(myObject["second"]["bottom"]);
alert(myObject.second.bottom);
http://nfriedly.com/techblog/2009/06...-like-objects/
Oh ok. Jamesbcox you are a genius..It looks much simpler this way. I see the values are still able to be used as well. That is definitely much easier than what I was doing. I will have to read up on the object function. I will have to try this method for the other two codes I have to do. Thanks for the tutorial also. I have to read over this now so I can get a better understanding.
Thanks again Jamesbcox. I may be bothering you again, if you don't mind. :):):)
Well, I'm glad it works for you! If you have any other questions about the way I wrote the code, please let me know. I'd normally like to give you the information you need to figure it out on your own rather than just write it for you, but in this case the problem was really just about organizing your structure.
In order to keep it simple, often times you just need to know what tools are available to you, which takes time and experience. We could have written this script with a single function, however I wanted to show you how the purpose of having functions in the first place is to group repeating code so that a single instance of it can be reused.
If you think about it in terms of the actual process you want your user to have, there's really only a single step once the user clicks the submit button, so your code should reflect that. When I build code, my code starts with an equal number of functions for the number of steps required by the user, and then I'll break out the repeated parts into other functions, such as ajax functions (or data retrieval in general), data conversion functions, animation functions, graphical changes, etc.
One of the big reasons I've become a stickler for strict code structure is that it gives your code a sort of landscape, with landmarks that you can find easily as you scan through your code. When you start building large apps, you can scroll at high speed and find exactly where you need to go without reading a thing. Errors will stick out much better at that point as well.
Anyway, I'm babbling, but again, be sure to ask any questions you might have.
