JavaScript - My Javascript Is Giving Me The Wrong Width! Can Anybody Spot The Error??

I am trying to validate the form on my site using an external js file.

Here is the HTML for my form:

<form method="post" form action="sendmail.asp">
<p><label for="emailAddr">Email Address:
<input id="emailAddr" name="emailAddr" type="text" size="30" class="reqd email" />
</label></p>
<p><span id="spryselect1">
<label for="Players">Players:
<select id="player" class="reqd" name="player">
<option value="" selected="selected">Choose a Player</option>
<option value="Woodson">Charles Woodson</option>
<option value="Rodgers">Aaron Rodgers</option>
<option value="Driver">Donald Driver</option>
<option value="Hawk">A.J. Hawk</option>
<option value="Barnett">Nick Barnett</option>
<option value="Bigby">Atari Bigby</option>
</select>
</label>
<span class="selectRequiredMsg">Please select an item.</span></span></p>
<p><label for"options">
Size(default is X-Large):
<label for="medium"><input type="checkbox" name="options" id="medium" value="Medium" />
X-Large</label>
<label for="large"><input type="checkbox" name="options" id="large" value="Large" />
Large</label>

</p>
<p>
<label for="setStyle">Jersy Style:&nbsp;&nbsp;
<input type="radio" id="homeStyle" name="setStyle" value="homeStyle" class="radio" />
Home
<input type="radio" id="awayStyle" name="setStyle" value="awayStyle" class="radio" />
Away
</label></p>
<p>
<label for="zip">
Zip: <input id="zip" name="zip" type="text" size="10" maxlength="5" class="isZip dealerList" />
</label></p>
<p><input type="submit" value="Submit" />&nbsp;<input type="reset" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</form>

Here is the JavaScript file attached:


window.onload = initForms;

function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
document.getElementById("medium").onclick = sizeSet;
}

function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");

for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;

function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");

for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}

thisTag.className = outClass;

if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;

