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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.