JavaScript - Document.form.submit Does Not Work After Sometime!

Hi, any help with this would be very much appreciated.

Apologies for cross-posting. I think I ut this in the wrong place to begin with.

I have a script containing functions to change an image from clicking a button or changing the selection in a combobox.
The buttons either request that the next image in the array is called or the previous, depending on the button. The combo box changes to the chosen
image.

The script works fine for me in firefox and safari but I can't get it to work in ie and aftermany hours I can't see any reason why.

As far as I can work out the problem with the script is in the changeImage
function while trying to set the new image.
Code:

 
document.images['priceImg'] = followingImg;
document.images['priceImg'].src = followingSrc;

Thanks in advance.


The following is the script:

Code:

var followingImg;
var followingSrc;
var presentImg;
var presentSrc;
var count = 0;

// Create an array of price list page images and locations
var numImages = 8;
var pimages=new Array();
pimages[0]=new Image();
pimages[0].src="../images/priceList/price_walls.jpg";
pimages[1]=new Image();
pimages[1].src="../images/priceList/price_nestle.jpg";
pimages[2]=new Image();
pimages[2].src="../images/priceList/price_franco.jpg";
pimages[3]=new Image();
pimages[3].src="../images/priceList/price_ben1.jpg";
pimages[4]=new Image();
pimages[4].src="../images/priceList/price_ben2.jpg";
pimages[5]=new Image();
pimages[5].src="../images/priceList/price_ron.jpg";
pimages[6]=new Image();
pimages[6].src="../images/priceList/price_cartridge_9654.jpg";
pimages[7]=new Image();
pimages[7].src="../images/priceList/price_sun1.jpg";
pimages[8]=new Image();
pimages[8].src="../images/priceList/price_sun2.jpg";


// Retrieves the current image from the image element
function getCurImage() {

	if (document.images) {

		presentImg = document.images['priceImg'];
		presentSrc = document.images['priceImg'].src;

		var curId = 0;

		// Loops through pimages array to find which image is currently being displayed
		for (i=0;i<pimages.length;i++) {
			if (pimages[i].src == presentSrc) {
				curId = i;
			}
		}

		return curId;

	}

}

//**************************//
// I think this is where it has trouble //
//**************************//

// Sets the new image
function changeImg() {

	document.images['priceImg'] = followingImg;
	document.images['priceImg'].src = followingSrc;

}

// Called by 'next' button.
// Calls getCurrentImg then chooses the next image then calls changeImg.
function slideItForward() {

	var curID = getCurImage();

	if (count == 0) {
		followingImg = pimages[0];
		followingSrc = pimages[0].src;
		count++;
	} else {
		// Add one to current image id for next image
		var nextId = (curID + 1);
		if (nextId <= numImages) {
			followingImg = pimages[nextId];
			followingSrc = pimages[nextId].src;
		// If at end of images stay on same page
		} else {
			followingImg = document.images['priceImg'];
			followingSrc = document.images['priceImg'].src;
		}
	}
	// display new image
	changeImg();
	setText(nextId);
}

// Called by 'previous' button.
// Calls getCurrentImg then chooses the next image then calls changeImg.
function slideItBackward() {
	var curID = getCurImage();

	// take one from current image id for next image
	var nextId = (curID - 1);
	if (nextId >= 0) {
		followingImg = pimages[nextId];
		followingSrc = pimages[nextId].src;
	// If at start of images stay on same page
	} else {
		followingImg = document.images['priceImg'];
		followingSrc = document.images['priceImg'].src;
	}
	// display new image
	changeImg();
	setText(nextId);
}

// Called by optionbox "newPage".
// Takes users choice and displays it.
function choosePage(page) {

	if (page == 1) {
		// Retrieve combobox option and its value
		var index = document.getElementById('newPageOne').selectedIndex;
		var newId = document.getElementById('newPageOne').options[index].value;
	} else {
		// Retrieve combobox option and its value
		var index = document.getElementById('newPageTwo').selectedIndex;
		var newId = document.getElementById('newPageTwo').options[index].value;
	}

	// Convert string to int
	newId = parseInt(newId);

	// If new id is default setting do nothing
	if (newId == 0) {
		return;
	// Else choose the image from the pimages array and call changeImg
	} else {

		// Changes value to accomodate for value vs array position
		newId = (newId - 1);

		followingImg = pimages[newId];
		followingSrc = pimages[newId].src;

		// display new image
		changeImg();
		document.getElementById("newPageOne").value = (newId+1);
		document.getElementById("newPageTwo").value = (newId+1);
	}

}

// Changes the text in the combobox
function setText(id) {

	id = id + 1;
	document.getElementById("newPageOne").value = id;
	document.getElementById("newPageTwo").value = id;
	//document.getElementsByName('newPage').value = id;
}

The following is the relevent section of the html:

Code:

<input style="margin-bottom:10px; margin-top: 20px" type="button" name="PreBut" value="Previous" onclick="slideItBackward();" />
			&nbsp;&nbsp;&nbsp;<input style="margin-bottom:10px" type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
			&nbsp;&nbsp;&nbsp;<select style="margin-bottom:10px" name="newPage" id="newPageOne" onchange="choosePage(page = 1);">

			<option value="1"> Walls </option>
			<option value="2"> Nestle, Treats and Cadburies Impulse </option>
			<option value="3"> Franco, Mars and Ijsboerke Impulse </option>
			<option value="4"> Bennets Scooping </option>
			<option value="5"> Bennets Scooping Cont.. </option>
			<option value="6"> Individual tubs and Ice cream cartridges </option>
			<option value="7"> Ronaldo Ice creams and Sorbets </option>
			<option value="8"> Sundries, Cones, etc </option>
			<option value="9"> Sundries, Cones, etc Cont.. </option>
			</select>

			<center>
			<div id="price-display">
				<img src="../images/priceList/price_img1.jpg" id="priceImg" name="priceImg" alt="Robertos Ice cream wholesale pricelist" ></img>
			</div>
			</center>

			<input style="margin-top: 10px" type="button" name="preBut" value="Previous" onclick="slideItBackward();" />
			&nbsp;&nbsp;&nbsp;<input type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
			&nbsp;&nbsp;&nbsp;<select name="newPage" id="newPageTwo" onchange="choosePage(page = 2);">

			<option value="1"> Walls </option>
			<option value="2"> Nestle, Treats, Cadburies Impulse </option>
			<option value="3"> Franco, Mars Ijsboerke Impulse </option>
			<option value="4"> Bennets Scooping </option>
			<option value="5"> Bennets Scooping Cont.. </option>
			<option value="6"> Individual tubs and Ice cream cartridges </option>
			<option value="7"> Ronaldo Ice creams and Sorbets </option>
			<option value="8"> Sundries, Cones, etc </option>
			<option value="9"> Sundries, Cones, etc Cont.. </option>
			</select>

Hello codingforums! I'm new to javascript and have a problem regarding functions.

I've been trying to create a slideshow, and while testing different syntax etc. I'm getting stuck at why this works:

Code:

document.images.portrait.src = img2.src;

And not this:
Code:

function slideshow(){
document.images.portrait.src = img2.src;
}

Thanks for any help!

I'm a perplexed nube, and I can't understand how document.getElementById evaluates to true when no parameter is passed to getElementById. This code alerts 'foo' ...

Code:

if (document.getElementById) {alert('foo')} else {alert('bar')}

Just to double check, this code alerts 'bar'

Code:

if (!document.getElementById) {alert('foo')} else {alert('bar')}

OK! I re adjusted some things after some research. Still a bit confused:
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>login</title>
<script type="text/javascript">