function validBasedOnClass(thisClass) {
var classBack = "";

switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if (allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isNum":
if (allGood && !isNum(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isZip":
if (allGood && !isZip(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "email":
if (allGood && !validEmail(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
}

function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
}

function radioPicked(radioName) {
var radioSet = "";

for (var k=0; k<document.forms.length; k++) {
if (!radioSet) {
radioSet = document.forms[k][radioName];
}
}
if (!radioSet) {
return false;
}
for (k=0; k<radioSet.length; k++) {
if (radioSet[k].checked) {
return true;
}
}
return false;
}

function isNum(passedVal) {
if (passedVal == "") {
return false;
}
for (var k=0; k<passedVal.length; k++) {
if (passedVal.charAt(k) < "0") {
return false;
}
if (passedVal.charAt(k) > "9") {
return false;
}
}
return true;
}

function isZip(inZip) {
if (inZip == "") {
return true;
}
return (isNum(inZip));
}

function validEmail(email) {
var invalidChars = " /:,;";

if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) != -1) {
return false;
}
var periodPos = email.indexOf(".",atPos);
if (periodPos == -1) {
return false;
}
if (periodPos+3 > email.length) {
return false;
}
return true;
}

function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}

function sizeSet() {
if (this.checked) {
document.getElementById("homeStyle").checked = true;
}
}


Thank you very much in advance for any and all help. I am a noob with JavaScript. I didn't know where else to turn for help. Thanks in advance, guys.

The URL of the page I'm working on can be found he http://graph-art.matc.edu/romanot/vi...inal/order.php

Hello,

I have a very simple file upload form, which I'm submitting with javascript whenever the value in the file input changes. I open the Open File.. dialog with javascript too(in IE - in FF the control just has opacity:0 over a button), just by calling click() on it. This works like a charm in both firefox and IE so far, but when I set either the visibility or z-index of the file input control so that it gets hidden, the form doesn't submit in IE(still works fine in FF). The alert fires, so the function is still called, but submitting just doesn't work - nothing received serverside. Anyone know what I'm doing wrong here/what the fix is? Thanks a lot in advance for any help

The form looks like this:
Code:

<form id="form2" runat="server" name="xmluploadform">
            <asp:FileUpload ID="xmlupload" onchange="SubmitForm();" runat="server" />
</form>

And the SubmitForm function looks like this:
Code:

function SubmitForm() {
    alert('submitting');
    $('#form2').submit();
}

PS. I thought about maybe it was because the browse... button gets hidden so it can't click it, but then is there any way to set the width of it or something? The width of <input type="file"/> is completely different in IE/FF, so it's impossible to make it fit into the design

I am using the same java script to help add shipping costs for paypal in my html. I have worked very long and hard to get to this point.

Since everything is very similar and having conflicts I have saved and named each java script for it's form.

However, when there are more then one on the html page it always calculates the last form giving me the wrong price per quantity on the first.

I have not found a way to differentiate or id and separate.

<script src="nineEnvelope.js" type="text/javascript">
</script>


<form rel="nofollow" target="paypal" style="position:absolute; left:500px;top:200px; width:400px; height:25px; font-family:helvetica; color:#000000;font-size:18px;" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="">
<table>
<tr><td>
<input type="hidden" name="on0" value="#9 Envelope">#9 Envelope
<input type="hidden" name="amount" value="">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="">
<input type="hidden" name="item_number" value="">

<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="add" value="1">

</td></tr><tr><td>

<select name="os0">
<option value="250 qty">250 qty $95.00</option>
<option value="500 qty">500 qty $125.00</option>
<option value="1,000 qty">1,000 qty $200.00</option>
<option value="2,500 qty">2,500 qty $450.00</option>
<option value="5,000 qty">5,000 qty $638.00</option>
</select>


</td></tr>
<!--
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="option_select0" value="250 qty" />
<input type="hidden" name="option_amount0" value="95.00" />
<input type="hidden" name="option_select1" value="500 qty" />
<input type="hidden" name="option_amount1" value="125.00" />
<input type="hidden" name="option_select2" value="1,000 qty" />
<input type="hidden" name="option_amount2" value="200.00" />
<input type="hidden" name="option_select3" value="2,500 qty" />
<input type="hidden" name="option_amount3" value="450.00" />
<input type="hidden" name="option_select4" value="5,000 qty" />
<input type="hidden" name="option_amount4" value="638.00" />
<input type="hidden" name="option_index" value="0" />
-->


<tr>
<td>
<input type="hidden" name="on1" value="window option">window option</td></tr><tr><td><select name="os1">
<option value="no window">no window </option>
<option value="window (right)">window (right) </option>
<option value="window (left)">window (left) </option>
<option value="double window (left)">double window (left) </option>
</select> </td></tr>


</table>

<input onclick=CalculateOrder(this.form)
type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"
<img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</body>
</html>









<html>
<head>
<div>
<script type="text/javascript" src="nine_envelope_sec_src.js">
</script>


<form rel="nofollow" target="paypal" style="position:absolute; left:700px;top:200px; width:400px; height:25px; font-family:helvetica; color:#000000;font-size:18px;"
action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="">
<table>
<tr><td>
<input type="hidden" name="on0" value="#9 Envelope w/ Security Tint">#9 Envelope w/ Security Tint
<input type="hidden" name="amount" value="">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="">
<input type="hidden" name="item_number" value="">

<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="add" value="1">

</td></tr><tr><td>

<select name="os0">
<option value="250 qty">250 qty $110.00</option>
<option value="500 qty">500 qty $140.00</option>
<option value="1,000 qty">1,000 qty $215.00</option>
<option value="2,500 qty">2,500 qty $475.00</option>
<option value="5,000 qty">5,000 qty $678.00</option>
</select>

</td></tr>

<!--
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="option_select0" value="250 qty" />
<input type="hidden" name="option_amount0" value="110.00" />
<input type="hidden" name="option_select1" value="500 qty" />
<input type="hidden" name="option_amount1" value="140.00" />
<input type="hidden" name="option_select2" value="1,000 qty" />
<input type="hidden" name="option_amount2" value="215.00" />
<input type="hidden" name="option_select3" value="2,500 qty" />
<input type="hidden" name="option_amount3" value="475.00" />
<input type="hidden" name="option_select4" value="5,000 qty" />
<input type="hidden" name="option_amount4" value="678.00" />
<input type="hidden" name="option_index" value="0" />
-->


<tr>
<td><input type="hidden" name="on1" value="window option">window option</td></tr><tr><td><select name="os1">
<option value="no window">no window </option>
<option value="window (right)">window (right) </option>
<option value="window (left)">window (left) </option>
<option value="double window (left)">double window (left) </option>
</select> </td></tr>
<!--
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="option_select0" value="no window" />
<input type="hidden" name="option_amount0" value="0" />
<input type="hidden" name="option_select1" value="window (right)" />
<input type="hidden" name="option_amount1" value="0" />
<input type="hidden" name="option_select2" value="window (left)" />
<input type="hidden" name="option_amount2" value="0" />
<input type="hidden" name="option_select3" value="double window (left)" />
<input type="hidden" name="option_amount3" value="0" />
-->


</table>
<input onclick=CalculateOrder(this.form)
type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"
<img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

</div>
</head>
</html>



nineEnvelope.js


function CalculateOrder(form)
{ if (form.os0.value == "250 qty") { form.amount.value = 95.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "500 qty") { form.amount.value = 125.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "1,000 qty") { form.amount.value = 200.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "2,500 qty") { form.amount.value = 450.00; form.item_number.value = ""; form.shipping.value = "20.00"; form.shipping2.value = "20.00"; }
if (form.os0.value == "5,000 qty") { form.amount.value = 638.00; form.item_number.value = ""; form.shipping.value = "35.00"; form.shipping2.value = "35.00";}

}


nine_envelope_sec_src.js


function CalculateOrder(form)
{ if (form.os0.value == "250 qty") { form.amount.value = 110.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "500 qty") { form.amount.value = 140.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "1,000 qty") { form.amount.value = 215.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "2,500 qty") { form.amount.value = 475.00; form.item_number.value = ""; form.shipping.value = "20.00"; form.shipping2.value = "20.00"; }
if (form.os0.value == "5,000 qty") { form.amount.value = 678.00; form.item_number.value = ""; form.shipping.value = "35.00"; form.shipping2.value = "35.00"; }

}

Hello chaps, I'm Nick

I'm in the process of creating a web app using Google Maps. What the following code should do is retrieve some xml code from a page, then load it on to the map, using the geocoder to get lat/long values from the address. Most of it's just Google code I've mauled about with.

The map loads, but none of the markers load on to the map. I've gone to the php page which generates the XML for the markers and all is fine there. I know the code is a messy crock of junk, I was sort of concentrating on trying to make it work then I'll sort out the nomenclature. Bad methodology, I know.

Code:

var id = null;
    var adress = null;
    var image = null;
    var point = null;
    var pointer = null;
    var geocoder = null;

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;
        
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(52.2725, -0.8825), 12);
        geocoder = new GClientGeocoder();
        
        GDownloadUrl("phpsqlajax_genxml3.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            id = markers[i].getAttribute("ID");
            address = markers[i].getAttribute("ADDRESS");
            image = markers[i].getAttribute("IMAGE");
            var point3 = showAddress(address);
            var marker = createMarker(pointer, id, address, image);
            map.addOverlay(marker);
          }
        });
      }
    }
    
    function showAddress(address) {
	point = geocoder.getLatLng(address,function(point) {
		if (!point) {
			alert(address + " not found");
		} 
		else 
		{
			pointer = new GLatLng(point);
			return pointer;
		}
	});
}

    function createMarker(pointer, id, address, image) {
      var marker4 = new GMarker(pointer);
      var html = "<b>" + id + "</b> <br/>" + address + "</b> <br/>" + image;
      GEvent.addListener(marker, 'click', function() {
        marker4.openInfoWindowHtml(html);
      });
      return marker4;
    }

