Question 69842 in Ajax Question posted in
You can find the official documentation here.

Sending two forms after button click and run php in background – Jquery ajax

I have created this site and integrated with payfast, it works well. but now i want to execute another php script on place order button which gets details into the db
here is my code quite long…. I no nothing about Ajax or javascript!! Please help

<form id="form1" action="payment.php" method="POST">
           some stuff...    
            </form>

<?php
$htmlForm = '<form action="https://'.$pfHost.'/eng/process" method="post" id="form2">';
  
$htmlForm .= '<input type="submit" id="submit" name="submit" class="btn btn-primary btn-lg btn-flat" value="PLace Order" onclick="submitForms()"></form>';
?>

            <?php
           echo" 
            ".$htmlForm."
          </div>";
                }
                else{
                  echo '...';      
                }
              ?> 
          
<script>
submitForms = function() {
   document.getElementById("form1").submit();
   document.getElementById("form2").submit();
}
</script>
 $(function() {
  $(".submit").click(function() {
      var uid = $("#uid").val();
        var prodtls = $("#prodtls").val();
        var fname = $("#fname").val();
        var amnt = $("#amnt").val();
        var mail = $("#mail").val();

  var dataString = 'uid='+ uid + '&prodtls=' + prodtls + '&fname' +fname + '&amnt' + amnt + '&mail' + mail;

if(time=='' || date=='')
{
  $('.success').fadeOut(200).hide();
  $('.error').fadeOut(200).show();
}
else
{
  $.ajax({
    type: "POST",
    url: "payment.php",
    data: dataString,
    success: function(){
     $('.success').fadeIn(200).show();
     $('.error').fadeOut(200).hide();
    }
  });
}
return false;
});
});

I tried the ajax i found but, it never worked. Check at the end of my code!
What i need is payment.php will execute in the background while it directs user to payfast

I want to submit only the first one via AJAX.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So this actually worked well using .serialize(). Thanks @ADyson for the headsup just had to tweak it a little bit, though i'm not experienced in js

    <script type="text/javascript">
    $(function(){
        $("#submit2").click(function(){
            var dataString = $("#form1").serialize();
            $.ajax({
                type: "POST",
                url: "payment.php",
                data: dataString,
                success: function(data)
                {
                    alert('Success!');
                    $("#form1")[0].reset();
                }
            });
        });
    });
</script>

  2. 0

    Your attempt doesn’t make much sense because it doesn’t appear to target the first form (which you say you want) and may not prevent the default postback behaviour.

    As I understand it, you want that whichever form the user clicks on to submit, the code will actually then submit the first form via AJAX, and then the second one via standard postback.

    This should do the job:

    HTML:

    <form id="form1" class="doubleForm" action="payment.php" method="post">
    <input type="submit" id="submit1" name="submit" class="btn btn-primary btn-lg btn-flat" value="Submit">
</form>

<form id="form2" class="doubleForm" action="https://example.com/eng/process" method="post">';
  <input type="submit" id="submit2" name="submit" class="btn btn-primary btn-lg btn-flat" value="Place Order">
</form>

    JavaScript:

    //handle submission of both forms
$(".doubleForm").submit(function(event) {
  event.preventDefault(); //stop standard postback

  var uid = $("#uid").val();
  var prodtls = $("#prodtls").val();
  var fname = $("#fname").val();
  var amnt = $("#amnt").val();
  var mail = $("#mail").val();
  var dataString = 'uid='+ uid + '&prodtls=' + prodtls + '&fname' +fname + '&amnt' + amnt + '&mail' + mail;

  if(time == '' || date == '')
  {
    $('.success').fadeOut(200).hide();
    $('.error').fadeOut(200).show();
  }
  else
  {
    //submit first form via AJAX
    var request = $.ajax({
      type: "POST",
      url: "payment.php",
      data: dataString
    });

    request.done(function(response) {
      $('.success').fadeIn(200).show();
      $('.error').fadeOut(200).hide();
    
      //now the first form is submitted and server has responded, we can trigger "normal" (non-AJAX) submission of second form
      document.querySelector("#form2").submit();
    });
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search