Show/hide divs based on a $_POST value sent from another page

[filch]

I have a page at the following URL: http://www.streetkids.org/ways_to_donate/make_donation2.php which is a basic donation page. The two page sections you see on the page "One Time Gift" or "Monthly Subscription" are normally hidden via a document.write via a body onload. Generally, all of this functions well. But, I want to expand the use a bit here so I want to pass a $_POST value to this page from another page which hides or shows these two sections based on this passed value. So, if the value in "once", I want the div with the id="onetime" to be visible and the other div to be hidden. If the value is "monthly", then the opposite would happen. I have tried to use a combination of PHP and javascript in the following way:

I have a script in the head:

function showhidefield($button) {

	switch($button) {
		
		case 'once':
			//alert("One Time");
			document.getElementById('once').style.display = "block";
			document.getElementById('subscription').style.display = "none";
			break;
			
		case 'monthly':
			//alert("monthly");
			document.getElementById('once').style.display = "none";
			document.getElementById('subscription').style.display = "block";
			break;
			
		case 'matchaid':
		
			if(document.getElementById('reclaimTax').checked != true) {
				document.getElementById('matchaid').style.display ='none';
			} else {
				document.getElementById('matchaid').style.display = 'block';
			}
			/*document.getElementById('matchaid').style.display = "block";*/
			break;
			
		case 'other-one-time':
			if(document.getElementById('one_time_set').value == "other") {
				document.getElementById('otherOneTime').style.display = 'block';
			} else {
				document.getElementById('otherOneTime').style.display = 'none';
			}
			
			break;
			
		default:
			//alert("default"); 
			document.getElementById('once').style.display = "block";
			document.getElementById('subscription').style.display = "none";
			document.getElementById('matchaid').style.display = "none";
	}
}

I have tried variations on the following code to show/hide the divs based on the $_POST value:

<?php if($_POST['freq'] == "once") { ?>
	  <script type="text/javascript" language="JavaScript">
         showhidefield('once');
      </script>
	  <?php
  } elseif($_POST['freq'] == "monthly") { ?>
		<script type="text/javascript" language="JavaScript">
         showhidefield('monthly');
      </script> <?php
	}
?>

I have also tried to keep the js totaly inside of php by using:

echo "<script type='text/javascript' language='JavaScript'>
         showhidefield('once');
      </script>"

Now this is supposed to all happen as the page loads because we are just arrivng here from the sending page.

All help is appreciated.

Dave

[Airshow]

Filch,

There's no point using javascript unless it is necessary to dynamically show/hide fields on the page after it has been served, in response to user events. Anything that the user will never see (except be re-serving the page) can be excluded at the php level.

As far as I can see, most of your logic can be in php, which will cause any one of the "once", "subscription" or "otherOneTime" divs to be served.

The "matchaid" div appears to be an exception in that, I guess, it is applicable to any of the three payment frequencies, and needs to be shown/hidden in response to a "reclaimTax" checkbox. If I'm right, then the "matchaid" div needs to be served unconditionally with some javascript to effect the checkbox action. Let's assume that the initial conditions are checkbox-unchecked, div-hidden.

Javascript, inside <script></script> tags your document's head:

onload = function(){
	var reclaimTax = document.getElementById('reclaimTax');//checkbox
	var matchaid = document.getElementById('matchaid');//div
	if(reclaimTax & matchaid){
		reclaimTax.onclick = function(){
			matchaid.style.display = (this.checked) ? 'block' : 'none';
		};
	}
};

And, in the document's body, the php/html (in rough):

<?php
switch($_POST['freq']){
	case "monthly":
?>
<div id="subscription">
...
</div>
<?php
	break;
	case "other-one-time":
?>
<div id="otherOneTime">
...
</div>
<?php
	break;
	default:
?>
<div id="once">
...
</div>
<?php
}
?>

<input type="checkbox" id="reclaimTax" name="reclaimTax">
<div id="matchaid" style="display:none;">
...
</div>

Airshow

[filch]

This unfortunately, does not give the user the ability to change their mind as I need to have the ability to switch between monthly and one time. I already have logic to use to the radio buttons to show or hide the matching div for a one-time or monthly donation. What I need is logic that takes the POST value the first time we get to this page from a specific source page, in this case the donate page and if the value is once, have the once radio button selected and the once div visible. However, we also need to allow the person to change their mind and instead of a one-time donation, select the monthly radio box instead, hiding the once div and showing the subscription div instead. This logic is already in place. I am just trying the get the POST value logic to work with what I have now.

Thanks for your response. I appreciate it.

Dave

[urtrivedi]

I think you should not play with your javascript, instead you must use your post variable with html input element.

