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

LVL 30
Randy DownsOWNERAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

0
Randy DownsOWNERAuthor Commented:
I'll give it a try when I get back
0
Randy DownsOWNERAuthor Commented:
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

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
.show() is all you need.  Here is a simple demo http://jsbin.com/zahigi/1/edit?html,output
Note that you can use .show() on a separate line or in the same line as when you copy the result to the ID result. Just put it at the end.
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    $(function(){
  $("#calculate").click(function(){
    value=$("#amount").val();
    calc = doTheMath(value);
    $("#result").text(calc).show();
    //$("#result").show();
  });
});

function doTheMath(x){
  
  return x*10;
  
}
  </script>
  <meta charset="utf-8">
  <title>padas</title>
  <style>
  #result{display:none;}
  </style>
</head>
<body>
<input id="amount" value="3">
  <button id="calculate">Caclulate</button>
  <div id="result">result goes here</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Randy DownsOWNERAuthor Commented:
That looks good Scott. I appreciate the quick response. I'll work on the math part in the morning.
0
Randy DownsOWNERAuthor Commented:
This works fine. Thanks for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.