hariskar Posted March 19, 2012 Share Posted March 19, 2012 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! Link to comment Share on other sites More sharing options...
ShadowMage Posted March 19, 2012 Share Posted March 19, 2012 Did you check the error console? Are there any errors? Where is hba1c getting its value from? Link to comment Share on other sites More sharing options...
thescientist Posted March 19, 2012 Share Posted March 19, 2012 you need to define hba1c before you can use it. var hba1c=5;var result=hba1c*33.3-86;document.write(result); Link to comment Share on other sites More sharing options...
eTianbun Posted March 19, 2012 Share Posted March 19, 2012 Do what theScientist said! Link to comment Share on other sites More sharing options...
hariskar Posted March 19, 2012 Author Share Posted March 19, 2012 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! Link to comment Share on other sites More sharing options...
hariskar Posted March 20, 2012 Author Share Posted March 20, 2012 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> Link to comment Share on other sites More sharing options...
thescientist Posted March 20, 2012 Share Posted March 20, 2012 -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 Link to comment Share on other sites More sharing options...
hariskar Posted March 20, 2012 Author Share Posted March 20, 2012 don't see an attachment Sorry, I put the code in the message instead of attaching it.Thank you for reply! Link to comment Share on other sites More sharing options...
hariskar Posted March 21, 2012 Author Share Posted March 21, 2012 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> Link to comment Share on other sites More sharing options...
ShadowMage Posted March 21, 2012 Share Posted March 21, 2012 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 innerHTMLIn 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. Link to comment Share on other sites More sharing options...
hariskar Posted March 21, 2012 Author Share Posted March 21, 2012 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! Link to comment Share on other sites More sharing options...
thescientist Posted March 21, 2012 Share Posted March 21, 2012 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 Link to comment Share on other sites More sharing options...
hariskar Posted March 22, 2012 Author Share Posted March 22, 2012 Thank you, it worked, but how can I saw the table only if I click the submit button? Link to comment Share on other sites More sharing options...
ShadowMage Posted March 22, 2012 Share Posted March 22, 2012 Set it's display with CSS to none. Then in your calcResults function, set the display to table. Link to comment Share on other sites More sharing options...
hariskar Posted March 22, 2012 Author Share Posted March 22, 2012 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> Link to comment Share on other sites More sharing options...
thescientist Posted March 22, 2012 Share Posted March 22, 2012 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; Link to comment Share on other sites More sharing options...
hariskar Posted March 22, 2012 Author Share Posted March 22, 2012 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? Link to comment Share on other sites More sharing options...
ShadowMage Posted March 22, 2012 Share Posted March 22, 2012 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. Link to comment Share on other sites More sharing options...
thescientist Posted March 22, 2012 Share Posted March 22, 2012 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. Link to comment Share on other sites More sharing options...
hariskar Posted March 23, 2012 Author Share Posted March 23, 2012 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) Link to comment Share on other sites More sharing options...
thescientist Posted March 26, 2012 Share Posted March 26, 2012 <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. Link to comment Share on other sites More sharing options...
hariskar Posted March 27, 2012 Author Share Posted March 27, 2012 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> Link to comment Share on other sites More sharing options...
thescientist Posted March 27, 2012 Share Posted March 27, 2012 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 Link to comment Share on other sites More sharing options...
hariskar Posted March 27, 2012 Author Share Posted March 27, 2012 Thank you Link to comment Share on other sites More sharing options...
hariskar Posted March 28, 2012 Author Share Posted March 28, 2012 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 wantdocument.getElementById('resultl').innerHTML=resultEl + " " + m;document.getElementById('table_hba1c').style.display="table"; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.