Unable send email with ajax php jquery

Question

I tried many times and visited many forums but couldn't find the answer. Please do not post it is similar like some other post. Just try to help me to fix this.

HTML Form:

<form action="" method="post" id="bookingForm">
<div id="radiobutton">
<input type="radio" name="trip" id="oneway" value="oneway" checked/>&nbsp;Oneway
<input type="radio" name="trip" id="return" value="return"/>&nbsp;Return
</div>
<br/>

From:<input id="boarding" type="text" maxlength="40" class="user_input" size="18" name="boarding" value="Hyderabad"/>
To:<input id="landing" type="text" maxlength="40" class="user_input" size="18" name="landing"/>
<br/><br/><br/>

Onward:<input id="datepick"  name="onward" class="user_input" size="15" />

Return: <input id="datepick2"  name="return" class="user_input" size="15" />
<br/><br/><br/>
Your Name:<input id="pax_name" type="text" name="pax_name"  class="user_input" size="25" maxlength="50"/>
<br/><br/>
Contact number:<input id="pax_contact" type="text" maxlength="14" name="pax_contact" class="user_input" size="25"/>
<br/><br/>
Email:<input id="pax_email" name="pax_email" class="user_input" size="25"/>
<br/><br/>
<center>

<input id="submit" type="button" value="Request" />

process.php for sending email:

<?php

  $trip=$_POST['trip'];
  $boarding=$_POST['boarding'];
  $landing=$_POST['landing'];
  $onward=$_POST['onward'];
  $return=$_POST['return'];
  $pax_name=$_POST['pax_name'];
  $pax_contact=$_POST['pax_contact'];
  $pax_email=$_POST['pax_email'];

        $to='[email protected],[email protected]';
        $subject='Booking Form Query';
        $body=
              'Name: '.$pax_name."\n".
              'Contact Number: '.$pax_contact."\n".
              'Trip: '.$trip."\n".
              'From: '.$boarding."\n".
              'To: '.$landing."\n".
              'Onward Date: '.$onward."\n".
              'Return Date: '.$return."\n";
        $headers='From: '.$pax_name.'<'.$pax_email.'>';
        mail($to,$subject, $body, $headers)

?>

Jquery code:

$(document).ready(function(){
$('#submit').click(function(){
          var boarding=$('#boarding').val();
          var landing=$('#landing').val();
          var datepick=$('#datepick').val();
          var datepick2=$('#datepick2').val();
          var pax_name=$('#pax_name').val();
          var pax_contact=$('#pax_contact').val();
          var pax_email=$('#pax_email').val();


    if($('#landing').val().length<3 || $('#boarding').val().length<3 || $('#datepick').val().length<3 || $('#pax_name').val().length<3 || $('#pax_contact').val().length<8 || $('#pax_email').val().length<3){

        $('#bookfail').attr('title','Sending Failed!').text('Please Enter valid information. All fields are required').dialog({buttons:{'Ok':function(){
            $(this).dialog('close');
            }},closeOnEscape:true,draggable:false,resizable:false,modal:true});

    }else{
                var VarData='boarding='+boarding+'&landing='+landing+'&datepick='+datepick+'&datepick2='+datepick2+'&pax_name='+pax_name+'&pax_contact='+pax_contact+'&pax_email='+pax_email;
        $.ajax({
           type:'POST',
           url:'process.php',
                   data:VarData,
           success:function(){
           $('#booksuccess').attr('title','Request sent successfully').text('Your request has been sent. We will be in touch soon').dialog({buttons:{'Ok':function(){   $(this).dialog('close');
            }},closeOnEscape:true,draggable:false,resizable:false,modal:true});
           }
           error:function(){
                alert('Oops request sending failed. Please try again');
           }
        });
        }
    });
});

nothing happens.. when i click the submit button. No dialog box/ no email sent. — user1897595
– user1897595, Commented Feb 4, 2013 at 9:43
First of all you should check if the ajax request is actually made and there are no javascript errors on page. Try Chrome Developer Tools. — Sergejs Rižovs
– Sergejs Rižovs, Commented Feb 4, 2013 at 9:44
@user1897595 Try pressing F12 in your web browser and looking at the "Console" tab, it should show any JavaScript errors. And the "Network" tab should show all AJAX calls. — EM-Creations
– EM-Creations, Commented Feb 4, 2013 at 9:44
It is not related to your error, but i would use $.post("process.php", $("#yourForm").serialize()); instead (see api.jquery.com/jQuery.post). Writing less code also minimizes the chances for errors. — flec
– flec, Commented Feb 4, 2013 at 9:49

jantimon · Accepted Answer · 2013-02-04 09:55:06Z

1

You are missing a comma after your success callback:

success:function(){
   ...
}
error:function(){
   ...
}

has to be

success:function(){
   ...
},// <--
error:function(){
   ...
}

answered Feb 4, 2013 at 9:55

jantimon

38.5k23 gold badges127 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1897595 Over a year ago

OMG.. what could be the problem. it still the same.

AdityaParab · Accepted Answer · 2013-02-04 10:01:38Z

0

You are posting your values in traditional query string format... Put your values in javascript object and send this object to server by stringifying it...

There are two ways to do this

1] Modify your javascript file a bit like following

Put all your values in an javascript object... Like this

var VarData= {
    "boarding" : boarding,
    "landing" : landing,
    "datepick": datepick,
    "datepick2": datepick2,
    "pax_name": pax_name,
    "pax_contact": pax_contact,
    "pax_email": pax_email
}

and change your data:varData line in your $.ajax() call to

data: JSON.stringify(varData)

After doing this your PHP code will be able to catch the values in $_POST array...

Right now you are building query string and there are no indexes in your $_POST array like boarding and all..

2nd way... Keep your Javascript as it is and modify your PHP code. Like following

catch your data sent from the javascript code. and use explode function to break the string by &

$temp = explode("&",$_POST['data']);

$temp will be an array, so you need to traverse through it with loop. And then break each element in $temp for = sign

like

$t=explode("=",$temp[$i]);

$t will have the value you are looking for and you can use it to send the mails.

edited Feb 4, 2013 at 10:01

answered Feb 4, 2013 at 9:46

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

2 Comments

AdityaParab Over a year ago

Which browser are you using? Check path to your process.php file.. Make sure it is correct. Also are you getting any error on the console?

user1897595 Over a year ago

yes it is correct, it is in the root folder. console: Uncaught TypeError: Cannot read property 'offsetParent' of null datepickr.js:290 buildCalendar datepickr.js:290 (anonymous function) datepickr.js:358 (anonymous function)

Collectives™ on Stack Overflow

Unable send email with ajax php jquery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related