Storing Information using HTML help

[Philip]

I am new to html and I am doing a little project to test myself in html by trying to make a table, but making it so that the user says the number of rows and columns in the table. I currently have everything worked out using javascript, and the table works with inputting values within the html file: like the function is table(rows,cols) and doing <button type="button" onclick="table(1,2)">Make Table</button> works. My problem is that with user input, I'm not to sure how to have the user input the number of rows and columns, and then for me to store the numbers then use them in the function. Normally in other languages I could store it as a variable then pass it into the function, but I don't know if that is possible with html. All the html and javascript is in one file, since it is just a small thing I want to try, and I wasn't sure if could use <form> for this or how it would work.Thanks for the help, and the tutorials have helped me a lot so far.

[Don E]

Yes you can use <form>. Within the form, you can have two input fields for example that accepts input from the user asking how many rows they would like(one input field) for the table and how many columns they would like(another input field). Then have the form submit to a function where in the parameter of the function, you're sending the whole form so that you can have access to input fields. For example:

<script type="text/javascript"> function makeTable(form){var rows = form.rows.value;var cols = form.cols.value; // code to make table ... } </script> <form method="post" action="#"> <!-- or instead can have onSubmit("return makeTable(this);") here; make sure to return false and to remove the onclick from the submit button -->How many rows:<input type="text" name="rows" /><br/>How many cols:<input type="text" name="cols" /><br/><input type="submit" value="Create Table" onclick="makeTable(this.form);" /></form>

Or another way:

<script type="text/javascript"> function makeTable(rows, cols){// rows and cols contain the values inserted by the user// code to make table ... } </script> <form method="post" action="#" >How many rows:<input type="text" name="rows" /><br/>How many cols:<input type="text" name="cols" /><br/><input type="submit" value="Create Table" onclick="makeTable(this.form.rows.value, this.form.cols.value);" /> </form>

Edited June 10, 2012 by Don E

[Guest So Called]

Unfortunately that requires a server side script, i.e. PHP. I don't know of any way to make forms work without some kind of server side script. I hesitate to say it's impossible...

[Philip]

Thanks Don E, it works perfectly! Is there any place on w3schools that I could learn different tips and tricks such as using the "this.form", or would I have to go elsewhere?

[eTianbun]

Thanks Don E, it works perfectly! Is there any place on w3schools that I could learn different tips and tricks such as using the "this.form", or would I have to go elsewhere?

Google 'javascript this keyword' and you will get lots of info.

[Philip]

Google 'javascript this keyword' and you will get lots of info.

I wasn't only talking about the "this" keyword since I know about it from other programming languages, i was talking about different tips and tricks such as "this", I'm sure there are other things like it that could help with passing variables into functions or different tricks that are helpful to know. I just wanted to know if w3schools has a tutorial somewhere about it, and if not I will google it.