asked on

JavaScript - when hiding divs php code is still there?

Hi,
I have some divs which are hidden for specific payment options.
My problem is the php code is still there and performs form validation when not required?
How can I update the page so that the PHP code for the hidden div is not executed?

If hope that makes sense?

Thanks for you feedback.

<?php session_start(); 

$_SESSION['payment_option'] = "cheque";


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ScriptLibrary/jquery-1.4.3.min.js"></script>

</head>


<body>


<script language="javascript" type="text/javascript">         
		window.onload = function() {
			show_payment_option();
		}

function show_payment_option(which_option){ 
		if (typeof which_option == "undefined") {
    	var which_option = "<?php echo $_SESSION['payment_option'] ?>";
  		}
		 if (which_option == 'cheque'){
		   document.getElementById('cheque_option_details').style.display = 'block'; 
		   document.getElementById('direct_option_details').style.display = 'none';
		   document.getElementById('credit_option_details').style.display = 'none'; 
		}else if (which_option == 'direct'){
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'block'; 
		   document.getElementById('credit_option_details').style.display = 'none'; 
		}else if (which_option == 'credit'){
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('credit_option_details').style.display = 'block'; 
		} else {
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('credit_option_details').style.display = 'none'; 
		}

} 

</script> 
<select name="order_details[payment_option]" class="dropdownmenu" style="width:280px" id="payment_option" onChange="show_payment_option(payment_option.value)">
<option value = "">Select Payment Option</option>
<option value="cheque" <?php if (!(strcmp("cheque", $_SESSION['payment_option']))) echo "SELECTED"; ?>>Cheque - must clear before goods dispatched</option>
<option value="direct" <?php if (!(strcmp("direct", $_SESSION['payment_option']))) echo "SELECTED"; ?>>Direct Deposit into our Bank Account </option>
</select>


<div id="direct_option_details">
<div class="inputname" style="height:140px"><strong>Our Direct Deposit Details</strong>
</div>
<div class="inputfield" style="height:140px">
<strong>Bank: </strong>bank_name</br>
<strong>Account Name: </strong>account_name</br>
<strong>BSB: </strong>bsb</br>
<strong>Account Number: </strong>account_number</br>
</div>
<div class="inputfield_fullwidth" style="height:100px">
You have elected to pay via direct deposit into our account, our details are shown above.Please ensure you specify your <strong>Name</strong> and <strong>Order ID</strong> when making the transfer. Once we confirm your payment has been successful we will arrange for your order to be dispatched. 
</div>
</div><!-- end of deposit_option_details div  !-->

<div  id="cheque_option_details">
<div class="inputname" style="height:140px">
<strong>Details for Cheque Payments</strong>
</div>
<div class="inputfield" style="height:140px">
<strong>business_name</br></strong>
postal_address1</br>
postal_address2</br>
postal_address3</br>
postal_address4</br>
</div>
<div class="inputfield_fullwidth" style="height:100px">
You have elected to pay by cheque, please make cheque payable to business_name and mail to our postal address below.</br>
Once we confirm you payment has been successful we will arrange for your order to be dispatched. <br />
</div>
</div><!-- end of cheque_option_details div  !-->

<div id="credit_option_details">  

<div class="inputname"><vllabel for="order_details[eway_CardHoldersName]" errtext="Name Required" validators="CardHoldersNameReq" errclass="vdcopyerr">Name On Card</vllabel></div><div class="inputfield">
<input name="order_details[eway_CardHoldersName]" type="text" id="eway_CardHoldersName" value="<?php echo $_SESSION['eway_CardHoldersName']; ?>" size="35"/>
<vlvalidator name="CardHoldersNameReq" type="required" control="order_details[eway_CardHoldersName]"  errmsg="Please Enter Name on Credit Card">
</div>

</div>


</body>
</html>

Open in new window

OmniUnlimited

Why don't you have PHP check for the value of $_SESSION['payment_option'] and process accordingly?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

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

Start Free Trial

Kiran Sonawane

Try thios

<?php session_start(); 

$_SESSION['payment_option'] = "cheque";


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">         
   $(document).ready(function(){
     var which_option = "<?php echo $_SESSION['payment_option'] ?>";
     show_payment_option(which_option);
     $('#payment_option').change(function(){
       show_payment_option($(this).val());
     });
     
     $('#btn').click(function(){
       if($('#eway_CardHoldersName').val() =="")
       alert('Name should not blank');
     });
   });
   