function encode64(form) {
	
	var username=un;
	var password=pass;
	var ip=ip;
	var enKey= 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
	var deKey = new Array(

	-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,

	-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,

	-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,

	52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,

	-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,

	15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,

	-1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,

	41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1

	);


	var str=new Array();

	var ch1, ch2, ch3;

	var pos=0;

	while(pos+3<=src.length){

		ch1=src.charCodeAt(pos++);

		ch2=src.charCodeAt(pos++);

		ch3=src.charCodeAt(pos++);

		str.push(this.enKey.charAt(ch1>>2), this.enKey.charAt(((ch1<<4)+(ch2>>4))&0x3f));

		str.push(this.enKey.charAt(((ch2<<2)+(ch3>>6))&0x3f), this.enKey.charAt(ch3&0x3f));

	}

	if(pos<src.length){

		ch1=src.charCodeAt(pos++);

		str.push(this.enKey.charAt(ch1>>2));

		if(pos<src.length){

			ch2=src.charCodeAt(pos);

			str.push(this.enKey.charAt(((ch1<<4)+(ch2>>4))&0x3f));

			str.push(this.enKey.charAt(ch2<<2&0x3f), '=');

		}else{

			str.push(this.enKey.charAt(ch1<<4&0x3f), '==');

		}

	}

	return str.join('');

}
var encusername = encode64 (un);
var encpass = encode64 (pass);

//script andy gave me

function checkUrlRandom(url){
       var mathRnd = Math.round(Math.random()*10000);
       if(url.indexOf("?") > 0 ){
               url = url + "&rnd=" + mathRnd;
       }else{
               url = url + "?rnd=" + mathRnd;
       }
       return url;
}

//HOW DO I GET THE ENCODED USERNAME AND PASSWORD AND NON ENCODED IP ADDRESS TO POST INTO THE URL UNDENEATH THIS AND THEN GO TO THAT URL?

xhr = new XMLHttpRequest();
xhr.open("GET",checkUrlRandom("http://"+ip+"/User.cgi?cmd=get_login&username="+encuseranme+"&password="+encpass+""));


</script>

</head>

<body>
<form name="form" method="get" onclick="encode64(this.form)">
  <p>
    <label for="ip">ip</label>
    <input type="text" name="ip" id="ip" />
  </p>
  <p>
    <label for="username">username</label>
    <input type="text" name="username" id="username" />
  </p>
  <p>
    <label for="password">password</label>
    <input type="text" name="password" id="password" />
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="click" />
  </p>
</form>
</body>
</html>

HOW DO I GET THE ENCODED USERNAME AND PASSWORD AND NON ENCODED IP ADDRESS TO POST INTO THE URL AND THEN GO TO THAT URL?

thanks
-Mike

Whenever I click the Submit button, which should create a new window showing all the details entered in the form, it doesn't work ideas?

javascript.html
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>   
<head>
<title>JavaScript</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">

<!-- The external style sheets -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript" src="myjavascript.js"></script>

<meta name="keywords" content="CO332">
<meta name="description" content="CO332 Exercise Website">
<meta name="author" content="Bradley Berwick">


</head>


<body>

<div id="container">
<div id="maincontent">
<div id="header">
		<h1>
			Exercise Website
		</h1>
</div>



<div id="leftnav">
		<ul>
			<li><a href="index.html" >Home</a>
			<li><a href="myjavascript.html" ><span class="currentpage">Services</span></a>
			<li><a href="#" >TBA</a>
			<li><a href="#" >TBA</a>

		</ul>
</div>

	
<div id="content">
  <h2>About Yourself</h2>
  
 
<form name="exampleform">
  <h3>Name: <input name="yourname" type="text"></h3>

	<h3>Age: <input name="age" type="text" size="3" 
	Onchange = '
	if ( !( this.value > 0 && this.value < 150 ) ) {
	alert( this.value + " is not a valid age.");
	this.value=""; // clear age text box
	}' > </h3>
  

  <h3>Gender: 
     <input name="gender" type="radio" value="male"> Male
     <input name="gender" type="radio" value="female"> Female
  </h3>

  <h3>Your favourite colour: 
    <select name="colours">
      <option value="None"> 
      <option value="red">Red
      <option value="green">Green
      <option value="blue">Blue
      <option value="pink">Pink
	  <option value="orange">Orange
	  <option value="purple">Purple
    </select>
  </h3>