Thanks in advance

Hi guys, was just wondering if there was a way to control the page height and width using js/jquery?

I have a page that is:
width: 980px
height: 2500px

I would like the page height to be set to around 900px with the viewable scrollbar and all other content not viewable underneath.

Any help is appreciated


Cheers,
paffley

Hi,
well earlier i asked for a script which can load game which showing some banner until the game is loading and the load progress that it shows, it shouldn't be fake, many people said you need flash for it, but atlast i found a script that can do that for me.
BUT there is a issue when i started using the script in the script the width and height can be in px like width 500 but it can't be made to width 100% when i make it 100% the script stops working.
I can't use px or any other thing except 100% as i want the flash to increase its width and height with the change in screen resolution.

Here is the script, you can make a demo html file out of it for testing purposes, if you don't want to make one i am ready to provide a demo page too, please leave a comment for it. Thank you ^_^

Code:

<!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>Pre-roll Example page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://files.cryoffalcon.com/woro/preroll.dev.js"></script>
    <style>
		.gamecontent				{width:923px;padding:0px;margin:0px auto 0px auto;background-color:#FFF;}
		.gamecontent .gamewrapper	{margin:0px auto 0px auto;}
		.gamecontent .game			{float:left;margin:0px auto 0px auto;padding:0px;overflow:hidden;width:1px;height:1px}
		.gamecontent .ad			{display:none;width:300px;height:300px;margin:0px auto 0px auto;padding:50px auto 0px auto;text-align:center;font-size:10px}
		.gamecontent .ad #progress	{width:200px;height:10px;margin:10px auto 0px auto;padding:0px;border:solid 1px #E7B9D1;text-align:left;}
		.gamecontent .ad #pbar		{width:0px;height:10px;background-color:#CCC;}
		.gamecontent .ad #pskip		{text-align:center;}	
		.medrectangle				{width:300px;height:250px;border:none}
	</style>
</head>

<body>
<div class="gamecontent">
    <div class="gamewrapper" style="height:640px;width:640px;">
      <div class="game" id="gameframe"></div>
        <div id="adframe" class="ad">
            <div>Advertisement</div>
            <div id="plad"></div>
            <div id="progress"></div>
        </div>
        <noscript>	
            <div>
                 <!--Game embed code should be placed here here-->
            </div>
        </noscript>
 	</div>
</div>

<script type="text/javascript" language="javascript">
var af = 'adframe';
var gf = 'gameframe';
var gid = 'gameswf';
var adinvoke = '<iframe class="medrectangle" src="<!--to show my logo or ad-->" scrolling="no"></iframe>';

function skipad() {
	$('#plad').html('<div></div>');
	$('#'+af).hide();
	$('#'+gf).css('width','640px');
	$('#'+gf).css('height','640px');
}
$('#gameframe').preloadad(
	{  // calls the init method
	  swf	 	: 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf',
	  width  	: 640,
	  height 	: 640,
	  gameid	: gid,
	  gameframe : gf,
	  adframe 	: af,
	  adcode	: adinvoke,
	  pltime 	: 10000,
	  gametype	: 'swf',
	  base		:'http://games.balloontowerdefense.net/b/',
	  skiptxt	: 'Click here to show the game',
	  showad	:'1'
	});
</script>

</body>
</html>

in the above code the 640 width and height is the issue, as it doesn't work with 100% values, i was wondering how to make it work with 100% width and height. I don't know what did i miss or where did i go wrong?

Here's my HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>The Happy Hoppin' Hotel</title>
		<script src="happyhoppin.js" language="javascript" type="text/javascript"></script> 
	</head>
	<body>
		<h1>The Happy Hoppin' Hotel Checkout Page</h1>
		<h2>Fill out the form below to calculate balance due</h2>
		<form>
			Guest ID Number: <input type="text" id="guestID" /> <br />
			<br />
			Room Type:
				<select id="roomType">
				<option></option>
				<option>Parlor</option>
				<option>Single</option>
				<option>Double</option>
				</select> <br />
			<br />
			Length of Stay: <input type="text" id="stayLength" /> <br />
			<br />
			Number of Drinks: <input type="text" id="drinkNumber" /> <br />
			<br />
			Number of Towels: <input type="text" id="towelNumber" /> <br />
			<br />
			Number of Flushes: <input type="text" id="flushNumber" /> <br />
			<br />
			Bug Complaints?: <br />
				<form name="bugComplaintRadio">
					<input type="radio" name="bugComplaint" value="No" />No</label> <br />
					<input type="radio" name="bugComplaint" value="Yes" />Yes</label> <br />
				</form>
			<br />
			Customer Comments: <br />
				<textarea name="customerComment" cols="50" rows="5">Enter your comments here...</textarea> <br />
			<br />
			<input type="button" onclick="calculateBill()" value="Calculate Bill">
		</form>
	</body>
</html>

Here's my Javascript:
Code:

const parlorPrice = 80;
const singlePrice = 100;
const doublePrice = 150;
const drinkPrice = 5;
const towelPrice = 3;
const flushPrice = 1;

var guestID = 0;
var roomPrice = 0;
var stayLength = 0;
var drinkNumber = 0;
var towelNumber = 0;
var flushNumber = 0;
var totalDue = 0;
var totalCharge = 0;

function calculateBill(){
	validateForm();

	//roomType//
	if(roomType == "Parlor"){
		roomPrice = parlorPrice;
	}
	if(roomType == "Single"){
		roomPrice = singlePrice;
	}
	if(roomType == "Double"){
		roomPrice = doublePrice;
	}
	//roomType//

	//drinkCharge//
	drinkCharge = drinkNumber * drinkPrice;
	//drinkCharge//

	//towelCharge//
	towelCharge = towelNumber * towelPrice;
	//towelCharge//

	//flushCharge//
	flushCharge = flushNumber * flushPrice;
	//flushCharge//

	//totalCharge//
	totalCharge = roomPrice + drinkCharge + towelCharge + flushCharge;
	//totalCharge//

	//**bugDiscount**//
	function getCheckedRadio() {

		bugValue = "";
		bugLength = document.bugComplaintRadio.bugComplaint.length;
		var bugDiscount = 0;

		for (x = 0; x < bugLength; x ++) {
			if (document.bugComplaintRadio.bugComplaint[x].checked) {
				bugValue = document.bugComplaintRadio.bugComplaint[x].value;
			}
		}
		if (bugValue == "") {
			alert("You did not choose whether you had a bug complaint or not");
		}
		if (bugValue = "No"){
			bugDiscount = 0;
		}
		if (bugValue = "Yes"){
			bugDiscount = 20;
		}
	}
	//**bugDiscount**//

	getCheckedRadio();

	//totalDue//
	totalDue = totalCharge + bugDiscount
	//totalDue//

	displayBill();
}

function validateForm(){

	//guestID//
	guestID = parseInt(document.getElementById("guestID").value);
	if(isNaN(guestID)){
		alert("Guest ID must be a number");
		return;
	}
	if(guestID <= 0){
		alert("Guest ID must be greater than zero");
		return;
	}
	//guestID//

	//roomType//
	roomType = document.getElementById("roomType").value;
	if(roomType == ""){
		alert("Room type must be selected");
		return;
	}
	//roomType//

	//stayLength//
	stayLength = parseInt(document.getElementById("stayLength").value);
	if(isNaN(stayLength)){
		alert("Length of stay must be a number");
		return;
	}
	if(stayLength <= 0){
		alert("Length of stay must be greater than zero");
		return;
	}
	//stayLength//

	//drinkNumber//
	drinkNumber = parseInt(document.getElementById("drinkNumber").value);
	if(isNaN(drinkNumber)){
		alert("Number of drinks must be a number");
		return;
	}
	if(drinkNumber <= 0){
		alert("Number of drinks must be greater than zero");
		return;
	}
	if(drinkNumber > 25){
		alert("Number of drinks has exceeded 25");
		return;
	}
	//drinkNumber//

	//towelNumber//
	towelNumber = parseInt(document.getElementById("towelNumber").value);
	if(isNaN(towelNumber)){
		alert("Number of towels must be a number");
		return;
	}
	if(towelNumber <= 0){
		alert("Number of towels must be greater than zero");
		return;
	}
	//towelNumber//

	//flushNumber//
	flushNumber = parseInt(document.getElementById("flushNumber").value);
	if(isNaN(flushNumber)){
		alert("Number of flushes must be a number");
		return;
	}
	if(flushNumber <= 0){
		alert("Number of flushes must be greater than zero");
		return;
	}
	//flushNumber//

	//customerComment//
	customerComment = document.getElementById("customerComment");
	//customerComment//
}

function displayBill(){
	var newPage =  "<html><head><title>Billing Summary</title></head>";
		newPage += "<body><h1>Happy Hoppin Hotel</h1>";
		newPage += "<h2>Guest Billing Statement</h2>";
		newPage += "Guest Identification: #" + guestID;
		newPage += "<br />";
		newPage += "Room Type: " + roomType;
		newPage += "<br />";
		newPage += "Room Charge: $" + roomPrice;
		newPage += "<br />";
		newPage += "Length of Stay: " + stayLength + " days";
		newPage += "<br />";
		newPage += "Drink Charge: $" + drinkCharge;
		newPage += "<br />";
		newPage += "Towel Charge: $" + towelCharge;
		newPage += "<br />";
		newPage += "Flushing Charge: $" + flushCharge;
		newPage += "<br />";
		newPage += "Total Charge: $" + totalCharge;
		newPage += "<br />";
		newPage += "Discount: $" + bugDiscount;
		newPage += "<br />";
		newPage += "Total Due: $" + totalDue;
		newPage += "<br />";
		newPage += "<h3>Come back and visit us again at the Happy Hoppin' Hotel!</h3>";

	var z = window.open("","","width=400,height=500");
	z.document.write(newPage);
	z.document.close();
}

My question is, I've been spending countless hours trying to:
1. Make two radio buttons indicating "No" and "Yes",
2. Retrieve which selection the user has made,
3. Change the value of "bugDiscount" or the amount of money ($20 or $0) depending on which choice the user made; $0 for No & $20 for Yes.
4. Subtract the value of bugDiscount (0 or 20) from the totalCharge to get TotalDue

I know I'm close, but I've tried any number of variations in my code and I still can't seem to get it right. Can anyone help?

Hi,

I have the below javascript that insert smiles for me.
But in Firefox, it is inserting at the bottom of the message

Edit: This only happens when there in no text input first before the smile.

For exmple
Quote:


-- Original Message ---
test send :-)
-- End Original Message --- ;-)
I would like it be inserted, like
Quote:
;-)