like

<input name="chooseDonation" type="radio" id="chooseDonation" onClick="showhidefield('once')" onmouseup="" value="onetime" <?php=($_POST=="once")?checked:'';?> />
-or- Monthly Donation:
<input name="chooseDonation" id="many" type="radio" value="monthly" onmouseup="" onclick="showhidefield('monthly')" <?php=($_POST=="monthly")?checked:'';?> />

[filch]

The onmouseup should not be in there should it?

[urtrivedi]

No I have just copied source from your website. Only change I have made is in RED.

[filch]

This does not look correct and is showing an error so I might not quite understand what you are saying. This is what I have:

<input name="chooseDonation" type="radio" id="chooseDonation" onClick="showhidefield('once')" onmouseup="<?php $donationType=""; $donationType = "onetime"; ?>" value="onetime" checked="<?php print $donationOnetimeStatus; ?>" <?php=($_POST['freq']=="once")?checked:'';?> />

I tried replacing the code in the checked attribute with your code but it again gives an error. I think it is the <?php= syntax. Can you elaborate a bit here.

[urtrivedi]

you simply copy my code to your page do not change anything in my code.

<input name="chooseDonation" type="radio" id="chooseDonation" onClick="showhidefield('once')" value="onetime" <?php echo ($_POST=="once")?'checked':'';?> />
-or- Monthly Donation:
<input name="chooseDonation" id="many" type="radio" value="monthly" onmouseup="" onclick="showhidefield('monthly')" <?php echo ($_POST=="monthly")?'checked':'';?> />

[filch]

OK ... what you just sent is not what showed up on my screen at least in your previous post. I will give this a try and see what happens.

Thanks

[urtrivedi]

following is the latest, I am posting again because I have modified my previous post.

<input name="chooseDonation" type="radio" id="chooseDonation" onClick="showhidefield('once')" value="onetime" <?php echo ($_POST['freq']=="once")?'checked':'';?> /> 
-or- Monthly Donation: 
<input name="chooseDonation" id="many" type="radio" value="monthly"  onclick="showhidefield('monthly')" <?php echo ($_POST['freq']=="monthly")?'checked':'';?> />

[filch]

OK so this sets the value both in code and visually but I still need to, based on this posted value, show the related dive, either the div called once or the div called subscription. I was hoping I could simply call the showhidefield() function based on the posted value.

[filch]

It would be great if I could call the javascript function based on the $_POST value. I mean, this only needs to happen as the page loads and not any time after that as the logic already built into the page will do that work after the page has loaded. With this, I am just trying to set the page state on the initial load.

Dave

[urtrivedi]

Ya it will set for intial load. You already have javascript in place for later changes by user.

[filch]

Yeah well this brings me back full circle to the original problem. I am passing a PHP $_POST value, from which I need to access a DOM element ( div ) and change its visibility. I can use PHP to get the value but then I cannot actually access the DOM with it. For that I need Javascript, which does not seem to be easy to call from PHP.

[urtrivedi]

at the end of the page write following code

<?php
echo "<script type='text/javascript' language='JavaScript'>
         showhidefield('{$_POST['freq']}');
      </script>";
?>

[Airshow]

Dave,

Looking through the source I have come to the conclusion that the easiest thing by far is to change the nature of showhidefield slightly such that it addresses all fields every time it is called, rather than being selective. This allows us to initialise the page by calling showhidefield() immediately after the page has loaded.

I also found jquery on the page so I'm going to give you a jquery solution, which simplifies the code considerably.

$(document).ready(function(){

	//showhidefields: addresses all relevant fields every time it is called
	function showhidefields() {
		if($('#chooseDonation').val() === 'onetime') {
			$('#once').show();
			$('#subscription').hide();
		}
		else {
			$('#once').hide();
			$('#subscription').show();
		}
		if($('#reclaimTax').attr('checked')){
			$('#matchaid').show();
		}
		else {
			$('#matchaid').hide();
		}
		if($('#one_time_set').val() === "other"){
			$('#otherOneTime').show();
		}
		else {
			$('#otherOneTime').hide();
		}
	}
	//attach showhidefields to various user events
	$("input[name='chooseDonation']").click(showhidefields);
	$("#one_time_set").change(showhidefields);
	$("#reclaimTax").click(showhidefields);
	//call showhidefields to initialise the page
	showhidefields();
});

Now purge all onxxx="showhidefield(...)" attributes from the HTML. They are no longer required as the event handlers are attached by javascript/jquery (as they should be in web pages we create these days).

With this code in place, the page will initialise in accordance with the checked/selected settings served in the HTML as Urtrivedi has explained.

Airshow