<h3>Your hobbies a  <br>
    <input name="running"  type="checkbox"> Running  <br>
    <input name="football" type="checkbox"> Football <br>
	<input name="golf" type="checkbox"> Golf <br>
    <input name="cycling"  type="checkbox"> Cycling 
  </h3>
  
  <textarea rows="10" cols="30">
Add comments.
</textarea>

  <p>
    <input type="reset" value="Clear"> 
    &nbsp; &nbsp; 
    
           <input name="submit" type="button" value="Submit"    
        onclick='submitForm()';>
  
  </p>



</form>

</div>

</div>

	<div id="footer">
    <div id="mailto"> Last updated on 28th Oct 2011<br>   
       Maintained by Bradley Berwick
    </div>
    </div>

</div>


</body>
</html>

myjavascript.js
Code:

function displayMessage(msg) {

	// Open a new window 
var msgWindow = window.open('', 'Message');
 
  // Write message in the new Window 
  msgWindow.document.write(msg);
  msgWindow.document.close();

  // Raise this window, in case it's not visible
  msgWindow.focus();
  
}

var hobstring="";
function submitForm() {
var nam=document.exampleform.elements["yourname"].value;
var age=document.exampleform.elements["age"].value;

var gend = document.getElementsByName('gender');
for (var i = 0; i < gend.length; i++) {
    if (gend[i].checked==true) {
var sex=gend[i].value; 
    }
}
 var sel=document.getElementById('color');
 var color=sel.options[sel.selectedIndex].value;

var hobbs = document.getElementsByName('hobby');
for (var a = 0; a < hobbs.length; a++) {
    if (hobbs[a].checked==true) {
hobstring+=hobbs[a].id+", "; 
    }
} 
var msg="Name: "+nam+"<br>Age: "+age+"<br>Gender: "+sex+"<br>Favorite color: "+color+"<br>Hobbies: "+hobstring;
displayMessage(msg);
}

Hello There,

I have form which submitted data by checkbox checked, the checkbox as looks:
PHP Code:
<input type="checkbox" name="agree" value="1" checked="checked" onclick="document.getElementById('parentTable').className,processForm() = this.checked ? 'vehicleOn' : 'vehicleOff'" /><label for="agree">Agree</label> 


and the Ajax as following
Code:

function processForm() {
 $.ajax({
  type: 'POST',
  url: '<?php echo  $send; ?>',
  data: 'opt1=' + encodeURIComponent($('input[name=\'opt1\']:checked').val() ? $('input[name=\'opt1\']:checked').val() : '') + '&opt2=' + encodeURIComponent($('input[name=\'opt2\']:checked').val() ? $('input[name=\'opt2\']:checked').val() : '') + '&comment=' + encodeURIComponent($('textarea=[name=\'comment\']').val()) + '&agree=' + encodeURIComponent($('input[name=\'agree\']:checked').val() ? $('input[name=\'agree\']:checked').val() : ''),
  beforeSend: function() {
   $('.success, .warning').remove();
   $('#confirm_button').attr('disabled', 'disabled');
   $('#confirm_title').after('<div class="wait"><img src="mage/loading_1.gif" alt="" /> <?php echo $text_wait; ?></div>');
  },
  complete: function() {
   $('#confirm_button').attr('disabled', '');
   $('.wait').remove();
  },
   success: function(data) {
   if (data.error) {
    $('#confirm_title').after('<div class="warning">' + data.error + '</div>');
   }

   if (data.success) {
    $('#confirm_title').after('<div class="success">' + data.success + '</div>');

    $('input[name=\'opt1\']:checked').attr('checked', '');
    $('input[name=\'opt2\']:checked').attr('checked', '');
    $('input[name=\'agree\']:checked').attr('checked', '');
   }
  }
 });
}

The Problem is won't work with IE only, I tested it with IE 6, Anyone could suggest me what I could do? any pointers, samples or links I would be appreciate and Thanks a lot.

Hi all,

I'm designing something to addon to an existing product. I'm struggling with some javascript problems.

I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage.

Is this possible?

Thanks

Hi,

I have a jsp which has a function gets called during the page unload.
This jsp has a form with an action attribute to one servlet.
Please find below the code snippet.

