Jump to content

[SOLVED] Eliminate NaN with onBlur

twilitegxa

By twilitegxa
in Javascript Help

 Share

Recommended Posts

twilitegxa Advanced Member

twilitegxa

Posted
Posted

When I use the onBlur with my functions on this form, until all three fields are filled, a value of NaN displays in the fields. Is there there a way to make the fields display nothing until the required inputs have been entered? Here is the form:

 

<script language="javascript">

function healthv()
{
var first,sec,third,res1;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].bodyv.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].mind.value);
//third
third=parseFloat(document.forms[0].soul.value);
res1=(first+third)*5;
//show the result in the result textbox
document.forms[0].health.value=res1;
}

function energyv()
{
var sec,third,res2;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].bodyv.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].mind.value);
//third
third=parseFloat(document.forms[0].soul.value);
res2=(sec+third)*5;
//show the result in the result textbox
document.forms[0].energy.value=res2;
}

function acv()
{
var first,sec,third,res3;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].bodyv.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].mind.value);
//third
third=parseFloat(document.forms[0].soul.value);
res3=Math.floor((first+sec+third)/3);
//show the result in the result textbox
document.forms[0].acv1.value=res3;
}

function dcv()
{
var first,sec,third,res4;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].bodyv.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].mind.value);
//third
third=parseFloat(document.forms[0].soul.value);
res4=Math.floor((first+sec+third)/3 -2);
//show the result in the result textbox
document.forms[0].dcv1.value=res4;
}
</script>
<!-- End Derived Values Script -->
</head>
<body>
<!-- HEADER -->
<h1 class="logo">Sailor Moon RPG</h1>
<!-- /HEADER -->
<?php include("topnav.php"); ?>
<div id="main">
<?php include("includes/log.php"); ?>
<?php include("mainnav.php"); ?>
<h1>Step 2: Character Outline - Creation</h1>
<h2>Stats And Derived Values</h2>
<form name="cal" method="post" action="insert_scout.php">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="left"><strong>Body:</strong></div></td>
<td><input name="bodyv" type="text" id="bodyv" size="5" maxlength="2" onBlur="acv(), dcv(), healthv(), energyv()" /></td>
</tr>
<tr>
<td><div align="left"><strong>Mind:</strong></div></td>
<td><input name="mind" type="text" id="mind" size="5" maxlength="2" onBlur="acv(), dcv(), healthv(), energyv()" onBlur="acv(), dcv(), healthv(), energyv()" /></td>
</tr>
<tr>
<td><div align="left"><strong>Soul:</strong></div></td>
<td><input name="soul" type="text" id="soul" size="5" maxlength="2" onBlur="acv(), dcv(), healthv(), energyv()" /></td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
<tr>
<td><div align="left"><strong>Health Points:</strong></div></td>
<td><input name="health" type="text" id="health"readonly="readonly" size="5" maxlength="2" /></td>
</tr>
<tr>
<td><div align="left"><strong>Energy Points:</strong></div></td>
<td><input name="energy" type="text" id="energy" readonly="readonly" size="5" maxlength="2" /></td>
</tr>
<tr>
<td><div align="left"><strong>Attack Combat Value:</strong></div></td>
<td><input name="acv1" type="text" id="acv1" readonly="readonly" size="5" maxlength="2" /></td>
</tr>
<tr>
<td><div align="left"><strong>Defense Combat Value:</strong></div></td>
<td><input name="dcv1" type="text" id="dcv1" readonly="readonly" size="5" maxlength="2" /></td>
</tr>
<tr>
<td> </td>
<td>
<input name="total_cp" type="hidden" id="total_cp" value="10" /></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input name="calcstats" type="submit" id="submit" value="Next" >
<input type="reset" value="Reset" /></div></td>
</tr>
</table>
</form>

Link to comment
Share on other sites
  • 4 weeks later...
twilitegxa Advanced Member

twilitegxa

Posted
  • Author
Posted

I added another function that checks if the fields have values before performing the other functions and now it works. Here is what I have:

 

function filledOut(){
if (document.forms[0].bodyv.value != "" && document.forms[0].mind.value != "" && document.forms[0].soul.value != ""){
	acv();
	dcv();
	healthv();
	energyv();
}
}

 

I just ran this function on each of the fields, and in turn the other functions get run if the appropriate fields are filled in. Here's the full code for reference:

 

<?php

session_start();
if(!isset($_SESSION['loggedIn'])) {
header("Location: login.php");
}

function yearOfBirth ($day, $month, $age)
{
    $now = strtotime('1992-03-23');

    $yob = date('Y', $now) - $age;
    
    if (date('md', $now) < sprintf('%02d%02d', $month, $day)) $yob--;
    
    return $yob;
}

$year =  yearOfBirth($_POST['birth_date'], $_POST['birth_month'], $_POST['age']);

//store our posted values in the session variables
$_SESSION['identity'] = $_POST['identity'];
$_SESSION['name'] = $_POST['name'];
$_SESSION['element_of_influence'] = $_POST['element_of_influence'];
$_SESSION['age'] = $_POST['age'];
$_SESSION['birth_month'] = $_POST['birth_month'];
$_SESSION['birth_date'] = $_POST['birth_date'];
$_SESSION['birth_year'] = $year;
$_SESSION['blood_type'] = $_POST['blood_type'];
$_SESSION['hobbies'] = $_POST['hobbies'];
$_SESSION['favorite_color'] = $_POST['favorite_color'];
$_SESSION['favorite_gemstone'] = $_POST['favorite_gemstone'];
$_SESSION['favorite_food'] = $_POST['favorite_food'];
$_SESSION['least_favorite_food'] = $_POST['least_favorite_food'];
$_SESSION['favorite_school_subject'] = $_POST['favorite_school_subject'];
$_SESSION['least_favorite_school_subject'] = $_POST['least_favorite_school_subject'];
$_SESSION['strengths'] = $_POST['strengths'];
$_SESSION['weaknesses'] = $_POST['weaknesses'];
$_SESSION['goal'] = $_POST['goal'];
$_SESSION['mission'] = $_POST['mission'];
$_SESSION['biography'] = $_POST['biography'];
$_SESSION['height_feet'] = $_POST['height_feet'];
$_SESSION['height_inches'] = $_POST['height_inches'];

