I understand that the general method of passing variables between pages is to have a form, have these elements within the form, like below, and access these as $_GET['year']
and $_GET['dropdown']
<body>
<form method="get" action="index.php">
<select name="language">
<option value = "english">English</option>
<option value = "tagalog">Tagalog</option>
</select>
</br>
<select name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<input type="submit" value="submit">
</form>
</body>
However, along with passing these two variables, namely year
and dropdown
, I would like to pass another variable, which is not part of the form. So, although there are only two elements in the form, I would like the GET URL to look as follows
http://localhost:63342/ApplicationName/php/index.php?language=tagalog&year=2010&randomNumber=1932932
Notice the randomNumber=1932932 at the end of the URL.
I cannot use session variables because in the same browser and for the same user, I would like different tabs to corresponding to different values.
If you don't want use things like jQuery (which is way easier than native JavaScript), you can make a simple click handler for the submit button:
<body>
<form method="get" action="test.php">
<select name="language">
<option value = "english">English</option>
<option value = "tagalog">Tagalog</option>
</select>
<select name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<input type="submit" value="submit" onclick="submitForm()">
</form>
</body>
<script>
function submitForm() {
var randomNumber = Math.floor((Math.random() * 10000) + 1);
var hiddenfield = document.createElement('input');
hiddenfield.setAttribute('type', 'hidden');
hiddenfield.name = 'randomnumber';
hiddenfield.value = randomNumber;
document.getElementsByTagName('form')[0].appendChild(hiddenfield);
}
</script>
This will add a hiddenfield to the form before posting and add a random number between 1 - 10000 to the hiddenfield.
You can use a hidden input within the form
<input type="hidden" value="something" name="name" />
An option you could take it is build the get method in Ajax. Here you access all the elements from your page and pass the into your url. This way you are not limiting your 'get parameters' to only elements within the form. An example is shown here http://www.w3schools.com/jquery/jquery_ajax_get_post.asp
If you use GET anyway, you can use javascript to create a URL based on the inputs, and navigate to it instead of submitting the form.
<body>
<select name="language" id="lang">
<option value = "english">English</option>
<option value = "tagalog">Tagalog</option>
</select>
</br>
<select name="year" id="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<input type="button" onclick="nav()" value="submit">
<script>
function nav(){
var url = 'index.php?';
var ids = ['lang', 'year'];
var input;
for (var i = 0; i < ids.length; i++) {
input = document.getElementById(ids[i]);
url += encodeURIComponent(input.name) + '=' + encodeURIComponent(input.value) + '&';
};
url += 'randomNumber=' + 1932932; // generate a number here
document.location = url;
}
</script>
</body>