---- Java script code ---
function logoff() {
document.forms["FormName"].rel="nofollow" target="_self";
alert('Submitting the form');
document.forms["FormName"].submit();
}

--- HTML form code -----
<body onUnload='logOff()'>
<form name ="FormName" method="POST" action='<%=sLogoutResponseURL %>'>

Whenever the page gets unloaded always logoff function is getting called. I also get the alert message "Submitting the form". But my servrlet does not get invoked. My application supports logging in with the same user id more than once.

Scenario it works: User logs in. Close the application. logoff function is called and servlet gets invoked.

Scenario it does not work: User logs in one window. Open one more IE window and and open the application with same user id. this can be repeated. Now when i close the application logoff function is called for all of the window close. But servlet does not gets invoked all the time. Sometimes it stops calling servlet.

I have searched over the net and found one solution.
Below piece of code will make sure form gets always submitted.
-------------------------Start -----------------
function fakeSubmit(event) {
var target = event ? event.target : this;
/* Fire a submit event */
var fakeEvent = $(target).fire("form:submit");
if (fakeEvent.stopped == false) {
/* Call the real submit function */
this._submit();
}
}

if(window.HTMLElement){
/* DOM-compliant Browsers */
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = fakeSubmit;
} else {
/* IE does not expose it's HTMLElement object or its children
Let the document load so all forms are accounted for */
document.observe("dom:loaded", function(){
for(var i = 0; i < document.forms.length; i ){
document.forms[i]._submit = document.forms[i].submit;
document.forms[i].submit = fakeSubmit;
}
});
}
-----------End ------------------

But this resulted in script error while loading the page "object does not support this method or property" at line where document.observe is there.

Kindly help at the earliest.

Thanks in advance
Santosh

this is my code ______________________________________________________________


<pega:when test="$mode-input">
<script language="JavaScript">
function showNextButton()
{
handleClientEvent('SERVER','MakeScoreOrder','','-1'); /* fetches the data */
var submitClicked = "<p:r n='pyWorkPage.PFRSData.SubmitClicked' />";
var submitClicked = submitClicked.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var msg = "<p:r n='pyWorkPage.PFRSData.HasMessages' />";
var msg = msg.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
if (submitClicked == "" || msg =="true")
{

toggleSubmitBtn(0);
}
else if (submitClicked == "true" || msg =="false")
{
toggleSubmitBtn(1);
}

}


function toggleSubmitBtn(status)
{
var submitButton=document.actionForm.submitButton;
if(submitButton)
{
var parentTable=pega.u.d.findParentTable(submitButton);
if(parentTable)
if(status)
{
if(parentTable.style.display=='none' || parentTable.style.display=='')
{
parentTable.style.display='inline';
document.actionForm.submitButton.disabled=false;
}
}
else
{
parentTable.style.display='none';
document.actionForm.submitButton.disabled=true;
}
}
}


</script>

<button onClick="showNextButton();" id="PISSubmit" style="vertical-align:middle;">
<span class='buttonLeft'></span>
<span class='buttonMiddle'>
<span class='buttonText' onmouseover="this.className='buttonTextHover'" onmouseout="this.className='buttonText'">Submit</span>
</span>
<span class='buttonRight'></span>
</button>
</pega:when> ___________________________________________________________


On clicking PISsubmit button it should fetch data and display the next button(submitButton).. but on first click nothing happens on second click it fetches the data and third click it displays Next(submitButton)button.
Kindly help !!

Note: its in pega application.

I've literally tried everything. Read 26 tutorials, interchanged code, etc.

