[SOLVED] Eliminate NaN with onBlur

twilitegxa · July 27, 2009

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>

KevinM1 · July 27, 2009

Simply check to see if there's a value in the form fields. If not, make their values an empty string. Or, if you need to do some math right away, make the values 0.

twilitegxa · July 28, 2009

How do I check to see if there is a value in them and make the string empty if not? I don't know how to do this.

twilitegxa · August 23, 2009

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>

Sign In

[SOLVED] Eliminate NaN with onBlur

Recommended Posts

twilitegxa

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information