remotho Posted November 13, 2014 Share Posted November 13, 2014 Hallo, I want to to my first calculator. I Need to enter 3 or 4 data in a form and then doing a arithmetic Operation, For Example: all are variable Data1 = xx Data2 = xxx Data3 = xxx a button to do the calculation then the Output: example: LMB = Data1 / Data 2 STB = LMB - Data3 LS4 = STB - 10 * (25 * Data2) - 100 etc... Link to comment Share on other sites More sharing options...
justsomeguy Posted November 13, 2014 Share Posted November 13, 2014 Which part do you need help with? Do you have any code so far? If not, start by making the form. Link to comment Share on other sites More sharing options...
remotho Posted November 14, 2014 Author Share Posted November 14, 2014 <script>Z = 8;AT = 4;LMB = 2500;WM = LMB - Z;STB = WM / AT;LS4 = STB - (23.775 * AT) - 426.93; console.log(LS4);console.log(STB);console.log (WM);</script <form><br>LMB <input type="mm" id="LMB" /> </br><br>Z <input type="mm" id="Z" /></br><br>AT <input type="" id="AT" /></br> <input type="button" value="Calculate" onclick="Calculate()" /> </form> my problem is, how can I connect the data from the Form to other page and view the calculation. Link to comment Share on other sites More sharing options...
Ingolme Posted November 14, 2014 Share Posted November 14, 2014 The script and the input fields should be on the same page. There's no need for a <form> element, so remove that. Wrap your script in a function called Calculate(). In that function, use getElementById() to access the form elements and get their value property, assign those values to the Z, AT and LMB variables. Link to comment Share on other sites More sharing options...
remotho Posted November 14, 2014 Author Share Posted November 14, 2014 </head><body><p>Einbauhöhe:<script type="text/javascript">document.write(parent.EH );</script></p><p>Lichmassbreite<script type="text/javascript">document.write(parent.LMB);</script></p<p>TH<script type="text/javascript">document.write(parent.EH - parent.Q2 - parent.Z2 - parent.Z1);</script></p><p>TH<script type="text/javascript">document.write(parent.EH - parent.Q2 - parent.Z2 - parent.Z1);</script></p><p>TH<script type="text/javascript">document.write(parent.EH - parent.Q2 - parent.Z2 - parent.Z1);</script></p> </body></html> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Wertübergabe mittels Framestruktur - Sendendes Dokument </title><script type="text/javascript">function uebergabe () { parent.EH = document.forms.formular.elements.EH.value; parent.LMB = document.forms.formular.elements.LMB.value; parent.Z3 = document.forms.formular.elements.Z3.value; parent.Z1 = document.forms.formular.elements.Z1.value; parent.Z2 = document.forms.formular.elements.Z2.value; parent.S = document.forms.formular.elements.S.value; parent.Q2 = document.forms.formular.elements.Q2.value; parent.Z1 = document.forms.formular.elements.Z1.value; location.href = "daten_L_Bodenprofil.html"; return false;}</script></head><body><form name="formular" action="" onsubmit="return uebergabe();"> <p>Parameter</p> <p> <label for="EH">EH:</label> <input type="text" name="EH" id="EH" size="25"> </p> <p> <label for="LMB">LMB:</label> <input type="text" name="LMB" id="LMB" size="25"> </p> <p> <label for="Z3">Z3:</label> <input type="text" name="Z3" id="Z3" size="25"> </p> <p> <label for="Z2">Z2:</label> <input type="text" name="Z2" id="Z2" size="25"> </p> <p> <label for="Z1">Z1:</label> <input type="text" name="Z1" id="Z1" size="25"> </p <p> <label for="S">S:</label> <input type="text" name="S" id="S" size="25"> </p> <label for="Q2">Q2:</label> <input type="text" name="Q2" id="Q2" size="25"> </p> <p><input type="submit" value="Senden"></p></form></body></html> I do that: it's working, but I think that it's not the best way to do. The Problem is that I have a lot of parameter, variable and types. Please could I have an example, I meant a complete small example, then I can complete. Thanks Link to comment Share on other sites More sharing options...
justsomeguy Posted November 14, 2014 Share Posted November 14, 2014 If you use location.href to change the page then you lose everything in Javascript. Javascript cannot change other pages, you can only change the current page and those changes get lost when you refresh, Javascript cannot permanently change a page. If you want to move data between pages with only Javascript then the best way to do it is to use localStorage, but even so that's only going to be saved on your computer. If you go to another computer the pages aren't going to be different. If you want to make permanent changes to a page you need to use a language like PHP to save things in a database and then read them again when building the page. Link to comment Share on other sites More sharing options...
davej Posted November 14, 2014 Share Posted November 14, 2014 I'm not understanding whether you want to send the data somewhere or whether you simply want to view the data. If you just want to view the results then you don't need to submit a form. <!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><title>Wertübergabe mittels Framestruktur - Sendendes Dokument</title><script>window.onload = init;function init(){document.getElementById('taste').onclick = uebergabe;}function uebergabe(){var Z = Number( document.getElementById('Z').value );var AT = Number( document.getElementById('AT').value );var LMB = Number( document.getElementById('LMB').value );var WM = LMB - Z;var STB = WM / AT;var LS4 = STB - (23.775 * AT) - 426.93;document.getElementById('WM').innerHTML = 'WM: ' + WM;document.getElementById('STB').innerHTML = 'STB: ' + STB;document.getElementById('LS4').innerHTML = 'LS4: ' + LS4;}</script></head><body><div> <h3>Parameter:</h3> <label>Z:<input type="text" id="Z" size="25"></label><br/> <label>AT:<input type="text" id="AT" size="25"></label><br/> <label>LMB:<input type="text" id="LMB" size="25"></label><br/> <hr/> <div id="WM"></div> <div id="STB"></div> <div id="LS4"></div> <br/> <input type="button" id="taste" value="Berechnen"></div></body></html> Link to comment Share on other sites More sharing options...
remotho Posted November 17, 2014 Author Share Posted November 17, 2014 Hi, I made three pages, into one with Iframe, and my Idea is to view the data in a one frame. If I don´t need a submit Form, how I could made it? Please can someone send me an example, because my knowledge in javascript are very poor, and I need build this calculator to replace an excel sheet. Please see:http://application.hawa.ch/productfinder/Src/Productfinder/dsp_detail.aspx?artID=14968&languageID=Enand then: "Calculation aid"Many thanks for all your help.Regards Link to comment Share on other sites More sharing options...
davej Posted November 17, 2014 Share Posted November 17, 2014 What is wrong with using Excel as you are now? <!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><title>Wertübergabe mittels Framestruktur - Sendendes Dokument</title><style>td{border:1px solid #999}input{background-color:#ddd}.fl{float:left;margin:5px;}td,input{text-align:center;}</style><script>window.onload = init;function init(){document.getElementById('taste').onclick = uebergabe;uebergabe();}function uebergabe(){var Z = Number( document.getElementById('Z').value );var AT = Number( document.getElementById('AT').value );var LMB = Number( document.getElementById('LMB').value );if (Z>100 || Z<-100){ alert('Error: Z must be within (100 > Z > -100)'); return;}if (AT>5 || AT<-5){ alert('Error: AT must be within (1 > AT > -5)'); return;}if (AT==0){ alert('Error: AT must be non-zero'); return;}if (LMB>3 || LMB<-50){ alert('Error: LMB must be within (1 > LMB > -50)'); return;}var WM = LMB - Z;var STB = WM / AT;var LS4 = STB - (23.775 * AT) - 426.93;document.getElementById('WM').innerHTML = WM.toFixed(3);document.getElementById('STB').innerHTML = STB.toFixed(3);document.getElementById('LS4').innerHTML = LS4.toFixed(3);}</script></head><body><div> <h3>Parameter:</h3><table class="fl"><tr><td>Z:</td><td><input type="text" id="Z" size="12" value="99"/></td><td>cm</td></tr><tr><td>AT:</td><td><input type="text" id="AT" size="12" value="4"/></td><td>cm</td></tr><tr><td>LMB:</td><td><input type="text" id="LMB" size="12" value="2"/></td><td>cm</td></tr><tr><td>WM:</td><td id="WM"></td><td>cm</td></tr><tr><td>STB:</td><td id="STB"></td><td>cm</td></tr><tr><td>LS4:</td><td id="LS4"></td><td>cm</td></tr><tr><td></td><td><input type="button" id="taste" value="Berechnen"></td><td></td></tr></table><img class="fl" src="http://application.hawa.ch/productfinder/Src/Productfinder/dsp_objectdownload.aspx?typ=0&id=82409" alt="alt"/></div><br style="clear:both;"/></body></html> Link to comment Share on other sites More sharing options...
remotho Posted November 18, 2014 Author Share Posted November 18, 2014 Hi DaveJ, Many thanks for your help, really perfect and nice. It work properly. I have added more parameter and work perfect. I need only the limits, for example not smaller than and bigger than, to give a message or a change color on the value. Why we want to change from excel to JavaScript, it's because the complexity of the macros and the excel versions. The excel on this side I have done it myself and now I will try to change all as your Example. How can I send you a private email Regards Link to comment Share on other sites More sharing options...
davej Posted November 18, 2014 Share Posted November 18, 2014 Perhaps all you need to use is the HTML5 input min and max attributes. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number_step Link to comment Share on other sites More sharing options...
remotho Posted December 2, 2014 Author Share Posted December 2, 2014 <input type="button" id="taste" value="Berechnen"> <tr><td>LMB:</td><td><form> <input type="number" name="points" id="LMB" min="800" max="8500" step="1" size="8" value="800"></form></td><td>mm</td></tr><tr><td>AT:</td><td><form> <input type="number" name="AT" id="AT" min="2" max="12" step="1" size="8"value="5"></form></td><td>mm</td></tr><tr><td>A:</td><td><form> <input type="number" name="points" id="A" min="45" max="70" step="25" size="8" value="45"></form></td><td>mm</td></tr><tr><td>Z:</td><td><form> <input type="number" name="points" id="Z" min="6" max="10" step="1" size="8" value="8"></form></td><td>mm</td></tr><tr><td>WM:</td><td id="WM"></td><td>mm</td></tr> Hi Davej, many thanks for the min and max attributes. Is implemented, but now my question is, the <form> need a name?. Other questions; if I don't want use the <imput type="button" id="taste" value="Berechnen">, how I can do with the "Enter" Thank you Link to comment Share on other sites More sharing options...
davej Posted December 2, 2014 Share Posted December 2, 2014 To me the form tag seems unnecessary unless you are planning to submit the form to server-side code or make use of a reset button. Otherwise it is just a block element and a div would do the same thing. Usually a form consists of a group of input elements that are going to be submitted to server-side code. http://www.w3schools.com/html/html_forms.asp Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now