My validation functions all work. My AJAX functions work (tested manually using servlet URL's).

The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes.

I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return.

html form:
Code:

<form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
        <table cellspacing="5" style="border: 2px solid black;">
            <tr>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td>*First name</td>
                            <td align="right"><span id="valid_one"></span></td>

                            <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Last name</td>
                            <td align="right"><span id="valid_two"></span></td>

                            <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Email address</td>
                            <td align="right"><span id="result"></span></td>

                            <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Phone number</td>
                            <td align="right"><span id="valid_three"></span></td>

                            <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
                        </tr>
                        <tr>
                            <td align="left">*City/Town</td>
                            <td align="right"><span id="valid_four"></span></td>

                            <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>
                                <select name="s">
                                    <option value="AL">Alabama
                                    <option value="AK">Alaska
                                    <option value="AZ">Arizona
                                    <option value="AR">Arkansas
                                    <option value="CA">California
                                    <option value="CO">Colorado
                                    <option value="CT">Connecticut
                                    <option value="DE">Delaware
                                    <option value="FL">Florida
                                    <option value="GA">Georgia
                                    <option value="HI">Hawaii
                                    <option value="ID">Idaho
                                    <option value="IL">Illinois
                                    <option value="IN">Indiana
                                    <option value="IA">Iowa
                                    <option value="KS">Kansas
                                    <option value="KY">Kentucky
                                    <option value="LA">Louisiana
                                    <option value="ME">Maine
                                    <option value="MD">Maryland
                                    <option value="MA">Massachusetts
                                    <option value="MI">Michigan
                                    <option value="MN">Minnesota
                                    <option value="MS">Mississippi
                                    <option value="MO">Missouri
                                    <option value="MT">Montana
                                    <option value="NE">Nebraska
                                    <option value="NV">Nevada
                                    <option value="NH">New Hampshire
                                    <option value="NJ">New Jersey
                                    <option value="NM">New Mexico
                                    <option value="NY">New York
                                    <option value="MC">North Carolina
                                    <option value="ND">North Dakota
                                    <option value="OH">Ohio
                                    <option value="OK">Oklahoma
                                    <option value="OR">Oregon
                                    <option value="PA">Pennsylvania
                                    <option value="RI">Rhode Island
                                    <option value="SC">South Carolina
                                    <option value="SD">South Dakota
                                    <option value="TN">Tennessee
                                    <option value="TX">Texas
                                    <option value="UT">Utah
                                    <option value="VT">Vermont
                                    <option value="VA">Virginia
                                    <option value="WA">Washington
                                    <option value="WV">West Virginia
                                    <option value="WI">Wisconsin
                                    <option value="WY">Wyoming
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><span id="error"></span></td>
                        </tr>
                        <tr>
                            <td valign="top">*Anti-Spam Verification</td>
                            <td></td>
                            <td id="reCaptcha"></td>
                        </tr>
                    </table>
                </td>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td align="left">*Affiliation</td>
                            <td align="right"><span id="valid_five"></span></td>

                            <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Research Area:</td>
                            <td align="right"><span id="valid_six"></span></td>

                            <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
                        </tr>
                        <tr>
                            <td valign="top" align="left">*Research Overview</td>
                            <td align="right"><span id="valid_seven"></span></td>

                            <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
                        </tr>
                        <tr>
                            <td align="left">*Talk Availability</td>
                            <td></td>
                            <td>
                                <input type="radio" name="ta" value="In person">In person
                                <input type="radio" name="ta" value="Online">Online
                                <input type="radio" name="ta" value="Both" checked>Both
                            </td>
                        </tr>
                        <tr>
                            <td align="left" valign="top">Links</td>
                            <td></td>
                            <td>
                                <table id="linkTable" border="0">
                                    <td><input type="text" style="width: 320px;" name="link"></td>
                                    <td><div id="result"></div></td>
                                </table>
                            </td>
                            <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><span style="color: red;"></span></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <br />
        <input type="submit" id="submit" name="submit" value="Submit Form">
    </form>

Javascript file:
Code:

/* 
 * script.js - ajax and table functions
 */

var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions

var validAjax = new Boolean();
var validCaptcha = new Boolean();

var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();

function init() {
    showRecaptcha('reCaptcha');

    // Separate booleans for AJAX funcs
    validAjax = false;
    validCaptcha = false;

    // Booleanse for fields that don't require servlet validation
    valid_one = false;
    valid_two = false;
    valid_three = false;
    valid_four = false;
    valid_five = false;
    valid_six = false;
    valid_seven = false;
}

function showRecaptcha(element) {
    Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}

function validate_form() {
    if (valid_one && valid_two && valid_three && valid_four && validEmail) {
        startCaptchaRequest();

        if (validCaptcha) {
            return true;
        }
    }
    else {
        alert("Submission contains errors. Please fill out all required fields before submitting.");
        return false;
    }
}

function validate_one() {
    if (document.getElementById("fn").value == 0) {
        valid_one = false;
        document.getElementById("valid_one").innerHTML = "No";
    }
    else {
        valid_one = true;
        document.getElementById("valid_one").innerHTML = "";
    }
}

function validate_two() {
    if (document.getElementById("ln").value == 0) {
        valid_two = false;
        document.getElementById("valid_two").innerHTML = "No";
    }
    else {
        valid_two = true;
        document.getElementById("valid_two").innerHTML = "";
    }
}

function validate_three() {
    if (document.getElementById("pn").value == 0) {
        valid_three = false;
        document.getElementById("valid_three").innerHTML = "No";
    }
    else {
        valid_three = true;
        document.getElementById("valid_three").innerHTML = "";
    }
}

function validate_four() {
    if (document.getElementById("c").value == 0) {
        valid_four = false;
        document.getElementById("valid_four").innerHTML = "No";
    }
    else {
        valid_four = true;
        document.getElementById("valid_four").innerHTML = "";
    }
}

function validate_five() {
    if (document.getElementById("affl").value == 0) {
        valid_five = false;
        document.getElementById("valid_five").innerHTML = "No";
    }
    else {
        valid_five = true;
        document.getElementById("valid_five").innerHTML = "";
    }
}
//
//function validate_six() {
//    if (document.getElementById("ra").value == 0) {
//        valid_six = false;
//        document.getElementById("valid_six").innerHTML = "No";
//    }
//    else {
//        valid_six = true;
//        document.getElementById("valid_six").innerHTML = "";
//    }
//}
//
//function validate_seven() {
//    if (document.getElementById("ro").value == 0) {
//        valid_seven = false;
//        document.getElementById("valid_seven").innerHTML = "No";
//    }
//    else {
//        valid_seven = true;
//        document.getElementById("valid_seven").innerHTML = "";
//    }
//}

function addLink(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell = row.insertCell(0);
    var element1 = document.createElement("input");

    element1.type = "text";
    element1.name = "link" + rowCount;
    element1.style.width = "320px";

    cell.appendChild(element1);
}

function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else {
        limitCount.value = limitNum - limitField.value.length;
    }
}

