Formula result=a*33-86 with javascript?

[hariskar]

I am trying to make a script with the formula above. If we put a value to a, the result should be calculated.I wrotevar result=hba1c*33.3-86;hba1c=5;document.write(result);but it does not work. I put hba1c=5 to see if it works.Any help?Thank you!

[ShadowMage]

Did you check the error console? Are there any errors? Where is hba1c getting its value from?

[thescientist]

you need to define hba1c before you can use it.

var hba1c=5;var result=hba1c*33.3-86;document.write(result);

[eTianbun]

Do what theScientist said!

[hariskar]

Thank you, it worked!At the moment it does not get values from anywhere.I would like it to take values from a text form, bu I have to figure out how to do it.Thank you again!

[hariskar]

So, I made a working form+script for my formula, but it is ugly and not like the one I use now in http://www.mikroviol...s/95-hba1c.html at the bottom of the pageOf course, I don't expect it to become identical, but:-How could the result be on the page and not in a text field?-Could the result be a table like my page I mentioned?Here is the code:

<form action="" method="get" name="HbA1c_form"><p>Hba1c: <input type="text" id="userValue"><br><input type="button" value="Result:" onclick="calcResult();"><input type="text" id="result" onkeydown="return false;"></p></form> <script type="text/javascript">function calcResult() {n=document.getElementById('userValue').valueresultEl=document.getElementById('result');n=parseFloat(n);resultEl.value=(n*33.3-86).toFixed(0);}</script>

[thescientist]

-How could the result be on the page and not in a text field?

use a semantic DOM element, like <p> or <span> and innerHTML

-Could the result be a table like my page I mentioned?

sure. look in the HTML tutorials if you don't know how to make a table, and if it is for displaying tabular data

Here is the code attached:

don't see an attachment

[hariskar]

don't see an attachment

Sorry, I put the code in the message instead of attaching it.Thank you for reply!

[hariskar]

I made some changes to the code I mentioned in my previous post, but now the result takes the place of the whole page and the only text seen is on a white background "Estimated result: 147mg/dl". How can I make the line above to show under the text filed?Thank you Here is the new code:

<form action="" method="get" name="HbA1c_form"><p>Hba1c: <input type="text" id="userValue"><input type="button" value="Submit;:" onclick="calcResult();"></p></form> <script type="text/javascript">function calcResult() {n=document.getElementById('userValue').valuen=parseFloat(n);resultEl=(n*33.3-86).toFixed(0);document.write('Estimated result: ');document.write(resultEl);document.write('mg/dl');}</script>

[ShadowMage]

I made some changes to the code I mentioned in my previous post, but now the result takes the place of the whole page and the only text seen is on a white background "Estimated result: 147mg/dl".

Because you're using document.write to display the result. document.write destroys the current document and creates a new one.

How can I make the line above to show under the text filed?

scientist told you how to do that:

use a semantic DOM element, like <p> or <span> and innerHTML

In other words, instead of using an input for your result like you do in your original code, you'll use a div or span and set the innerHTML property instead of the value property.

[hariskar]

Thank you for replies again!Here is some progress:

  <form action="" method="get" name="HbA1c_form">Hba1c: <input type="text" id="userValue"><input type="button" value="Υπολογισμός:" onclick="calcResult();"></form> <div id='d' style="float: left; text-align: left;"></div><div id='resultEl' style="float: left; text-align: left;"></div><div id='m' style="float: left; text-align: left;"></div>   <script type="text/javascript">function calcResult() {n=document.getElementById('userValue').valuen=parseFloat(n);resultEl=(n*33.3-86).toFixed(0);m='mg/dl';d='Εκτιμώμενη μέση τιμή σακχάρου: ';document.getElementById('d').innerHTML=d;document.getElementById('resultEl').innerHTML=resultEl;document.getElementById('m').innerHTML=m;}</script>

Could you tell me, if I can put the 3 variables above (d, m, resultEl) in a table and instead of calling these 3 seperately, call the table that contains them? Like in my page http://www.mikroviologos.gr at the bottom?Thank you!

[thescientist]

you can make a table, and give an ID to whatever table elements that you want to inject the data into. the technique is the same, you can make the layout whatever you want

[hariskar]

Thank you, it worked, but how can I saw the table only if I click the submit button?

[ShadowMage]

Set it's display with CSS to none. Then in your calcResults function, set the display to table.

[hariskar]

Thank you!It works but in cell id="resultl" only element m is visible and not resultEl, which I would like it to saw in the left of element m. If I delete m I can see resultEl, but not both together in the same cell. Can both be seen in same cell?

<form action="" method="get" name="HbA1c_form">Hba1c: <input type="text" id="userValue"><input type="button" value="Υπολογισμός:" onclick="calcResult();"></form><table id="table_hba1c" border="1" style="display:none;"><tr><td>row 1, cell 1</td><td>Αποτέλεσμα</td></tr><tr><td>Εκτιμώμενη μέση τιμή σακχάρου</td><td id="resultl"></td></tr></table><script type="text/javascript">function calcResult() {n=document.getElementById('userValue').valuen=parseFloat(n);resultEl=(n*33.3-86).toFixed(0);m='mg/dl';d='Εκτιμώμενη μέση τιμή σακχάρου:  ';document.getElementById('resultl').innerHTML=resultEl;document.getElementById('resultl').innerHTML=m;document.getElementById('table_hba1c').style.display="table";}</script>

[thescientist]