-- Original Message ---
test send :-)
-- End Original Message ---
Note: ;-) would be the smile


It works fine in Internet Explorer, but Firefox, put it in the wrong place, can anyone help.

The javascript code I use is below:

Code:

//Smile Start

var myAgent   = navigator.userAgent.toLowerCase();
var myVersion = parseInt(navigator.appVersion);

var is_ie  = ((myAgent.indexOf("msie") != -1)  &&  (myAgent.indexOf("opera") == -1));
var is_nav = ((myAgent.indexOf('mozilla')!=-1) &&  (myAgent.indexOf('spoofer')==-1)
                    && (myAgent.indexOf('compatible') == -1)  &&

(myAgent.indexOf('opera')==-1)
                    && (myAgent.indexOf('webtv') ==-1)        &&

(myAgent.indexOf('hotjava')==-1));

var is_win = ((myAgent.indexOf("win")!=-1) ||  (myAgent.indexOf("16bit")!=-1));
var is_mac = (myAgent.indexOf("mac")!=-1);

function smile( txt ) {
//    document.all.txtmessage.value = document.all.txtmessage.value +  txt;
//        return false;
    doInsert(" " + txt + " ", "",  false,document.getElementById('txtmessage'));             
}
function smile2( txt ) {
    doInsert(" " + txt + " ", "",  false,document.getElementById('txttemplate'));
}
function smile3( txt ) {
    doInsert(" " + txt + " ", "",  false,document.getElementById('txtcomments'));
}


