How can i submit hidden values to php using AJAX

Question

i am trying to send some values from html form to php page. here in the form i have some values which are hidden.and one text field which its value has to be passed to php page.

index.php:

<?php
      if ($login->isUserLoggedIn() == true){    
      ?>
            <div class="panel panel-default">
            <div class="panel-heading"><h4>Invite friend</h4></div>
            <div class="panel-body">                        
            <form action="friend-invite.php" method="get">              
                <div class="col-md-4 col-lg-4">
                  <label class="control-label" for="friend">Enter email address</label>              
                  <input type="email" class="form-control" name="friendemail" id="friendemail" placeholder="sam@uncle.com" required><br>                                
                  <?php 
                  echo '<input type="hidden" name="invitename" value="'.$_SESSION["user_name"].'">' ;                 
                  echo '<input type="hidden" name="invite-url" value="'.$_SERVER['REQUEST_URI'].'">';
                  echo '<input type="hidden" class="invite-product" name="invite-product-name">';
                  ?>
                  <input type="submit" name="submit" value="Invite" class="btn btn-primary">
                </div>            
            </form>
            <div class="mail-message"></div>
            </div>
            </div>
      <?php 
      }else{
      }?>

friend-invite.php:

<?php
    include('_header.php');
    $user_email = $_GET['friendemail'];      
    $invited_by = $_GET['invitename'];  
    $invite_link = $_GET['invite-url'];    
    $product_name = $_GET['invite-product-name'];    
    if (isset($user_email, $invited_by, $invite_link, $product_name)){
        sendInvitation($user_email,$invited_by,$invite_link,$product_name);        
    } else {  
        echo "Are you trying to do something nasty??";
    }

    function sendInvitation($user_email,$invited_by,$invite_link,$product_name)
    {
        $mail = new PHPMailer;
        if (EMAIL_USE_SMTP) {
            $mail->IsSMTP();
            $mail->SMTPAuth = EMAIL_SMTP_AUTH;
            if (defined(EMAIL_SMTP_ENCRYPTION)) {
                $mail->SMTPSecure = EMAIL_SMTP_ENCRYPTION;
            }
            $mail->Host = EMAIL_SMTP_HOST;
            $mail->Username = EMAIL_SMTP_USERNAME;
            $mail->Password = EMAIL_SMTP_PASSWORD;
            $mail->Port = EMAIL_SMTP_PORT;
            $mail->IsHTML(true);
        } else {
            $mail->IsMail();
        }
        $mail->From = EMAIL_VERIFICATION_FROM;
        $mail->FromName = $invited_by;
        $mail->AddAddress($user_email);
        $mail->Subject = SHOP_INVITE;
        $link = $invite_link;
        $mail->Body = $invited_by." ".FRIEND_INVITE_PRODUCT."<a href='".$link."'>".$product_name."</a>";        
        if(!$mail->Send()) {
            $this->errors[] = MESSAGE_VERIFICATION_MAIL_NOT_SENT . $mail->ErrorInfo;
            return false;            
        } else {        
            return true;            
        }
    }
?>

AJAX function:

$(function () {
        $('form').on('submit', function (e) {
          e.preventDefault();
          $.ajax({
            type: 'get',
            url: 'invite-friend.php',
            data: $('form').serialize(),
            success: function () {
                $(".mail-message").html('<div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive action.</div>');                
            }
        });
    });
});

the friend-invite.php page is getting the values that has been passed to it and check if the values has been set, if it has been set then it will call the php function sendInvitation() with the parameters. now all these things are happening pretty good.but i want to do it through AJAX. how can i do that.

Answer 1

Dude you are simply making your code complex ... you are doing form submit + ajax submit .I think there you are going wrong. Just try these: Remove action="friend-invite.php" from your form tag and try . if this does not help than make your button input type button or use button tag. just try all these it should work. If all this does not work than give id and name to your form ,,and use to submit as:

$(function() {
            $("#form_id").on("submit", function(event) {

Try all these

Answer 2

Change your index.php as:

<?php
  if ($login->isUserLoggedIn() == true){    
  ?>
        <div class="panel panel-default">
        <div class="panel-heading"><h4>Invite friend</h4></div>
        <div class="panel-body">                        
        <form action="">              
            <div class="col-md-4 col-lg-4">
              <label class="control-label" for="friend">Enter email address</label>              
              <input type="email" class="form-control" name="friendemail" id="friendemail" placeholder="sam@uncle.com" required><br>                                
              <?php 
              echo '<input type="hidden" name="invitename" value="'.$_SESSION["user_name"].'">' ;                 
              echo '<input type="hidden" name="invite-url" value="'.$_SERVER['REQUEST_URI'].'">';
              echo '<input type="hidden" class="invite-product" name="invite-product-name">';
              ?>
              <input type="button" id="btn-submit" name="submit" value="Invite" class="btn btn-primary" />
            </div>            
        </form>
        <div class="mail-message"></div>
        </div>
        </div>
  <?php 
  }else{
  }?>

And change AJAX function as:

$(function () {
    $('#btn-submit').on('click', function (e) {
      e.preventDefault();
      $.ajax({
          type: 'get',
          url: 'invite-friend.php',
          data: $('form').serialize(),
          success: function () {
              $(".mail-message").html('<div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive action.</div>');
          }
       });
    });
});

We do not need a submit button in form if we using AJAX.

Answer 3

You forgot to give your hidden fields an id:

 echo '<input type="hidden" name="invitename" id="invitename" value="'.$_SESSION["user_name"].'">' ;

...