I am having trouble using jquery to submit a form. It was working before;/

Question

When a user clicks a link it uses jquery ajax to submit a form to go to paypal. It is not working for some reason. I appreciate any help.

The HTML link:

<a href="#" onClick="javascript:go_paypal();">Paypal</a>

The JS function:

function go_paypal() {

data = 'req_paypal=1';

$.blockUI({ message: '<h1> Going to Paypal...</h1>',css:{background:'#000'} });
    $.ajax({
      type: "POST",
      url: "index.php",
      data: data,
      success: function(data) { $("#paypal_form").html(data); $("#payPalForm").submit(); } ,
      error: function() {$.unblockUI(); alert('Unable to communicate to server.'); }
    }); 
    return false;
}

The PHP code:

if(isset($_POST['req_paypal']) && $_POST['req_paypal'] == 1 ) {


    $sql = 'INSERT INTO `transactions` (id,type,ip,time,ammount,status) VALUES (NULL,1,\''.$_SERVER['REMOTE_ADDR'].'\',\''.time().'\',\''.$global['paypal_prod_amount'].'\',0) ';
    echo $sql;
//      $sql2 = 'INSERT INTO `users` (id,email,password,referred_by,referrals) VALUES ('',)';

    mysql_query($sql);

    $id = mysql_insert_id();

    $html = '
    <form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="payPalForm">
<input type="hidden" name="item_number" value="One Year of Imgur Pro">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="business" value="'.$global['paypal_email'].'">
<input type="hidden" name="custom" value="'.base64_encode($id).'">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="return" value="'.$global['paypal_return'].'">
<input name="item_name" type="hidden" id="item_name" value="One Year of Imgur Pro" >
<input name="amount" type="hidden" id="amount" value="'.$global['paypal_prod_amount'].'" >
</form>
    ';

    echo $html;exit;
}

Answer 1

Looks like inside your success function, you are passing the global variable data to html(). Try naming your vars a bit more carefully.

Try this:

function go_paypal() {

var postData = 'req_paypal=1';

$.blockUI({ message: '<h1> Going to Paypal...</h1>',css:{background:'#000'} });
    $.ajax({
      type: "POST",
      url: "index.php",
      data: postData,
      success: function(data) { $("#paypal_form").html(data); $("#payPalForm").submit(); },
      error: function(e) {$.unblockUI(); alert('Unable to communicate to server.'); }
    }); 
    return false;
}

Answer 2

Unfortunately the problem here seems very vague since we don't know what really isn't working. My basic recommendation to find out what is not working is to turn on error reporting in PHP and then print copious amounts of output at each step of the process. Print variable values at each step to see if they are what you think they should be. Print messages to let you know when you enter a subroutine, etc. This will help narrow down where something goes wrong. Often, you will find that you just mistyped something.

I see the array $global, but it doesn't seem to be defined. Did you mean $GLOBALS? I would suspect that is the problem. If you turn your error reporting on in PHP while testing, you should see some complaints about an undefined variable. Also, while testing, double check all of your values and be sure to fuzz test. Some problems might not be apparent until too late to fix once it goes live.

Answer 3

Hi. First I would try to add a input submit to the form in PHP and also try that form in the code without fetching via ajax and in Firebug execute the submit code $("#payPalForm").submit(); to see if it works.

Answer 4

Um... did you try: <a href="javascript:go_paypal();">Paypal</a> I had the same problem and it was the a's onclick handler... So if this doesnt work dont give me -1 i was just trying to help based on my previous experience. =)

Answer 5

your data object must be a json object, not a string.

try this:

function go_paypal() {
    data = { req_paypal: 1 };

    $.blockUI({ message: '<h1> Going to Paypal...</h1>', css:{background:'#000'} });
        $.ajax({
          type: "POST",
          url: "index.php",
          data: data,
          success: function(data) { $("#paypal_form").html(data).submit(); } ,
          error: function() { $.unblockUI(); alert('Unable to communicate to server.'); }
        });
}

i would also suggest to change the a tag to

$("#go_paypal").click(function() { go_paypal(); }

or

<a href="javascript:go_paypal();">Paypal</a>

that way the page wont be scrolled to the top when the link is clicked