Jump to content

Math.sqrt with Form Value.


paulmo
 Share

Recommended Posts

Hi JSG, Scientist et al, would like to do JS math functions, with user submitted form data...the form shows on page, but the function/document.write is not working. Thanks.

<html><body><h4>Enter number to find square root:</h4> <form method="GET" action="/"><input type = "text" name="input" id="number"/></p> <input type = "submit" value="Calc" onClick="processForm(this.form)"/></form> <script>function processForm(form) {var rawNumber = 0;var sqRoot = 0; rawNumber = document.getElementById("number").value;sqRoot = Math.sqrt(rawNumber);}document.write(processForm)) </script></body></html>

Link to comment
Share on other sites

These are roughly in order of importance. 1. processForm has no return value, so any code that calls it receives no data that can be written. At the end of the function, add this: return sqRoot; 2. document.write looks like it calls processForm, but it doesn't. To call the function it needs the parens at the end. 3. But don't bother, because you would be calling processForm from the button click AND as your script loads. document.write is in the wrong location. 4. But don't use document.write inside a function that gets called after page load. It obliterates the current document and opens a new one that no longer has your original content in it. Most of us never use it at all. Alert would be better. Better still, put a <p> element or something in your document and set its innerHTML to the value of sqRoot. 5. don't make your button a type="submit"; make it type="button". Otherwise, you'll submit the form and the page will reload. 6. In fact, if you're not submitting anything to your server, you don't need a form at all. You only need the form elements. That's still valid HTML. 7. Just to be safe, it's not a bad idea to pass rawNumber (a string) to the Number() function to explicity convert it to a number. Pass the return value of Number(rawNumber) to Math.sqrt(). 8. Since processForm doesn't actually do anything with the form argument, the argument doesn't need to be there, and you don't have to pass this.form to processForm when you call it.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Thanks DD, I forgot to mention you at the outset, but it was only my oversight after being away for a year or so... I think I've made some headway following your notes, but I'm confused about whether or not onClick=processForm is setting this calculation in motion (I don't think it is), and also how/where to integrate the new var div, and whether or not that hooks up to the onClick, etc. I see some missing pieces here, esp. with the last section. Please help along...thanks.

<form method="GET" action="/"><input type = "text" name="input" id="number"/></p><input type = "button" value="Calc" onClick="processForm()"/></form> <script>function processForm(form) {var rawNumber = 0;var sqRoot = 0; rawNumber = document.getElementById("number").value;sqRoot = Math.sqrt(Number(rawNumber));return sqRoot; }function //separate, or part of processForm?var div = document.getElementByID("sqrtDiv");div.innerHTML = sqRoot;</script> <div id="sqrtDiv"> </div>

Edited by paulmo
Link to comment
Share on other sites

I probably gave you too many suggestions at once, since a couple of them cancel each other out. :) Here is your code slightly rearranged, and with a capital letter corrected. Try it.

function processForm( ) {var rawNumber = 0;var sqRoot = 0; rawNumber = document.getElementById("number").value;sqRoot = Math.sqrt(Number(rawNumber));var div = document.getElementById("sqrtDiv");div.innerHTML = sqRoot;}

Link to comment
Share on other sites

Here's revised code. Thanks in advance for more help. I want to enter the world of Javascript math functions using form inputs.

<html> <head><script>function processForm() {var rawNumber = 0;var sqRoot = 0;var processForm = 0; rawNumber = document.getElementById("number").value;sqRoot = Math.sqrt(Number(rawNumber));return sqRoot; var div = document.getElementByID("sqrtDiv");div.innerHTML = sqRoot.value;</script></head><body> <p>Enter number to find square root:</p> <form method="GET" action="/"><input type = "text" name="input" id="number"/></p><input type = "button" value="Calc" onClick="processForm()"/></form>   <div id="sqrtDiv"> </div> </body> </html>

Edited by paulmo
Link to comment
Share on other sites

Close. In the following, I've "commented-out" lines that need to be removed or changed. If a change is needed, the changed line follows. You also need to add a closing '}' at the end of the function.

function processForm() {var rawNumber = 0;var sqRoot = 0;var processForm = 0; rawNumber = document.getElementById("number").value;sqRoot = Math.sqrt(Number(rawNumber));// return sqRoot; //var div = document.getElementByID("sqrtDiv");var div = document.getElementById("sqrtDiv"); // notice the lowercase 'd'// div.innerHTML = sqRoot.value;div.innerHTML = sqRoot;}

Link to comment
Share on other sites

Wow DD, after revising per your camel toe correction, still got error processForm undefined, but changing <script> to <script type = "text/javascript"> now the d@mn thing works. Thanks for getting me over this hump. Also, apparently onClick event is working, but since you mentioned I don't need form, is there another way to process this input? I get that a big thing with JS is the event, to trigger another page to make stuff happen, yes?

Edited by paulmo
Link to comment
Share on other sites

That error message means that the function is not defined. That means that there is either a syntax error with the function which causes it not to get defined, which would mean yuo would see another error message related to that, or it's being included in a way that you're trying to run the function before defining it. Since your page doesn't have a doctype then you might want to add a type attribute to the script element to let the browser know that it is Javascript.

Link to comment
Share on other sites

Well, you don't need a form for what you're doing now. You just need the inputs. If your end goal is to send data to your server, then yes you still need a form -- unless you want to use AJAX, but let's not talk about that unless it's already your plan.. ;)

Link to comment
Share on other sites

Thanks JSG, our posts must have overlapped, as adding type attribute fixed the problem. Glad to see you still here doing your thing. DD, so submit buttons (with onClick) don't have to be in a form? About AJAX, I get even more confused with HTTP protocols including JSON (I got it working once, it was a frustrating experience), as compared to MySQL, but I guess the confusion is partly why I'm interested. Recently I converted a "mood" app that JSG helped me with in PHP to Python...then I did a math function thing in Python similar to what you just helped me with...I wanted to get a feel for JavaScript. It's kind of nice to use curly brackets again. I don't like camel case so much though. Server-wise, I'm curious about trying node or mongo...do they hold form data like databases? If they run in the browser is it some kind of session/cache?

Edited by paulmo
Link to comment
Share on other sites

adding type attribute fixed the problem
Yeah, that's because of the doctype. If you're using HTML 5 then the default for script elements is Javascript, otherwise you need to specify it. You might as well add the doctype though and get the browser into standards mode, this is the doctype for HTML 5: <!doctype html>
Link to comment
Share on other sites

DD, so submit buttons (with onClick) don't have to be in a form?
1. You can put a click handler on any element, including and especially an ordinary button, though of course you should use good judgement about the user experience. 2. You don't have to put a submit element inside a form. But if you do, and you put a click handler on it, then you have to add a lot of other code to keep the default behavior from occurring. It's normally easier to trap the form's submit event instead. You'll usually want to do that anyway, since having the focus on a text input in a form means that hitting the enter/return key causes a submit event to trigger, and you might not want that to happen.
Link to comment
Share on other sites

so submit buttons (with onClick) don't have to be in a form?
don't use a "submit" button, just use any other element, like a <button>
Server-wise, I'm curious about trying node or mongo...do they hold form data like databases? If they run in the browser is it some kind of session/cache?
Node is a server (in JS)http://nodejs.org/ MongoDB is a NoSQL databasehttp://www.mongodb.org/ Edited by thescientist
Link to comment
Share on other sites

OK DD, submit elements not recommended with JS. Thanks Scientist for clarification. Guys, I don't want to hijack my own thread, but aside from server duties and keeping code hidden, why doesn't everyone use Javascript for everything, since it's so convenient, run in the browser? The academic crowd is all gaga about Python for example, for calculations and graphs. But that's all possible in JS too right? And with browser compatibility to boot? And with node, I'm guessing that one can now code a database driven website all in JS? Would like your take on these things. My focus at the moment would be using user input (not necessarily forms :) with math functions. The Math.sqrt you helped me with DD is a start...I'd like to develop this, to show asymptotes, limits, and derivative of a rational function, for example.

Edited by paulmo
Link to comment
Share on other sites

You can do a lot with web apps, and a lot of sites do. Serious data is best left on the server, since the same user can access it from multiple clients, and multiple users can access it too. A lot of temp data can be stored on a single client, so there are advantages there also, for certain types of applications. And you can certainly manipulate data in a browser. I've been doing browser-based spreadsheets for years. With the new canvas element, graphs and such also become possible on the browser, and new libraries are taking advantage of that. (You don't have to write your own graphing routines.) Serious image manipulation is still better handled on the server (things like PhotoShop filters, which are used to create Captcha-type images) but with more browser speed, that may change. I suspect there are limits (no pun) on the kinds of math JS can handle, but my own web uses have have never gone beyond algebraic stuff, so I don't really know. The other answer to your question is that up to 2% of clients have JS disabled, usually because of corporate policy, and some slightly larger percent use older browsers that can't access all the new goodies (notably canvas). But you can still do a lot with "mid-level" JS, and I suspect a lot of sites you visit use more of it than you realize.

Edited by Deirdre's Dad
Link to comment
Share on other sites

In my limited perception, if the data is stored in cookies or just for user session, how do you retrieve and store that data (for later use) using localStorage? Through a file like this? But that seems just useful for FF. In other words how does your JS spreadsheet store like a database? Also JSG that mongo video is great!...even though I don't follow half the language I get the idea that MySQL is still better and that people try to reinvent the wheel. This one on node.js v. Apache is also good.

Link to comment
Share on other sites

I said from the beginning there were limitations. :) Small amounts of data can be stored in JSON format. Since localStorage is really just a string, you can store tabular data in csv format. XML is possibly a better option, since routines for accessing it are built into JS. These are not very robust solutions to many problems, but they do exist. I've only used localStorage as a place to back up data that a user is currently editing.

Link to comment
Share on other sites

Thanks for explanation...as I don't do this stuff consistently I forget much. I got JSON working once with some YUI thing. I was amazed and frustrated by the verbosity and convolution of the process. But, that's reality if one wants to learn the DOM.

Edited by paulmo
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...