Looking for tips on Handling and hiding an HTML form - php

Question

I'd like to be able to submit a form, Handle it with Javascript and then PHP + make an API call and then present a thank you message or show the array of errors with the API.
So far I have been able to make that call successfully, with a thank you, but have been unable to hide the form afterwards.
http://www.wilsonkeenan.com/learningphp/DoDirectPayment.php
Any thoughts on what I'm doing wrong? Any guidance would be much appreciated.
<?php
if (isset($_POST['submitted'])){
session_start();
require_once 'CallerService.php';
/**
* Get required parameters from the web form for the request
*/
$paymentType =urlencode( $_POST['paymentType']);
$firstName =urlencode( $_POST['firstName']);
$lastName =urlencode( $_POST['lastName']);
$creditCardType =urlencode( $_POST['creditCardType']);
$creditCardNumber = urlencode($_POST['creditCardNumber']);
$expDateMonth =urlencode( $_POST['expDateMonth']);
// Month must be padded with leading zero
$padDateMonth = str_pad($expDateMonth, 2, '0', STR_PAD_LEFT);
$expDateYear =urlencode( $_POST['expDateYear']);
$cvv2Number = urlencode($_POST['cvv2Number']);
$address1 = urlencode($_POST['address1']);
$address2 = urlencode($_POST['address2']);
$city = urlencode($_POST['city']);
$state =urlencode( $_POST['state']);
$zip = urlencode($_POST['zip']);
$countrycode = urlencode($_POST['countrycode']);
$amount = urlencode($_POST['amount']);
//$currencyCode=urlencode($_POST['currency']);
$currencyCode="USD";
$paymentType=urlencode($_POST['paymentType']);
/* Construct the request string that will be sent to PayPal.
The variable $nvpstr contains all the variables and is a
name value pair string with & as a delimiter */
$nvpstr="&PAYMENTACTION=$paymentType&AMT=$amount&CREDITCARDTYPE=$creditCardType&ACCT=$creditCardNumber&EXPDATE=". $padDateMonth.$expDateYear."&CVV2=$cvv2Number&FIRSTNAME=$firstName&LASTNAME=$lastName&STREET=$address1&CITY=$city&STATE=$state".
"&ZIP=$zip&COUNTRYCODE=$countrycode&CURRENCYCODE=$currencyCode";
/* Make the API call to PayPal, using API signature.
The API response is stored in an associative array called $resArray */
$resArray=hash_call("doDirectPayment",$nvpstr);
/* Display the API response back to the browser.
If the response from PayPal was a success, display the response parameters'
If the response was an error, display the errors received using APIError.php.
*/
$ack = strtoupper($resArray["ACK"]);
if($ack!="SUCCESS") {
$_SESSION['reshash']=$resArray;
$location = "APIError.php";
header("Location: $location");
} elseif ($ack =="SUCCESS") {
echo '<h1>Thank you</h1>';
}
}
else {
// Display Form
}
?>
<form method="POST" id="donate" action="" name="DoDirectPaymentForm">
<!--Payment type is <?=$paymentType?><br> -->
<input type=hidden name=paymentType value="<?php echo $paymentType?>" >
<fieldset>
<div>
<label class="label">First Name:</label>
<input type=text size=36 maxlength=32 name=firstName class="required" value=John>
</div>
</div>
<input type="hidden" name="submitted" value="1">
<input type=Submit value=Submit>
</div>

Answer 1

your else bracket is closed before the form, try this:
else { /*Display Form*/ ?>
<form method="POST" id="donate" action="" name="DoDirectPaymentForm">
<!--Payment type is <?=$paymentType?><br> -->
<input type=hidden name=paymentType value="<?php echo $paymentType?>" >
<fieldset>
<div>
<label class="label">First Name:</label>
<input type=text size=36 maxlength=32 name=firstName class="required" value=John>
</div>
</div>
<input type="hidden" name="submitted" value="1">
<input type=Submit value=Submit>
</div>
<?php } ?>

Answer 2

Like FatherStorm said, jQuery is a much cleaner way to do this. Look into the ajax call. It's very easy to use.
But if you don't want to for some reason, you can use session vars to decide whether or not to display the form.
if($ack == 'SUCCESS')
$_SESSION['success'] = true;
else
{
//bunch of processing here for whatever your api returns
$_SESSION['success'] = false;
}
if($_SESSION['success']): ?>
Thank You
<?php else: ?>
<form>...</form>
<?php endif; ?>

Answer 3

I'm assuming you're using classic Javascript and not a library like jQuery.
so let's assume that your form is in a DIV with the ID of myForm so in classic javascript
document.getElementById('myForm').style.display='none';
in jQuery it would be $('#myForm').hide();
Consider jQuery.
now, to handle multiple possible results in the Javascript, you're going to want your AJAX page to echo a JSON encoded string, and not just the rraw result text so it won't be echo"Congratulations"; it would be more like
echo json_encode(array('result'=>'success','html'=>'Congratulations'));
and on the javascript side (in jQuery again cause it's faster)
//the data I need to submit to my page here, I'm assuming all form elements have ID's the same as their name.... it will submit like a form POST and return the result expecting it to be in JSON format.
$.getJSON("handleAjax.php", { paymentType: $('#paymentType').val(), name: $('#name').val(),[...more_fields_here...]}, function(data){
alert( data.html);
if(data.result=='success'){
$('#myForm').hide();
}
});
also, when you find yourself including file fragments like this, actually use includes... like
if(Condition){
include('/templates/paymentForm.phtml');
}else{
include('/templates/paymentThanks.phtml');
}