function createXmlHttpRequest() {
    if(window.ActiveXObject) {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp=new XMLHttpRequest();
    }
}

function startRequest() {
    createXmlHttpRequest();
    
    var param1 = document.getElementById('mailfield').value;

    if (param1 == "") {
        validEmail = false;
        document.getElementById("result").innerHTML = "Blank";
    }
    else {
        xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.send(null);
    }
}

function handleStateChange() {
    if(xmlHttp.readyState==4) {
        if(xmlHttp.status==200) {
            var message =
                xmlHttp.responseXML
                .getElementsByTagName("valid")[0]
                .childNodes[0].nodeValue;
            
            if (message == "Unregistered") {
                validEmail = true;
                document.getElementById("result").style.color = "green";
            }
            else {
                validEmail = false;
                document.getElementById("result").style.color = "red";
            }

            document.getElementById("result").innerHTML = message;
        }
        else {
            alert("Error checking e-mail address - " + xmlHttp.status +
                " : " + xmlHttp.statusText);
        }
    }
}
function createCaptchaRequest() {
    if(window.ActiveXObject) {
        xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp2=new XMLHttpRequest();
    }
}

function startCaptchaRequest() {
    alert('made it to captcha requeswt');
    createCaptchaRequest();

    var param1 = Recaptcha.get_challenge();
    var param2 = Recaptcha.get_response();

    xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
    xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
    xmlHttp2.send(null);
}

function handleStateChangeCaptcha() {
    if(xmlHttp2.readyState==4) {
        if(xmlHttp2.status==200) {
            var message =
                xmlHttp2.responseXML
                .getElementsByTagName("result")[0]
                .childNodes[0].nodeValue;

            if (message == "Valid") {
                alert("captcha valid");
                validCaptcha = true;
            }
            else {
                document.getElementById("error").innerHTML = message;
                validCaptcha = false;
            }
        }
        else {
            alert("Error checking captcha validity - " + xmlHttp2.status +
                " : " + xmlHttp2.statusText);
        }
    }
}

Getting a document.form is undefined when calling this select onchange event

Code:

function submitShipMethodChange(form,field){
	if(document.form['shipform'].elements['shipping_method']){
		var fldIndex = form.elements[field].selectedIndex;
		var selectedMethod = form.elements[field].options[fldIndex].value;
		document.forms['shipform'].elements['shipping_method'].value = selectedMethod;
		document.forms['shipform'].submit();
	}
}

<select name="shipping_method" onChange="submitShipMethodChange(this.shipform,'shipping_method');">

I'm having a heck of a time getting a code to populate several hidden fields in the following form that I'm extracting from the url. It is posting to the appropriate CGI, however the hidden variables are not submitted.

Code:

<script type="text/javascript">
	str=document.URL;
	temp = str.split('//');
	temp1 = temp[1];
	temp2 = temp1.split('.');
	temp3 = str.split('/');
	domain = ('http://' + temp3[2]);
	returnthanks = (domain);
	association = temp2[0];
	poibegin = (str.lastIndexOf('/')+1);
	poiend = (str.lastIndexOf('.'));
	poi = (str.substring(poibegin));
</script><script language="JavaScript" type="text/javascript">
	function doSubmit(){
	document.w2lForm('00N30000004C6Rg').value=association;
	document.w2lForm.('00N30000004C2u2').value=poi;
	document.w2lForm.('retURL').value=returnthanks;
	document.w2lForm.submit();
}
 </script>
<h6 style="text-align: center">Submit your information and a professional will contact you.</h6>
<form method="post" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" name="w2lForm">
    <input type="hidden" name="oid" value="005040020320220B3eR" /> <label for="first_name">First Name</label> <input id="first_name" maxlength="40" name="first_name" type="text" /><br />
    <label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" type="text" /><br />
    <label for="email">Email</label><input id="email" maxlength="80" name="email" type="text" /><br />
    Best Time to Call:<select id="00N30000004NaDm" title="Best Time to Call" multiple="multiple" name="00N30000004NaDm">
    <option value="(select at least one)">(select at least one)</option>
    <option value="Before 9AM (EST)">Before 9AM (EST)</option>
    <option value="9AM to 1PM">9AM to 1PM</option>
    <option value="1PM to 6PM">1PM to 6PM</option>
    <option value="After 6pm">After 6pm</option>
    </select><br />
    <input id="00N30000004C2u2" type="hidden" name="00N30000004C2u2" /> 
    <input id="00N30000004C6Rg" type="hidden" name="00N30000004C6Rg" /> 
    <input type="submit" name="submit" value="Submit Request Information" />
</form>

So I've got an order form that uses javascript to immediately calculate the price as soon as you enter the quantity that you want to order:

Code:

<form method="post" action="submitted.html" name="form">
  <table id="order-table">
    <tr>
        <td>Widgets</td>
        <td><input type="text" name="quantityWidgets" onchange="calculate()"></input></td>
	<td> x </td>
	<td>$650</td>
	<td>=</td>
	<td><input type="text" name="totalWidgets" disabled="disabled"></input></td>
    </tr>
  </table>
</form>

And here's the Javascript

Code:

function calculate(){
	total = document.form.quantityWidgets.value * 650;
	document.form.totalWidgets.value = total;
}

But that's just for 1 row and I have several rows of products. I could just use a different calculate() function for each row, but I'm trying to pass arguments into calculate() AND make it display the result in the proper place, but my syntax must be wrong.

Code:

...
<td><input type="text" name="quantityWidgets" onchange="calculate(quantityWidgets, 650, totalWidgets)"></input></td>
...
function calculate(quantity, price, total){
	total = document.form.quantity.value * price;
	document.form.total.value = total;
}

Can anyone help me please?