[web] Page refreshes, resets controls after submit [solved]
Author
I'm using javascript with a form on my first project, a dice server. The user selects options for the dice range, number of dice, etc., and hits a submit button which calls the javascript function that generates the dice rolls and outputs them to a text area. For some reason, the page refreshes after this, and resets all controls to their default values, so you have to hit the back button to get your results. Any ideas for how I can fix this? Thanks.
<!--EDIT--><span class=editedby><!--/EDIT-->[Edited by - silverphyre673 on November 6, 2005 9:51:48 PM]<!--EDIT--></span><!--/EDIT-->
Can you paste the entire source please and i'll take a look.
Oh and this should relaly go under Web Developement.
ace
Oh and this should relaly go under Web Developement.
ace
Author
Oh ok. I just figured that this was Java, so it had something to do with this forum more than programming web pages... I have done very little with this language. In fact, the following is the whole extent of what I have done with javascript. Here is the source:
<html><head><title>Dark Nebula Studios Dice Server</title><script>function RandomInt(min, max){ var random_number = Math.floor(Math.random()*max) + min; return random_number;}function RollDice(form){ var low=0; var high=0; var i = 0; var min=1; var max=form.size_dice.value; var number=parseInt(form.number_dice.value); var modify=parseInt(form.modify_dice.value); var droplow = 0; var drophigh = 0; var total = 0; var added = 0; form.rollresults.value = ""; if (form.droplow.checked) droplow = 1; if (form.drophigh.checked) drophigh = 1; random_array = new Array(number); for (i=0; i < number; i++) { random_array = RandomInt(min, max) + modify; if (droplow==1 && random_array < random_array[low]) low = i; if (drophigh==1 && random_array > random_array[high]) high = i; } for (i=0; i < number; i++) { if ((droplow==1 && low==i) || (drophigh==1 && high==i)) continue; else { total += random_array; if (added != 0) form.rollresults.value = form.rollresults.value + " " + random_array; else form.rollresults.value = form.rollresults.value + random_array; ++added; } } form.rollresults.value = form.rollresults.value + "\nTotal: " + total;}</script><!-- INCLUDE THE CSS PAGE, IN FILE "CSS" --><link rel=stylesheet href="styles.css" type="text/css"><body bgcolor=#7676ff> <!--BODY OF THE WEBPAGE --><table width=100%> <!-- TABLE FOR DISPLAYING NEWS, SITE NAVIGATOR, TITLE, ETC. --><tr> <!-- TITLE ROW --><td align=center> <!-- TITLE COLUMN --><span class="titletext">Dice Server for Roleplaying Games <!-- TITLE OF THE PAGE --></span><br><img src="media/pixel.gif" height=10></td> <!-- END TITLE COLUMN --></tr> <!-- END TITLE ROW --><tr align=center> <!-- NEW ROW FOR SITE NAVIGATION--><b><td><a href="index.html" class="mainlink">Main Page</a><img src="media/spacer.gif"><a href="software.html" class="mainlink">Software</a><img src="media/spacer.gif"><a href="contact.html" class="mainlink">Personal Information</a><img src="media/spacer.gif"><a href="diceserver.html" class="mainlink">Dice Server</a></td></b></tr></table><img src="media/pixel.gif" height=40><br><div class="maintext">This is a simple dice server I whipped up as my first project in JavaScript.It is cross-platform, and if you download the webpage, you can even access it offline! You willneed to have JavaScript enabled to use it, though. Please let me know how I can improve on it.</div><img src="media/pixel.gif" height=30><form name="rand_generator_form" class="maintext">Dice roll range:<select name="size_dice"> <option value="2">1-2</option> <option value="3">1-3</option> <option value="4">1-4</option> <option value="6">1-6</option> <option value="8">1-8</option> <option value="10">1-10</option> <option value="20">1-20</option> <option value="100">1-100</option></select><p>Number of dice:<select name="number_dice"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option></select><p>Amount to modify roll by:<select name="modify_dice" value="0"> <option value="-10">-10</option> <option value="-9">-9</option> <option value="-8">-8</option> <option value="-7">-7</option> <option value="-6">-6</option> <option value="-5">-5</option> <option value="-4">-4</option> <option value="-3">-3</option> <option value="-2">-2</option> <option value="-1">-1</option> <option value="0" selected>0</option> <option value="1">+1</option> <option value="2">+2</option> <option value="3">+3</option> <option value="4">+4</option> <option value="5">+5</option> <option value="6">+6</option> <option value="7">+7</option> <option value="8">+8</option> <option value="9">+9</option> <option value="10">+10</option></select><p>Drop lowest?<input type="checkbox" name="droplow" value="1"><p>Drop highest?<input type="checkbox" name="drophigh" value="1"><p><input type="submit" name="rolldice" value="Cast The Die!" onclick="RollDice(this.form)"><p><textarea cols="40" rows="10" name="rollresults" caption=""></textarea></form><div class="maintext"><br><br><br><br><small><center>Contact me: <a href="mailto:fatestream@gmail.com?subject=Question, comment or suggestion about your site." class="smalllink">fatestream@gmail.com</a><br>Site, graphics, and information Copyright (c) 2005 Ben Skubi</center></small></div></body></head></html>
This code does nothin when i open it in either IE or Firefox. Hold on...
Actually yes it does, my bad. Debugging...
ace
Actually yes it does, my bad. Debugging...
ace
Right, well i'm afraid i can't say what the problem is, i've just got my teeth into javascript, but if im honest i wouldn't arrange it like that.<br><br>What i would do is:<br><br>- Load all javascript in a separate .js file. This makes it easier to keep local variables with file scope. Breaking down code into functions is better as well.<br>- Make all the HTML dynamically created with javascript code. All those bulk lines are reduced to loops etc.<br><br>I would suggest looking <a href="http://www.w3schools.com">here</a> for the absolute perfect guide to everything you're going to need to know about web design.<br><br>Secondly i have uploaded my current project for you to have a look at, uses forms and stuff, quite cool really. <a href="http://members.gamedev.net/ace_lovegrove/TH_Withoutdistance_final.zip">Here</a> it is.<br><br>Hope all that helps.<br><br>ace
You're using a submit button to launch your javascript code. When the submit button is pressed, your 'onclick' code is executed, then the form is automatically submitted to the server, so the page is refreshed.
Either change that button (make it a normal button) or return false in the onclick handler, after your code.
Either change that button (make it a normal button) or return false in the onclick handler, after your code.
Replace this
With this
Iirc that shuld work.
From,
Nice coder
<input type="submit" name="rolldice" value="Cast The Die!" onclick="RollDice(this.form)">With this
<input type="submit" name="rolldice" value="Cast The Die!" onclick="RollDice(this.form);Return false;">Iirc that shuld work.
From,
Nice coder
Almost right.
If you want to have a form which doesn't submit to a web url, then you'll have to have its onsubmit return false.
But what Nice Coder says is not *quite* right - "return" must always be in lowercase in javascript, as it's case sensitive.<br><br>Mark
If you want to have a form which doesn't submit to a web url, then you'll have to have its onsubmit return false.
But what Nice Coder says is not *quite* right - "return" must always be in lowercase in javascript, as it's case sensitive.<br><br>Mark
Author
Great! Thanks, you guys. I actually posted earlier a bit on how to get the javascript into a .js file, for a different reason. Anyways, that's a big help.<br><br><br><!--EDIT--><span class=editedby><!--/EDIT-->[Edited by - silverphyre673 on November 6, 2005 9:13:03 PM]<!--EDIT--></span><!--/EDIT-->
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