function show_payment_option(which_option){ 
    $('#cheque_option_details').hide();
    $('#direct_option_details').hide();
    $('#credit_option_details').hide();
   
     
     if (which_option == 'cheque'){
       $('#cheque_option_details').show();
    }else if (which_option == 'direct'){
       $('#direct_option_details').show();
    }else if (which_option == 'credit'){
       $('#credit_option_details').show();
    } 

} 

</script> 
</head>
<body>
<select name="order_details[payment_option]" class="dropdownmenu" style="width:280px" id="payment_option">
<option value = "">Select Payment Option</option>
<option value="cheque" <?php if (!(strcmp("cheque", $_SESSION['payment_option']))) echo "SELECTED"; ?>>Cheque - must clear before goods dispatched</option>
<option value="direct" <?php if (!(strcmp("direct", $_SESSION['payment_option']))) echo "SELECTED"; ?>>Direct Deposit into our Bank Account </option>
<option value="credit">Credit</option>
</select>
<div id="direct_option_details">
<div class="inputname" style="height:140px"><strong>Our Direct Deposit Details</strong>
</div>
<div class="inputfield" style="height:140px">
<strong>Bank: </strong>bank_name</br>
<strong>Account Name: </strong>account_name</br>
<strong>BSB: </strong>bsb</br>
<strong>Account Number: </strong>account_number</br>
</div>
<div class="inputfield_fullwidth" style="height:100px">
You have elected to pay via direct deposit into our account, our details are shown above.Please ensure you specify your <strong>Name</strong> and <strong>Order ID</strong> when making the transfer. Once we confirm your payment has been successful we will arrange for your order to be dispatched. 
</div>
</div><!-- end of deposit_option_details div  !-->

<div  id="cheque_option_details">
<div class="inputname" style="height:140px">
<strong>Details for Cheque Payments</strong>
</div>
<div class="inputfield" style="height:140px">
<strong>business_name</br></strong>
postal_address1</br>
postal_address2</br>
postal_address3</br>
postal_address4</br>
</div>
<div class="inputfield_fullwidth" style="height:100px">
You have elected to pay by cheque, please make cheque payable to business_name and mail to our postal address below.</br>
Once we confirm you payment has been successful we will arrange for your order to be dispatched. <br />
</div>
</div><!-- end of cheque_option_details div  !-->

<div id="credit_option_details">  

<div class="inputname"><vllabel for="order_details[eway_CardHoldersName]" errtext="Name Required" validators="CardHoldersNameReq" errclass="vdcopyerr">Name On Card</vllabel></div><div class="inputfield">
<input name="order_details[eway_CardHoldersName]" type="text" id="eway_CardHoldersName" value="<?php echo $_SESSION['eway_CardHoldersName']; ?>" size="35"/>

</div>

</div>
<vlvalidator name="CardHoldersNameReq" type="required"  control="order_details[eway_CardHoldersName]"  errmsg="Please Enter Name on Credit Card">
</body>
</html>

Open in new window

sabecs

ASKER

Thanks OmniUnlimited for your comments,
$_SESSION['payment_option'] is currently set from the next page, it’s just there in case a user goes back.
If I can set it from my function show_payment_option(which_option) then that would probably work but how would I do that, can it be achieved with jquery or Ajax without refreshing the whole page?

Thanks leakim971, I will try your suggestion also.

SOLUTION

OmniUnlimited

membership

This solution is only available to members.

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

Start Free Trial

OmniUnlimited

You know, to be honest, I've never set a session variable through AJAX.

You may need process.php to look like this:

<?php
   session_start();
   $_SESSION['payment_option'] = $_POST['opt'];
?>

Open in new window

Sandeep Kothari

you cannot stop php by hiding the element ..... server side processing cannot be stopped by client side conditons ... clear....
so the only thing to stop processing of php is by using php condition .. if the concept is clear I m sure you will comeout with the proper condition in php to make the code work as you need it !...

sabecs

ASKER

Thank you to everyone for your help, I think I will have to update $_SESSION['payment_option'] via jQuery Ajax but I don't know how to get it to work.

I tried OmniUnlimited suggestion but could not get it to work.
      $.ajax({
            cache: false,
            url: 'http://mysite.com/process.php',
            type: "POST",
            data: ({ opt : which_option })
     });

<?php //process.php
session_start();
$_SESSION['payment_option'] = $_POST['opt'];
?>

How can I test it?

SOLUTION

OmniUnlimited

membership

This solution is only available to members.

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

Start Free Trial

SOLUTION

OmniUnlimited

membership

This solution is only available to members.

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

Start Free Trial

sabecs

ASKER

Thanks for your help, I still could not get it working, I am now looking at either using a jquery form validation or seeing if I can remove some of the vdaemon tags with jquery, I will raise another question.

Thanks again...