SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form totalling not working in IE

    Hi Guys,

    Further to a thread I started yesterday, I have managed to get my form working (totalling some user-selected options) and I thought all was good in the world. That it until I tested in in IE. It doesn't work. fine in Chrome, Firefox, Safari etc.

    Any ideas?

    <script type="text/javascript">
    function enableQuantity(prod,quantity)
    {
    if(document.getElementById(prod).checked)
    document.getElementById(quantity).disabled = false;

    else
    document.getElementById(quantity).disabled = true;
    calculateTotal();

    }

    function calculateTotal()
    {

    var products = new Array("Product10","Product20","Product30","Product40","Product50","Product60","Product70","Product80");
    var extraday = new Array("extra10","extra20","extra30","extra40","extra50","extra60","extra70","extra80");
    var i=0;
    var total = 0;
    for(i;i<products.length;i++)
    if(document.getElementById(products[i]).checked)
    {

    //alert(document.getElementById("QuantityProd"+(i+1)).value);
    total = total + ((parseInt(document.getElementById(products[i]).value) + (parseInt(document.getElementById('extra'+(i+1)).value) * (parseInt(Days.value) - 1))) * parseInt(document.getElementById('QuantityProd'+(i+1)).value));

    }
    document.getElementById('Total').value = total;
    }
    </script>
    HTML:

    HTML Code:
    <h2>{global:formtitle}</h2>
    {error}
    <!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
    <fieldset class="formHorizontal formContainer" id="rsform_5_page_0">
    	<div class="Section">{header:body}</div>
    
    	<div class="rsform-block rsform-block-date">
    		<div class="formControlLabel">{Date:caption}<strong class="formRequired">*</strong></div>
    		<div class="formControls">
    			<div class="formBody">{Date:body}<span class="formValidation">{Date:validation}</span></div>
    			<p class="formDescription">{Date:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-days">
    		<div class="formControlLabel">{Days:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Days:body}<span class="formValidation">{Days:validation}</span></div>
    		<p class="formDescription">{Days:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-hub">
    		<div class="formControlLabel">{Hub:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Hub:body}<span class="formValidation">{Hub:validation}</span></div>
    		<p class="formDescription">{Hub:description}</p>
    		</div>
    	</div>
    
    	
    	<div class="Section">{header2:body}</div>
    	
    	
    	
    	<div class="rsform-block rsform-block-product1">
    		<div class="bike_left">
    			<div class="check">{Product1:body}<span class="formValidation">{Product1:validation}</span></div>
    			<div class="chec_desc">{Product1:description}</div>
    		</div>
    		
    		<div class="bike_right">
    			<div class="formControlLabel">{QuantityProd1:caption}</div>
    			<div class="formControls">
    				<div class="formBody">{QuantityProd1:body}<span class="formValidation">{QuantityProd1:validation}</span></div>
    			</div>
    		</div>
    	</div>
    	
    	<div class="rsform-block rsform-block-product2">
    		<div class="bike_left">
    			<div class="check">{Product2:body}<span class="formValidation">{Product2:validation}</span></div>
    			<div class="chec_desc">{Product2:description}</div>
    		</div>
    		
    		<div class="bike_right">
    			<div class="formControlLabel">{QuantityProd2:caption}</div>
    			<div class="formControls">
    				<div class="formBody">{QuantityProd2:body}<span class="formValidation">{QuantityProd2:validation}</span></div>
    			</div>
    		</div>
    	</div>
    	
    	<div class="rsform-block rsform-block-product3">
    		<div class="bike_left">
    			<div class="check">{Product3:body}<span class="formValidation">{Product3:validation}</span></div>
    			<div class="chec_desc">{Product3:description}</div>
    		</div>
    		
    		<div class="bike_right">
    			<div class="formControlLabel">{QuantityProd3:caption}</div>
    			<div class="formControls">
    				<div class="formBody">{QuantityProd3:body}<span class="formValidation">{QuantityProd3:validation}</span></div>
    			</div>
    		</div>
    	</div>
    
    	<div class="rsform-block rsform-block-product4">
    		<div class="bike_left">
    			<div class="check">{Product4:body}<span class="formValidation">{Product4:validation}</span></div>
    			<div class="chec_desc">{Product4:description}</div>
    		</div>
    		
    		<div class="bike_right">
    			<div class="formControlLabel">{QuantityProd4:caption}</div>
    			<div class="formControls">
    				<div class="formBody">{QuantityProd4:body}<span class="formValidation">{QuantityProd4:validation}</span></div>
    			</div>
    		</div>
    	</div>
    
    	<div class="rsform-block rsform-block-product5">
    		<div class="bike_left">
    			<div class="check">{Product5:body}<span class="formValidation">{Product5:validation}</span></div>
    			<div class="chec_desc">{Product5:description}</div>
    		</div>
    		
    		<div class="bike_right">
    			<div class="formControlLabel">{QuantityProd5:caption}</div>
    			<div class="formControls">
    				<div class="formBody">{QuantityProd5:body}<span class="formValidation">{QuantityProd5:validation}</span></div>
    			</div>
    		</div>
    	</div>
    
    	<div class="rsform-block rsform-block-product6">
    		<div class="bike_left">
    			<div class="check">{Product6:body}<span class="formValidation">{Product6:validation}</span></div>
    			<div class="chec_desc">{Product6:description}</div>
    		</div>
    		
    		<div class="bike_right">
    			<div class="formControlLabel">{QuantityProd6:caption}</div>
    			<div class="formControls">
    				<div class="formBody">{QuantityProd6:body}<span class="formValidation">{QuantityProd6:validation}</span></div>
    			</div>
    		</div>
    	</div>
    
    	<div class="rsform-block rsform-block-product7">
    		<div class="bike_left">
    			<div class="check">{Product7:body}<span class="formValidation">{Product7:validation}</span></div>
    			<div class="chec_desc">{Product7:description}</div>
    		</div>
    		
    		<div class="bike_right">
    			<div class="formControlLabel">{QuantityProd7:caption}</div>
    			<div class="formControls">
    				<div class="formBody">{QuantityProd7:body}<span class="formValidation">{QuantityProd7:validation}</span></div>
    			</div>
    		</div>
    	</div>
    
    	<div class="rsform-block rsform-block-product8">
    		<div class="bike_left">
    			<div class="check">{Product8:body}<span class="formValidation">{Product8:validation}</span></div>
    			<div class="chec_desc">{Product8:description}</div>
    		</div>
    		
    		<div class="bike_right">
    			<div class="formControlLabel">{QuantityProd8:caption}</div>
    			<div class="formControls">
    				<div class="formBody">{QuantityProd8:body}<span class="formValidation">{QuantityProd8:validation}</span></div>
    			</div>
    		</div>
    	</div>	
    	
    	
    	<div class="rsform-block rsform-block-extra1">
    		<div class="formControlLabel">{extra1:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{extra1:body}<span class="formValidation">{extra1:validation}</span></div>
    		<p class="formDescription">{extra1:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-extra2">
    		<div class="formControlLabel">{extra2:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{extra2:body}<span class="formValidation">{extra2:validation}</span></div>
    		<p class="formDescription">{extra2:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-extra3">
    		<div class="formControlLabel">{extra3:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{extra3:body}<span class="formValidation">{extra3:validation}</span></div>
    		<p class="formDescription">{extra3:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-extra4">
    		<div class="formControlLabel">{extra4:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{extra4:body}<span class="formValidation">{extra4:validation}</span></div>
    		<p class="formDescription">{extra4:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-extra5">
    		<div class="formControlLabel">{extra5:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{extra5:body}<span class="formValidation">{extra5:validation}</span></div>
    		<p class="formDescription">{extra5:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-extra6">
    		<div class="formControlLabel">{extra6:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{extra6:body}<span class="formValidation">{extra6:validation}</span></div>
    		<p class="formDescription">{extra6:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-extra7">
    		<div class="formControlLabel">{extra7:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{extra7:body}<span class="formValidation">{extra7:validation}</span></div>
    		<p class="formDescription">{extra7:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-extra8">
    		<div class="formControlLabel">{extra8:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{extra8:body}<span class="formValidation">{extra8:validation}</span></div>
    		<p class="formDescription">{extra8:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-total">
    		<div class="formControlLabel">{Total:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Total:body}<span class="formValidation">{Total:validation}</span></div>
    		<p class="formDescription">{Total:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-continue">
    		<div class="formControlLabel">&nbsp;</div>
    		<div class="formControls">
    		<div class="formBody">{Continue:body}</div>
    		</div>
    	</div>
    	</fieldset>
    <!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
    <fieldset class="formHorizontal formContainer" id="rsform_5_page_1">
    	<div class="rsform-block rsform-block-bookingref">
    		<div class="formControlLabel">{BookingRef:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{BookingRef:body}<span class="formValidation">{BookingRef:validation}</span></div>
    		<p class="formDescription">{BookingRef:description}</p>
    		</div>
    	</div>
    	
    	
    		<div class="Section">{header3:body}</div>
    	
    	<div class="rsform-block rsform-block-fullname">
    		<div class="formControlLabel">{Fullname:caption}<strong class="formRequired">*</strong></div>
    		<div class="formControls">
    		<div class="formBody">{Fullname:body}<span class="formValidation">{Fullname:validation}</span></div>
    		<p class="formDescription">{Fullname:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-phone">
    		<div class="formControlLabel">{Phone:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Phone:body}<span class="formValidation">{Phone:validation}</span></div>
    		<p class="formDescription">{Phone:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-mobile">
    		<div class="formControlLabel">{Mobile:caption}<strong class="formRequired">*</strong></div>
    		<div class="formControls">
    		<div class="formBody">{Mobile:body}<span class="formValidation">{Mobile:validation}</span></div>
    		<p class="formDescription">{Mobile:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-email">
    		<div class="formControlLabel">{Email:caption}<strong class="formRequired">*</strong></div>
    		<div class="formControls">
    		<div class="formBody">{Email:body}<span class="formValidation">{Email:validation}</span></div>
    		<p class="formDescription">{Email:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-home-address">
    		<div class="formControlLabel">{Home address:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Home address:body}<span class="formValidation">{Home address:validation}</span></div>
    		<p class="formDescription">{Home address:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-visiting-address">
    		<div class="formControlLabel">{Visiting address:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Visiting address:body}<span class="formValidation">{Visiting address:validation}</span></div>
    		<p class="formDescription">{Visiting address:description}</p>
    		</div>
    	</div>
    
    	<div class="rsform-block rsform-block-submit">
    		<div class="formControlLabel">{Submit:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Submit:body}<span class="formValidation">{Submit:validation}</span></div>
    		<p class="formDescription">{Submit:description}</p>
    		</div>
    	</div>
    </fieldset>
    <script type="text/javascript">
    enableQuantity('Product10','QuantityProd1');
    enableQuantity('Product20','QuantityProd2');
    enableQuantity('Product30','QuantityProd3');
    enableQuantity('Product40','QuantityProd4');
    enableQuantity('Product50','QuantityProd5');
    enableQuantity('Product60','QuantityProd6');
    enableQuantity('Product70','QuantityProd7');
    enableQuantity('Product80','QuantityProd8');
    </script>

  2. #2
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change
    if(document.getElementById(prod).checked)
    to
    if(document.getElementById(prod).checked == true)

    And
    if(document.getElementById(products[i]).checked)
    to
    if(document.getElementById(products[i]).checked == true)

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't seem to make a difference unfortunately..?

    Code:
    <script type="text/javascript">
    function enableQuantity(prod,quantity)
    {
    	if(document.getElementById(prod).checked == true)
    		document.getElementById(quantity).disabled = false;
    
    	else
    		document.getElementById(quantity).disabled = true;
    calculateTotal();		
    	
    }
    
    function calculateTotal()
    {
    	
    var products = new Array("Product10","Product20","Product30","Product40","Product50","Product60","Product70","Product80");
    var extraday = new Array("extra10","extra20","extra30","extra40","extra50","extra60","extra70","extra80");
    	var i=0;
    	var total = 0;
    	for(i;i<products.length;i++)
    		if(document.getElementById(products[i]).checked == true)
    		{
    		
    			//alert(document.getElementById("QuantityProd"+(i+1)).value);
    			total  = total + ((parseInt(document.getElementById(products[i]).value) + (parseInt(document.getElementById('extra'+(i+1)).value) * (parseInt(Days.value) - 1))) * parseInt(document.getElementById('QuantityProd'+(i+1)).value));
    
    		}
    	document.getElementById('Total').value = total;
    }
    </script>

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved. Apparently IE didn't like that Days was undefined

    Code:
    total = total + ((parseInt(document.getElementById(products[i]).value) + (parseInt(document.getElementById('extra'+(i+1)).value) * (parseInt(document.getElementById('Days').value) - 1))) * parseInt(document.getElementById('QuantityProd'+(i+1)).value));


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •