Hi folks,
I have two divs in my form that contain slightly different fields. The user can view one vid at a time depending on the radio button it's checked (either business or individual). When I submit the form, all the fields in both divs are submitted and emailed at the same time. I need to submit the div that is visible and has the user
info only. How can I accomplish it?
javascript file:
//collects the data and erases the form
function submitForm() {
document.getElementById('apply').submit();
clearForm();
}
function clearForm(){
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
//create the drop down list
function addOption(selectbox,text,value ){
var optn = document.createElement("option");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
function addOption_list(selectbox){
var quan = new Array("1","2","3","4","5+");
for (var i=0; i < quan .length;++i){
addOption(document.apply.quantity, quan[i], quan[i]);
}
}
function addOption_list2(selectbox){
var quan = new Array("1","2","3","4","5","6","7","8","9","10+" );
for (var i=0; i < quan.length;++i){
addOption(document.apply.quantitys, quan[i], quan[i]);
}
}
///////////////////////////////////////////
function toggle(obj) {
var busDiv = document.getElementById('busi');
var indDiv = document.getElementById('ind');
if (obj.value == 'business'){
busDiv.style.display = '';
indDiv.style.display = 'none';
}
else{
busDiv.style.display = 'none';
indDiv.style.display = '';
}
}html hile:
<?xml version="1.0" encoding="UTF-8" ?>
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<link href="wireless.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="form.js"></script>
</head>
<body onload="addOption_list(); addOption_list2()" >
<div id="outer">
<img src="" alt="logo" usemap="#logomap" class="carrierLogo" />
<map id="logomap" name="logomap">
<area shape="rect" coords="0,0,399,120" href="#" alt="home"/>
</map>
<div id="inner">
<form id="apply" name="apply" action="mailto:info@donate.com" method="post" enctype="text/plain">
<fieldset>
<legend>Doner Type</legend>
<label for="donerType">
<input type="radio" id="businessDoner" name="donerType" value="business" checked="checked" onclick="toggle(this)" />
Business
</label>
<label for="donerType">
<input type="radio" id="individualDoner" name="donerType" value="individual" onclick="toggle(this)" />
Individual
</label>
</fieldset>
<fieldset id="contact" >
<legend>Doner Information</legend>
<div id="busi" name="busi">
<label class="blockLabel" for="firstName">
Company Name<span>*</span>
<input type="text" id="firstName" name="firstName" />
</label>
<label class="blockLabel" for="lastName">
Contact Name<span>*</span>
<input type="text" id="lastName" name="lastName" />
</label>
<label class="blockLabel" for="phone">
Phone<span>*</span>
<input type="text" id="phone" name="phone" />
</label>
<label class="blockLabel" for="email">
Email<span>*</span>
<input type="text" id="email" name="email" />
</label>
<label class="blockLabel" for="street">
Street Address<span>*</span>
<input type="text" id="street" name="street" />
</label>
<label class="indentLabel" for="city">
City<span>*</span>
<input type="text" id="city" name="city" />
</label>
<label for="state">
State<span>*</span>
<input type="text" id="state" name="state" maxlength="2" />
</label>
<label for="zip">
ZIP<span>*</span>
<input type="text" id="zip" name="zip" maxlength="10" />
</label><br/><br/>
<label for="quantitys">
Computer Quantity<span>*</span>
<select id="quantitys" name="quantitys" >
<option value=""></option>
</select>
</label>
</div>
<div id="ind" name="ind" style="display:none">
<label class="blockLabel" for="firstName">
First Name<span>*</span>
<input type="text" id="firstName" name="firstName" />
</label>
<label class="blockLabel" for="lastName">
Last Name<span>*</span>
<input type="text" id="lastName" name="lastName" />
</label>
<label class="blockLabel" for="phone">
Phone<span>*</span>
<input type="text" id="phone" name="phone" />
</label>
<label class="blockLabel" for="email">
Email<span>*</span>
<input type="text" id="email" name="email" />
</label>
<label class="blockLabel" for="street">
Street Address<span>*</span>
<input type="text" id="street" name="street" />
</label>
<label class="indentLabel" for="city">
City<span>*</span>
<input type="text" id="city" name="city" />
</label>
<label for="state">
State<span>*</span>
<input type="text" id="state" name="state" maxlength="2" />
</label>
<label for="zip">
ZIP<span>*</span>
<input type="text" id="zip" name="zip" maxlength="10" />
</label><br/><br/>
<label for="quantity">
Computer Quantity<span>*</span>
<select id="quantity" name="quantity" >
<option value=""></option>
</select>
</label>
</div>
</fieldset>
<div>
<label for="submitBtn">Submit <input type="button" value="Submit" onclick="submitForm();" id="submitBtn"/></label>
<label for="cancelBtn">Cancel <input type="reset" value="Cancel" id="cancelBtn"/></label>
</div>
</form>
</div>
</div>
</body>
</html>