• Advertisement
Sign in to follow this  

[web] Page refreshes, resets controls after submit [solved]

This topic is 4461 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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. [Edited by - silverphyre673 on November 6, 2005 9:51:48 PM]

Share this post

Link to post
Share on other sites
Can you paste the entire source please and i'll take a look.

Oh and this should relaly go under Web Developement.


Share this post

Link to post
Share on other sites
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:



<title>Dark Nebula Studios Dice Server</title>

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))
total += random_array;
if (added != 0)
form.rollresults.value = form.rollresults.value + " " + random_array;
form.rollresults.value = form.rollresults.value + random_array;
form.rollresults.value = form.rollresults.value + "\nTotal: " + total;

<link rel=stylesheet href="styles.css" type="text/css">

<body bgcolor=#7676ff> <!--BODY OF THE WEBPAGE -->

<tr> <!-- TITLE ROW -->
<td align=center> <!-- TITLE COLUMN -->
<span class="titletext">
Dice Server for Roleplaying Games <!-- TITLE OF THE PAGE -->
<img src="media/pixel.gif" height=10>
</td> <!-- END TITLE COLUMN -->
</tr> <!-- END TITLE ROW -->

<tr align=center> <!-- NEW ROW FOR SITE NAVIGATION-->
<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>
<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 will
need to have JavaScript enabled to use it, though. Please let me know how I can improve on it.
<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>
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>
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>

Drop lowest?
<input type="checkbox" name="droplow" value="1">
Drop highest?
<input type="checkbox" name="drophigh" value="1">
<input type="submit" name="rolldice" value="Cast The Die!"
<textarea cols="40" rows="10" name="rollresults" caption="">

<div class="maintext">
<small><center>Contact me: <a href="mailto:fatestream@gmail.com?subject=Question, comment or suggestion about your site." class="smalllink">fatestream@gmail.com</a>
Site, graphics, and information Copyright (c) 2005 Ben Skubi




Share this post

Link to post
Share on other sites
This code does nothin when i open it in either IE or Firefox. Hold on...

Actually yes it does, my bad. Debugging...


Share this post

Link to post
Share on other sites
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.

What i would do is:

- 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.
- Make all the HTML dynamically created with javascript code. All those bulk lines are reduced to loops etc.

I would suggest looking here for the absolute perfect guide to everything you're going to need to know about web design.

Secondly i have uploaded my current project for you to have a look at, uses forms and stuff, quite cool really. Here it is.

Hope all that helps.


Share this post

Link to post
Share on other sites
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.

Share this post

Link to post
Share on other sites
Replace this

<input type="submit" name="rolldice" value="Cast The Die!"

With this

<input type="submit" name="rolldice" value="Cast The Die!"
onclick="RollDice(this.form);Return false;">

Iirc that shuld work.

Nice coder

Share this post

Link to post
Share on other sites
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.


Share this post

Link to post
Share on other sites
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.

[Edited by - silverphyre673 on November 6, 2005 9:13:03 PM]

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement