How to use JS file to grab HTML Form Element?

[damicomj]

I am trying to pass an HTML Form variable to a .JS file. The .JS file then passes the variable to an ASP page, which works properly. The part that doesn't work properly is trying to pass it to the JS file.

Below is my code for the HTML Form. "submitestimate " is the form name and the variable that needs to get passed it "Region"

			<form name="submitestimate" margin="0" padding="0"></form>
			<input type="button" style="width:120" class="simpleCart_checkout" value="Submit Estimate"/>
			<select name="Region" id="Region" style="width:120">
				<option value="RegionSel">Select Region...</option>
    			<option value="Northeast">Northeast</option>
    			<option value="Southeast">Southeast</option>
    			<option value="Central">Central</option>
    			<option value="West">West</option>
			</select>
			</form>

The form is submitted when the user clicks the submit button, with a class=simpleCar t_checkout. This class is located in the JS file.

	me.initializeView = function() {
		var me = this;me.addEventToArray( getElementsByClassName('simpleCart_checkout') , simpleCart.checkout , "click");
};

	me.checkout = function() {
		if( simpleCart.quantity === 0 ){
			error("Cart is empty");
			return;
		}
		switch( simpleCart.checkoutTo ){
			case PayPal:
				simpleCart.paypalCheckout();
				break;
			case GoogleCheckout:
				simpleCart.googleCheckout();
				break;
			case Email:
				simpleCart.emailCheckout();
				break;
			default:
				simpleCart.customCheckout();
				break;
		}
	};

We will be using the email checkout. The second line is supposed to grab the Region variable from the HTML form, but is not working:

    me.emailCheckout = function() {   
    var regionemail = document.getElementById('Region');
    
    itemsString = "<Table cellspacing='10' border='0'><TR><TD><H2>Furniture Estimate</H2></TD><TR><TR><TD> </TD></TR><TR><TD><b>Item</b></TD><TD><b>Purchase Agreement</b></TD><TD><b>Color</b></TD><TD><b>Price</b></TD><TD><b>Quantity</b></TD><TD><b>Subtotal</b></TD></TR><br>"; 
	for( var current in me.items ){  
    	var item = me.items[current]; 
    	/*itemsString = itemsString + item.name + "	" + item.quantity + "	 $" + item.price + "<br>"; */
    	itemsString = itemsString + "<TR><TD>" + item.name + "</TD><TD>" + item.size + "</TD><TD>" + item.color + "</TD><TD>$" + item.price + "</TD><TD>" + item.quantity + "</TD><TD>$" + item.price * item.quantity + "</TD></TR><br>";
		}    
		
		itemsString = itemsString + "</TABLE>";
 
		var form = document.createElement("form"); 
		form.style.display = "none"; 
		form.method = "POST"; 
		form.action = "submit.asp"; 
		form.acceptCharset = "utf-8"; 
		form.appendChild(me.createHiddenElement("jcitems", itemsString)); 
		form.appendChild(me.createHiddenElement("jctotal", me.total)); 
		form.appendChild(me.createHiddenElement("regionemail", regionemail));
		document.body.appendChild(form); 
		form.submit(); 
		document.body.removeChild(form); 
	};

[acoder]

Do you want the Region element or the value?

Do you get an error message?

[damicomj]

Thank you for your reply. I want to grab the value of the select list. There is no error message. If I put this code below the variable delcaration:

alert(regionema il);

it returns "[object]"

Let me know if you need more information.

[acoder]

If you want the value, change line 2 to:

var regionemail = document.getElementById('Region').value;

[damicomj]

Fancy! Thank you.