0

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>
		&nbsp;&nbsp;&nbsp;&nbsp;<label for="cancelBtn">Cancel <input type="reset" value="Cancel"  id="cancelBtn"/></label>
	</div>
	
	</form>
	
</div>
</div>
</body>
</html>
2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by sudeepjd
0

For this you would need to create 2 different forms to submit the data you need to. Create a button outside the forms and submit the required one using JavaScript. That's the concept behind it. If you cant figure out the code to execute it, please do let us know.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.