but that's what you're telling it to do. First you assign resultEl to the innerHTML, then you overwrite it and assign m. Either put two unique elements inside the table cell (like a <span> with unique ID's and set them that way), or just concatenate it all as one string.

document.getElementById('resultl').innerHTML = resultEl + " " + m;

[hariskar]

Thank you!I would like to open an alert popup if for example someone puts letters or nothing and clicks submit (should I do it with If...Else?) andmake Enter submit the form (can I do this with html or do I have to use javascript?).Also is something like jQuery slideToggle() possible with javascript?Do I have to make 3 more functions for all above or do I have to put all in the function I already have?

[ShadowMage]

I would like to open an alert popup if for example someone puts letters or nothing and clicks submit (should I do it with If...Else?)

Typically, yes, you would use if statements for that. You could also use regexes, but those are a little more advanced.

make Enter submit the form (can I do this with html or do I have to use javascript?).

By default, I think, inputs that are in a form will submit the form by hitting the enter key. Otherwise, yes you'll have to use javascript to bind an event handler to the onkeypress or onkeydown/up events to check which key was pressed and if it was the enter key (key code 13, I believe) submit the form.

Also is something like jQuery slideToggle() possible with javascript?

jQuery is javascript.

Do I have to make 3 more functions for all above or do I have to put all in the function I already have?

You can put that stuff where ever you like.

[thescientist]

I would like to open an alert popup if for example someone puts letters or nothing and clicks submit (should I do it with If...Else?) andmake Enter submit the form (can I do this with html or do I have to use javascript?).

HTML5 allows for making input elements required, but I probably not all browsers require it. With javascipt, you can validate the form and check the inputs, and return false if the validation fails. This can be done by hooking into the form onSubmit event. Do some searches for form validation with JS and gleam over some example, and come back with something you tried and we will take it from there. The Enter button should trigger the submit to fire.

Also is something like jQuery slideToggle() possible with javascript?

jQuery is javascript, it's just a library written for the language. Why not just use slideToggle from jQuery then.

Do I have to make 3 more functions for all above or do I have to put all in the function I already have?

the validation stuff would go within your function. for the slideToggle effect, it would just be a matter of applying the effect to the appropriate selector for the appropriate event. All in all, try some stuff and come back with your code.

[hariskar]

By default, I think, inputs that are in a form will submit the form by hitting the enter key. Otherwise, yes you'll have to use javascript to bind an event handler to the onkeypress or onkeydown/up events to check which key was pressed and if it was the enter key (key code 13, I believe) submit the form.

The Enter button should trigger the submit to fire.

Thank you for replies! My form is:

<form action="" method="get" name="HbA1c_form">Hba1c% <input type="text" id="userValue" size="15"><input type="button" value="Υπολογισμός" onclick="calcResult();"></form>

With input type="button" Enter does not work.If I put input type="submit" Enter and submit button works, but after about a second the page reloads without the result (table)

[thescientist]

<form action="" method="get" name="HbA1c_form">Hba1c% <input type="text" id="userValue" size="15"><input type="button" value="Υπολογισμός" onclick="calcResult();"></form>

With input type="button" Enter does not work.If I put input type="submit" Enter and submit button works, but after about a second the page reloads without the result (table)

HTML5 allows for making input elements required, but I probably not all browsers require it. With javascipt, you can validate the form and check the inputs, and return false if the validation fails.[/n] This can be done by hooking into the form onSubmit event. Do some searches for form validation with JS and gleam over some example, and come back with something you tried and we will take it from there.

[hariskar]

Thank you!Here is the new code. Now if someone presses the button with empty text field an alert comes!But I didn't manage to do anything with enter..I think the problem is that in my form I don't use "submit" but "button" input type. But if I change it to "submit" the whole page reloads and the result (table) remains for 1 second only.

<form id=hba1c action="" method="post" name="HbA1c_form">Hba1c% <input type="text" id="userValue" size="15"><input type="button" value="Υπολογισμός" onclick="calcResult();"></form><table id="table_hba1c" style="display:none;"><tr><td width="460"></td><td width="200">Αποτέλεσμα</td></tr><tr><td>Εκτιμώμενη μέση τιμή σακχάρου</td><td id="resultl"></td></tr></table><script type="text/javascript">function calcResult() {n=document.getElementById('userValue').valuen=parseFloat(n);var userValue=document.forms["hba1c"]["userValue"].value;if (userValue==null || userValue==""){alert("Παρακαλώ καραχωρήστε την τιμή της HbA1c!");return false;}resultEl=(n*33.3-86).toFixed(1);m='mg/dl';d='Εκτιμώμενη μέση τιμή σακχάρου:  ';document.getElementById('resultl').innerHTML=resultEl + " " + m;document.getElementById('table_hba1c').style.display="table";}</script>

[thescientist]

Like i said, you need to return false. If you did some Googling, typically users return false from the event handler, and the validation function. you could have just looked on w3schools...http://www.w3schools.com/js/js_form_validation.asp

[hariskar]

Thank you

[hariskar]

Like i said, you need to return false. If you did some Googling, typically users return false from the event handler, and the validation function. you could have just looked on w3schools...http://www.w3schools..._validation.asp

Thank youI have done all above but I am stuck with this.. The problem is that with submit the page reloads, I don't want a page submit, I want

document.getElementById('resultl').innerHTML=resultEl + " " + m;document.getElementById('table_hba1c').style.display="table";