I'm trying to get a webpage to automatically eliminate certain options as dates pass. It involves a different number of payments as you get closer to a specific date... i.e., the total payment is due April 1, but you can select a 4/3/2 or 1 payment plan if you start by January 1st, but only a 3/2 or 1 payment plan if you start between Jan 2nd and Feb 1st. and so on until you get to a "pay in full" for the last month.
I've tried divs to hide the various sections, but can only get it to hide the first section, then after the second date, it hides all of them. Trying else if statements hides EVERYTHING from the very beginning! I've tried setting blocks {{ without any luck.
Here's the code so far:
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title></title>
<script src="http://ift.tt/Qr2aCe" type="text/javascript">
</script>
</head>
<body>
<h1>Test Links</h1>
<hr>
<h1>End...</h1>
<form action="http://ift.tt/rDmnwQ" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GMZ4M4NXH7EM6">
<input type="hidden" name="on0" value="plan">
<div id='linkOne' style="display:none">
<hr>
<table>
<tr><td><input type="radio" name="os0" value ="option_0" checked="checked">
</td>
<td><strong>4 Payments</strong></td></tr>
<tr><td><!--Fill cell--></td><td>Number of payments 4</td></tr>
<tr><td><!--Fill cell--></td><td>Start payments At checkout</td></tr>
<tr><td><!--Fill cell--></td><td><!--Fill cell--></td></tr>
<tr><th>Due*</th><th>Amount</th></tr>
<tr><td>At checkout</td><td>$59.66 USD</td></tr>
<tr><td>Every 1 month (x 3)</td><td>$59.66 USD</td></tr>
<tr><td colspan="2">Total $238.64 USD</td></tr>
</table>
</hr>
</div>
<div id='linkTwo' style="display:none">
<hr>
<table><tr><td>
<input type="radio" name="os0" value="option_1"></td>
<td><strong>3 Payments</strong></td></tr>
<tr><td><!--Fill cell></td><td>Number of payments 3</td></tr>
<tr><td><!--Fill cell--></td><td>Start payments At checkout</td></tr>
<tr><td><!--Fill cell--></td><td>
<table>
<tr><th>Due*</th><th>Amount</th></tr>
<tr><td>At checkout</td><td>$79.44 USD</td></tr>
<tr><td>Every 1 month (x 2)</td><td>$79.44 USD</td></tr>
<tr><td colspan="2">Total $238.32 USD</td></tr>
</table></td>
</hr>
</div>
<div id='linkThree' style="display:none">
<hr>
<table><tr><td>
<input type="radio" name="os0" value="option_2"></td>
<td><strong>2 Payments</strong></td></tr>
<tr><td><!--Fill cell--></td><td>Number of payments 2</td></tr>
<tr><td></td><!--Fill cell--><td>Start payments At checkout</td></tr>
<tr><td></td><td>
<table>
<tr><th>Due*</th><th>Amount</th></tr>
<tr><td>At checkout</td><td>$119.01 USD</td></tr>
<tr><td>Every 1 month (x 1)</td><td>$119.01 USD</td></tr>
<tr><td colspan="2">Total $238.02 USD</td></tr>
</table></td>
</hr>
</div>
<div id='defaultLink' style="display:none">
<hr>
<table><tr><td>
<input type="radio" name="os0" value="option_3"></td>
<td><strong>1 Payment</strong></td></tr>
<tr><td><!--Fill cell--></td><td>Number of payments 1</td></tr>
<tr><td><!--Fill cell--></td><td>Start payments At checkout</td></tr>
<tr><td><!--Fill cell--></td><td>
<table>
<tr><th>Due*</th><th>Amount</th></tr>
<tr><td>At checkout</td><td>$237.70 USD</td></tr>
<tr><td>Total $237.70 USD</td><td></td></tr>
</table></td>
</hr>
</div>
</td></tr>
<tr><td colspan="2"><em>* We calculate payments from the date of checkout.
</em></td></tr>
</table>
<table>
<tr><td><em>Sign up for</em></td></tr>
<tr><td><input type="image" src="http://ift.tt/1GBw4Sn
/btn_installment_plan_LG.gif"
name="submit" alt="PayPal - The safer, easier way to pay online!"></td></tr>
</table>
<img alt="" border="0" src="http://ift.tt/1JLRXfa
/pixel.gif" width="1" height="1"></form>
<script type="text/javascript">
window.setInterval(function(){
var countOfLinksThatAreValid = 0;
$('#countOfLinksThatAreValid').show();
var current = new Date();
var linkOneExpirationDate = new Date("April 27, 2015 16:17:00")
var linkTwoExpirationDate = new Date("April 27, 2015 16:18:00")
var linkThreeExpirationDate = new Date("April 27, 2015 16:18:30")
if (current.getTime() <= linkOneExpirationDate.getTime()) {
$('#linkOne').show();
countOfLinksThatAreValid = countOfLinksThatAreValid + 1; }
else { $('#linkOne').hide(); }
if (current.getTime() <= linkTwoExpirationDate.getTime()) {
$('#linkTwo').show();
countOfLinksThatAreValid = countOfLinksThatAreValid + 1; }
else { $('#linkTwo').hide(); }
if (current.getTime() <= linkThreeExpirationDate.getTime()) {
$('#linkThree').show();
countOfLinksThatAreValid = countOfLinksThatAreValid + 1; }
else { $('#linkThree').hide(); }
if (countOfLinksThatAreValid === 0) {
$('#defaultLink').show(); }
else { $('#defaultLink').hide(); }
$('#Time').show();
$('#Time').text(current);
});
</script>
</body>
</html>
The code between the div's is PayPay coding so it needs to stay the same.
Any ideas?
Aucun commentaire:
Enregistrer un commentaire