How to pass variables through the same page to javascript a page reload?

Question

Say I want to have a text box in my html code that the user enters height and width of a map. and I want my javascript code to processes the passed variables and generate a map based on the values.

Here is my problem. I don't want to use the clunky prompt() function, it's really annoying, and is very limited. If I use the form tag, and put a submit button it is going to refresh the page, and I don't want that, but I'm not submitting anything, only passing variables to my script.

because everything is going to be done by javascript, and nothing is going to be send to a server or any sort of database, I want everything to be done on the same page without any reload or refresh and the results to be shown immediately after user clicks on a button.

How can I do this?

<script>
function validateInput() {
// check if the values are numbers if not generate an error and return a false value
}
function getMapSize () {
// get the user input data and return it as an array
}

function generateMap () {
var map = [];
map = getMapSize();
// generate the map and show the result on current page
}
if (variables are set and they are numbers) {
generateMap();
}
</script>
Height:<input id="mapSize" name="mapHeight" type="text"></input>
Width:<input id="mapSize" name="mapWidth" type="text"></input>

Four similar questions, I'm sure there are more: http://stackoverflow.com/questions/16082357/pass-data-from-a-dynamically-generated-list-from-one-page-to-another or http://stackoverflow.com/questions/16264253/sharing-a-variable-between-multiple-html-pages or http://stackoverflow.com/questions/3724106/how-to-exchange-variables-between-two-html-pages or http://stackoverflow.com/questions/16328717/pass-arguments-from-one-html-page-to-the-other — Xotic750, May 15 '13 at 00:14
What have you tried or researched? I'm not even sure what you are trying to do. — Xotic750, May 15 '13 at 00:16
I'm trying to write a simple script that generates a graphical 2d map using images and based on user inputs. the user can edit the map and when he or she is done save it on their own machine. — ilgaar, May 15 '13 at 01:10

Niels Keurentjes · Answer 1 · 2013-05-15T00:17:49.323

1

There's several ways for this. You could either patch the onsubmit of your form, returning false at the end, or just omit the form entirely and act on a <button> element's onclick. They're all similar solutions, the best one depends on the entire implementation.

I whipped up a small sample here to show how to do it with a button, code boils down to:

<label>Width: <input type="number" id="width" value="5"></label><br>
<label>Height: <input type="number" id="height" value="5"></label><br>
<button onclick="$('output').set('text', 'Surface size is '
              + ($('width').value * $('height').value));">Click me!</button>
<div id="output">Not clicked yet</div>

Of course you'd split the onclick code out to separate Javascript in real code. I whipped the sample up with Mootools, but it's easily adaptable to jQuery or non-library JS.

edited May 15 '13 at 00:17

answered May 15 '13 at 00:11

Niels Keurentjes

41,402
9
98
136

What if I had a single function that handled both data validation and then returned multiple values after some calculations? How can I extract the values the function returns, but not the boolean return value, without having to discard the return false statement which prevents the post back? – ilgaar May 15 '13 at 00:54
Say I had : function getCoordinates() { var x; var y; var bitMapAddress; // get user data // check if the data is valid if (data is invalid) { document.getElementById('someId').InnerHTML = "Error!"; return false; // <--- does this end the function and prevent the rest of the statements from running? } // assuming the below statements will run only if data is valid otherwise there should be an if statement // some calculation bitMapAddress = x + y * (x+1); // process the data return [x,y,bitMapAdress,false] // <--- is this the right way to do it? to return false in order to prevent post back? – ilgaar May 15 '13 at 00:57
So if needed this function to path three values to some other function but at the same time returning false in order to prevent post back. what should I do? or is this not the right approach and all these task should be handled by separate functions of their own? – ilgaar May 15 '13 at 01:00

score 1 · Accepted Answer · answered May 15 '13 at 00:43

Like Niels said, you can use a <button onclick="getMapSize()" >Generate map</button>
Btw, be sure to keep the id's of the input elements unique. You can get the userinput something like this:

<script>

function getMapSize() {
    var height = document.getElementById('mapHeight').value;
    var width = document.getElementById('mapWidth').value;

    if (validateInput(height) == true && validateInput(width) == true) {
        generateMap(height, width);
    }
}

function validateInput(input) {
    // Validate input...

    if (isValid) {
        return true;
    } else {
        return false;
    }
}

function generateMap(height, width) {
    // Generate map with the given height and width
}

</script>

Ok. Thanks for the response. So what is the deal with this return false stuff? how does it effect my script? It simply just prevents a post back? — ilgaar, May 15 '13 at 00:48

How to pass variables through the same page to javascript a page reload?

2 Answers2