javascript - js not passing form data for php mail -

i'm beginner attempting create html webpage. i'm using free online template , trying create contact page. contact calls php script send email of captured fields. can work when send email pure php no javascript or ajax. when try use javascript ajax code, contents of web form not being passed. 2 near identical issues have been raised here finding javascript complicated myself understand beginner. slight differences in js has resulted in hours of trying resolve without success.

js deleting submitted form data

php form post data not being received due jquery

the html code is

<div class="col-md-4 col-sm-12"> <div class="contact-form bottom">     <h2>send message</h2>     <form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">         <div class="form-group">             <input type="text" name="name" class="form-control" required="required" placeholder="name">         </div>         <div class="form-group">             <input type="email" name="email" class="form-control" required="required" placeholder="email id">         </div>         <div class="form-group">             <textarea name="message" id="message" required class="form-control" rows="8" placeholder="your text here"></textarea>         </div>                                 <div class="form-group">             <input type="submit" name="submit" class="btn btn-submit" value="submit">         </div>     </form> </div> 

the php script called sendemail.php

<?php header('content-type: application/json'); $status = array( 'type'=>'success', 'message'=>'thank contact us. possible  contact ' );   $name = @trim(stripslashes($_post['name']));  $email = @trim(stripslashes($_post['email']));  $subject = @trim(stripslashes($_post['subject']));  $message = @trim(stripslashes($_post['message']));   $email_from = $email; $email_to = 'email@email.com';  $body = 'name: ' . $name . "\n\n" . 'email: ' . $email . "\n\n" . 'subject: ' . $subject . "\n\n" . 'message: ' . $message; $success = @mail($email_to, $subject, $body, 'from: <'.$email_from.'>');  echo json_encode($status);  die; 

the javascript follows

// contact form var form = $('#main-contact-form'); form.submit(function(event){     event.preventdefault();     var form_status = $('<div class="form_status"></div>');     $.ajax({         url: $.post(this).attr('action'),           beforesend: function(){             form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> email sending...</p>').fadein() );         }     }).done(function(data){         form_status.html('<p class="text-success">thank contacting us. reply possible.</p>').delay(3000).fadeout();     }); }); 

there 2 issues, first being form data doesnt pass when using javascript code. second displays message twice , sends 2 emails. think second issue related php script calling function again.

help & guidance appreciated, beginner attempting small challenge.

the mail form appears deliberately disabled. took me while fix it. code below make work. hope helps.

    // contact form var form = $('#main-contact-form'); form.submit(function(event){     event.preventdefault();     var form_status = $('<div class="form_status"></div>');     $.ajax({         type     : "post",         cache    : false,         url      : $(this).attr('action'),         data     : $(this).serialize(),         beforesend: function(){             form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> email sending...</p>').fadein() );         }     }).done(function(data){         form_status.html('<p class="text-success">thank contacting us. reply possible.</p>').delay(3000).fadeout();     }); });