//Access Tracking Snippet

//set up static variables
$page_title = "stats.php";
$user_agent = getenv("HTTP_USER_AGENT");
$date_accessed = date("Y-m-d");

//connect to server and select database
$conn = mysql_connect("localhost", "root", "")
or die(mysql_error());
$db = mysql_select_db("smrpg", $conn) or die(mysql_error());

//create and issue query
$sql = "insert into access_tracker values
('', '$page_title', '$user_agent', '$date_accessed')";
mysql_query($sql,$conn);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sailor Moon RPG - Character Creation Form | Stats</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
@import url(global.css); 
/*]]>*/
</style>
<!-- Script for calculating Derived Values -->
<script language="javascript">

function filledOut(){
if (document.forms[0].bodyv.value != "" && document.forms[0].mind.value != "" && document.forms[0].soul.value != ""){
	acv();
	dcv();
	healthv();
	energyv();
}
}

function healthv()
{
var first,sec,third,res1;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].bodyv.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].mind.value);
//third
third=parseFloat(document.forms[0].soul.value);
res1=(first+third)*5;
//show the result in the result textbox
document.forms[0].health.value=res1;
}

function energyv()
{
var sec,third,res2;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].bodyv.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].mind.value);
//third
third=parseFloat(document.forms[0].soul.value);
res2=(sec+third)*5;
//show the result in the result textbox
document.forms[0].energy.value=res2;
}

function acv()
{
var first,sec,third,res3;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].bodyv.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].mind.value);
//third
third=parseFloat(document.forms[0].soul.value);
res3=Math.floor((first+sec+third)/3);
//show the result in the result textbox
document.forms[0].acv1.value=res3;
}

function dcv()
{
var first,sec,third,res4;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].bodyv.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].mind.value);
//third
third=parseFloat(document.forms[0].soul.value);
res4=Math.floor((first+sec+third)/3 -2);
//show the result in the result textbox
document.forms[0].dcv1.value=res4;
}
</script>
<!-- End Derived Values Script -->
</head>
<body>
<!-- HEADER -->
<h1 class="logo">Sailor Moon RPG</h1>
<!-- /HEADER -->
<?php include("topnav.php"); ?>
<div id="main">
<?php include("includes/log.php"); ?>
<?php include("mainnav.php"); ?>
<h1>Step 2: Character Outline - Creation</h1>
<h2>Stats And Derived Values</h2>
<form name="stats" method="post" action="insert_scout.php">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="left"><strong>Body:</strong></div></td>
<td><input name="bodyv" type="text" id="bodyv" size="5" maxlength="2" onBlur="filledOut()" /></td>
</tr>
<tr>
<td><div align="left"><strong>Mind:</strong></div></td>
<td><input name="mind" type="text" id="mind" size="5" maxlength="2" onBlur="filledOut()" /></td>
</tr>
<tr>
<td><div align="left"><strong>Soul:</strong></div></td>
<td><input name="soul" type="text" id="soul" size="5" maxlength="2" onBlur="filledOut()" /></td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
<tr>
<td><div align="left"><strong>Health Points:</strong></div></td>
<td><input name="health" type="text" id="health"readonly="readonly" size="5" maxlength="2" /></td>
</tr>
<tr>
<td><div align="left"><strong>Energy Points:</strong></div></td>
<td><input name="energy" type="text" id="energy" readonly="readonly" size="5" maxlength="2" /></td>
</tr>
<tr>
<td><div align="left"><strong>Attack Combat Value:</strong></div></td>
<td><input name="acv1" type="text" id="acv1" readonly="readonly" size="5" maxlength="2" /></td>
</tr>
<tr>
<td><div align="left"><strong>Defense Combat Value:</strong></div></td>
<td><input name="dcv1" type="text" id="dcv1" readonly="readonly" size="5" maxlength="2" /></td>
</tr>
<tr>
<td> </td>
<td>
<input name="total_cp" type="hidden" id="total_cp" value="10" /></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input name="calcstats" type="submit" id="submit" value="Next" >
<input type="reset" value="Reset" /></div></td>
</tr>
</table>
</form>
</div>
<?php include("bottomnav.php"); ?>
<!-- FOOTER -->
<div id="footer_wrapper">
<div id="footer">
<p>Sailor Moon and all characters are<br>
trademarks of Naoko Takeuchi.</p>
<p>Copyright © 2009 Liz Kula. All rights reserved.<br>
A product of <a href="#" target="_blank">Web Designs By Liz</a> systems.</p>
<div id="foot-nav"><!-- <ul>
<li><a href="http://validator.w3.org/check?uri=http://webdesignsbyliz.com/digital/index.php" target="_blank"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></li>
<li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://webdesignsbyliz.com/digital/global.css" target="_blank"><img class="c2" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a></li>
</ul> --></div>
</div>
</div>
<!-- /FOOTER -->
</body>
</html>

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.