Sign in to follow this  
silverphyre673

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

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
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[i] = RandomInt(min, max) + modify;
if (droplow==1 && random_array[i] < random_array[low])
low = i;
if (drophigh==1 && random_array[i] > 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[i];
if (added != 0)
form.rollresults.value = form.rollresults.value + " " + random_array[i];
else
form.rollresults.value = form.rollresults.value + random_array[i];
++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 will
need 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>

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.

ace

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!"
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

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.

Mark

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this