function doInsert(ibTag, ibClsTag, isSingle, name_txt)
{
    var isClose = false;
    var obj_ta = name_txt;


    //----------------------------------------
    // It's IE!
    //----------------------------------------
if ( (myVersion >= 4) && is_ie && is_win)
//    if ( (ua_vers >= 4) && is_ie && is_win)
    {
        if (obj_ta.isTextEdit)
        {
            obj_ta.focus();
            var sel = document.selection;
            var rng = sel.createRange();
            rng.colapse;
            if((sel.type == "Text" || sel.type == "None") && rng  != null)
            {
                if(ibClsTag != "" && rng.text.length > 0)
                    ibTag += rng.text + ibClsTag;
                else if(isSingle)
                    isClose = true;

                rng.text = ibTag;
            }
        }
        else
        {
  //-- mod_bbcode begin
          // this should work with Mozillas
          if ( (myVersion >= 4) && is_win) {
              var length = obj_ta.textLength;
              var start = obj_ta.selectionStart;
              var end = obj_ta.selectionEnd;
              if (end == 1 || end == 2)
                  end = length;
              var head = obj_ta.value.substring(0,start);
              var rng = obj_ta.value.substring(start, end);
              var tail = obj_ta.value.substring(end, length);
              if( start != end ){
                  if (ibClsTag != "" && length > 0)
                      ibTag += rng + ibClsTag;
                  else if (isSingle)
                      isClose = true;
                  rng = ibTag;
                  obj_ta.value = head + rng + tail;
                  start = start + rng.length;
              }
              else{
                  if(isSingle)
                      isClose = true;
                  obj_ta.value = head + ibTag + tail;
                  start = start + ibTag.length;
              }
              obj_ta.selectionStart = start;
              obj_ta.selectionEnd = start;
          }
          else {
  //-- mod_bbcode end 
                if(isSingle)
                {
                    isClose = true;
                }
               
                obj_ta.value += ibTag;
    //-- mod_bbcode begin
         }
    //-- mod_bbcode end         
        }
    }
    //----------------------------------------
    // It's MOZZY!
    //----------------------------------------
   
else if ( obj_ta.selectionEnd )
    {
        var ss = obj_ta.selectionStart;
        var st = obj_ta.scrollTop;
        var es = obj_ta.selectionEnd;
       
        if (es <= 2)
        {
            es = obj_ta.textLength;
        }
       
        var start  = (obj_ta.value).substring(0, ss);
        var middle = (obj_ta.value).substring(ss, es);
        var end    = (obj_ta.value).substring(es, obj_ta.textLength);
       
        //-----------------------------------
        // text range?
        //-----------------------------------
       
        if (obj_ta.selectionEnd - obj_ta.selectionStart > 0)
        {
            middle = ibTag + middle + ibClsTag;
        }
        else
        {
            middle = ibTag + middle;
           
            if (isSingle)
            {
                isClose = true;
            }
        }
       
        obj_ta.value = start + middle + end;
       
        var cpos = ss + (middle.length);
       
        obj_ta.selectionStart = cpos;
        obj_ta.selectionEnd   = cpos;
        obj_ta.scrollTop      = st;

    }
    //----------------------------------------
    // It's CRAPPY!
    //----------------------------------------
    else
    {
        if (isSingle)
        {
            isClose = true;
        }
       
        obj_ta.value += ibTag;
    }
   
    obj_ta.focus();

    return isClose;
}

function CDE(elemId) {
        if(document.getElementById(elemId).style.display != "none")
            document.getElementById(elemId).style.display = "none"
        else
            document.getElementById(elemId).style.display = "inline"
}

//Smile End

Thanks for any help you can give me

Hello!

I have a really simple JavaScript calculator I'm running, and for the life of me can not figure out how to solve this crazy number problem. It's not doing the math properly, and javascript is not my strongest suit.

All my script does is take user input of numbers into a form field, subtract that from another form and multiply the answer of those two forms by whatever the user put in.

Example:

210 (minus) 120 (multiplied by) .90 = 81

Here is the actual script:

Code:

// Calculator
function CalculateSum(Atext, Btext, Ctext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
var C = parseFloat(Ctext);
form.Answer.value = A - B * C;
}

/* ClearForm: this function has 1 argument: form.
   It clears the input and answer fields on the form. 
   It needs to know the names of the INPUT elements in order
   to do this. */

function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.input_C.value = "";
form.Answer.value = ""; 
}

// end of JavaScript functions -->

And the html I am using:
Code:

<form name="Calculator" method="post">
      <p>Base Average<input type=text name="input_A"></p>
<p>Current Average:<input type=text name="input_B"></p>
<p>Percentage of:<input type=text name="input_C"></p>
<p>Your ball speed is: 
  (miles per hour)
<input name="Answer" type=text readonly>
</p>
<p>
  <input type="button" value="Calculate Handicap" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form.input_C.value, this.form)">
  <input type="button" value="Clear" name="ClearButton" onClick="ClearForm(this.form)">
</p>
</form>

Any help would be greatly appreciated!

please help me~~Hi I have to create a table using javascript. Firefox displays the expected result but for IE, the column width is screwed >"<

I have to use the col tag to set width because sometimes the first row maybe merged. All I need is to create a table that strictly displays according to the inputted column widths from my program.

In below I have setup very short example that construct table in a similar way to my original javascript function. I also draw a ruler to help showing the proper width of 400px on the screen. column 1 should be 100px width and column 2 should be 300px.

Please help me~~T_T

Code:

<?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<body onload="init()">
Hard Coded:

<DIV style="WIDTH: 400px; HEIGHT: 25px;overflow:hidden;">
<TABLE style="border:none; BORDER-SPACING: 0px; WIDTH: 400px; TABLE-LAYOUT: fixed" cellSpacing="0" cellpadding="0">
<col width="100px">
<col width="300px">
<TBODY>
<TR>
<TD style="background-color:blue">
a
</TD>
<TD style="background-color:green">
b
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Ruler:
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>

Javascript inserted:

<div id="hi">
</div>

</body>
<script  language="javascript">		
	function init() {
		var w = [100, 300]
		// test table create
		var testDiv, testTBody, testTable, testTr, testTd, testCol;
		document.getElementById("hi").appendChild(testDiv = document.createElement("div"));
		with (testDiv.style) {
			width="400px";
			height="25px";
		}
		testDiv.appendChild(testTable = document.createElement("table"));
		with (testTable) {
			style.tableLayout="fixed";
			style.borderSpacing="0px";
			style.width = "400px";
			appendChild(testCol = document.createElement("col"));
			testCol.style.width = 100 + 'px';
			appendChild(testCol = document.createElement("col"));
			//testCol.style.width = 300 + 'px';
			appendChild(testTBody = document.createElement("tbody"));
			cellSpacing= 0
		}
		testTBody.appendChild(testTr = document.createElement("tr"));
		with (testTr){
			
		}
		for (var i= 0; i < 2; i++) {
			testTr.appendChild(testTd = document.createElement("td"));
			testTd.innerHTML = "Testing";
			with (testTd) {
				style.borderTop = "1px solid lightgray";
				style.borderLeft="1px solid lightgray";
				style.borderRight="1px solid black";
				style.borderBottom="1px solid black";
			}
		}
	}
</script>
</html>

Hello, let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me.

I have this page. http://felixdeportu.com/5/

The images are inside a div#content div#photo.

I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean).

What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works...

In the routine below I'm trying to make sure a date isn't > today.
It WORKS FINE in Firefox but I get a NaN in MSN.
WHY?
And how do I fix it?
Thanks
Note: ( 2010 2 1 is in testfield and 2010 4 20 is in todayfield)

var todayfield = tdyear+" "+tdmonth+" "+tdday;
alert ("today=" + todayfield);
alert (Date.parse(testfield));
alert (Date.parse(todayfield));

if (Date.parse(testfield) <= Date.parse(todayfield))

When i did a view source , checkbox names are displayed as MedicalAction_listOfTransfers_[0]__rowSelected'
so each checkbox has different name and id as well

all i am trying to do here is to put a checkall/uncheckall option , also in the jsp page we have a pagination
so is that something that cause the checkbox value as null ?



function MoveAll(){


var lengthofRecords = document.getElementById('resultsSize').value;
for (i = 0; i < lengthofRecords; i++){
var name = 'MedicalAction_listOfTransfers_'+i+'__rowSelected';
var checkBox = document.getElementById(name);
alert("check box B4: " + checkBox); - // I AM GETTING NULL VALUE HERE
checkBox.checked=checkBox.checked == false ? true:false;
alert("check box A4: " + checkBox.checked);
//checkBox.checked = checkBox.checked? true:false;
}

}

Please help i am newbie

How do I store how many Windows my house has as a variable as this script I made isn't working.

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
var test
function show_prompt(a_bac)
{
prompt(a_bac)
}
function show_alert(a_baf)
{
alert(a_baf)
}
</script>
<body>
<!-- How do I store how many Windows my house has as a variable? -->
<input type="button" value="click" onclick="var theanswer = prompt('How many windows does your house have?')" />
<input type="button" value="answer" onclick="alert(theanswer)" />
</body>
</html>