asked on

Javascript Form - Hidden Results don't display on Responsive website

I have a form that works fine on my site but doesn't want to work on the Bootstrap responsive version of the page.

It's an AJAX type form where the result text is hidden until the total is calculated ($('#result').css('display', 'block');). Is it possible to make the form work on the Bootstrap Responsive site?

HTML

        	  <form id="calc" name="calc">
  	<p>
      <input id="target" name="target" type="text">
      <label for="target">Target Price</label>
  	</p>

    <p><input name="calculateTotal" id="calculateTotal" type="button" value="Calculate Total" /></p>
    
    <div id="result" style="display:none;">
    <p><strong>Send this amount:</strong> <span id="actual"></span> <br />
    <strong><br/>To Receive</strong> <span id="credit"></span> <strong>Credit</strong>
    
    
    <strong><br/>After PayPal Fees:</strong> <span id="payPalfee"></span></p>
     </div>

Open in new window

Select JS

		$('#payPalfee').html(formatCurrency(calcFee));
			$('#payPalfeeT').html(formatCurrency(calcFeeT));
			$('#total').html(formatCurrency(totalCost));
			$('#addedTax').html(formatCurrency(totalTax));
			$('#actual').html(formatCurrency(actualCost));
			$('#actualT').html(formatCurrency(actualCostT));
			$('#result').css('display', 'block');

Open in new window

Scott Fell

What you want to do is in your css

#result{display:none;}

Open in new window

Then in your ajax response send the result to your result div, then use js to show the div.

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( data ) {
    $("#result").html(data);
    $("#result").show();
  });

Open in new window

Randy Downs

ASKER

I'll give it a try when I get back

Randy Downs

ASKER

The JavaScript I was using made some calculations based on the amount entered (#target) and then unhid the div($('#result').css('display', 'block');). Is it possible to do that?

Do I need to use AJAX?

// PayPal Calculator JavaScript Document


<!-- 
$(document).ready(function() {
	$('#calculateTotal').click(function() {
		
			var payPalPC = .029; // PayPal 2.9% = .029	
			var taxDP = .066;	// Data Processing tax = 6.6% .066
			var fee = .30; // PayPal transaction fee 

			var payPal = 1 + payPalPC;	
			var input_target = $('#target').val();
			// Calculate Tax
			var totalTax = (input_target*parseFloat(taxDP));
			
			
			// Estimate PayPal fee
			var totalCost = (input_target*parseFloat(payPal))
			+ fee ;
/*			var totalCostT = (input_target*parseFloat(payPal))
			+ fee + totalTax ;*/

			// Calculate PayPal fee for estimated amount
			var calcFee = (totalCost*parseFloat(payPalPC))
			+ fee ;
			
			// Calculate actual amount
			var actualCost = parseFloat(input_target)
			+ calcFee ;
			var actualCostT = parseFloat(actualCost*(1 + taxDP));
			
			var calcFeeT = (actualCostT*parseFloat(payPalPC))
			+ fee ;

			$('#credit').html(formatCurrency(input_target));


			$('#payPalfee').html(formatCurrency(calcFee));
			$('#payPalfeeT').html(formatCurrency(calcFeeT));
			$('#total').html(formatCurrency(totalCost));
			$('#addedTax').html(formatCurrency(totalTax));
			$('#actual').html(formatCurrency(actualCost));
			$('#actualT').html(formatCurrency(actualCostT));
			$('#result').css('display', 'block');
	});
});

function formatCurrency(strValue)
{
	strValue = strValue.toString().replace(/\$|\,/g,'');
	dblValue = parseFloat(strValue);
	blnSign = (dblValue == (dblValue = Math.abs(dblValue)));
	dblValue = Math.floor(dblValue*100+0.50000000001);
	intCents = dblValue%100;
	strCents = intCents.toString();
	dblValue = Math.floor(dblValue/100).toString();
	if(intCents<10)
		strCents = "0" + strCents;
	for (var i = 0; i < Math.floor((dblValue.length-(1+i))/3); i++)
		dblValue = dblValue.substring(0,dblValue.length-(4*i+3))+','+
		dblValue.substring(dblValue.length-(4*i+3));
	return (((blnSign)?'':'-') + '$' + dblValue + '.' + strCents);
}
-->

Open in new window

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Randy Downs

ASKER

That looks good Scott. I appreciate the quick response. I'll work on the math part in the morning.

Randy Downs

ASKER

This works fine. Thanks for your help.