Using Ajax to submit form Jquery

Question

I am trying to create a form that is using AJax to submit the form instead of doing a page reload, but every code i've tried does not send anything to the email i specified.

Here is my code:

compform.php

<?php 
 if(isset($_POST['submit'])){
 $to = "[email protected]";// this is your Email address
 $from = $_POST['mail']; // this is the sender's Email address
 $name = $_POST['name'];
 $mail = $_POST['mail'];

 $subject = "Quadflow Content Writing Service Request";

 $message = 'Hi Uriel, you have a new content writing request email from Quadflow App';
 $message .= $name;

 $headers = "From:" . $from;

 mail($to,$subject, $message,$headers);

 header("Location: " . $_SERVER['REQUEST_URI'] . "?mail=sent");
 exit();

}
?>

Jquery (Ajax):

 $('.compform').submit(function(event) {
    var formData = {
        'name'              : $('input[name=name]').val(),
        'mail'             : $('input[name=mail]').val()
    };
    $.ajax({
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'compform.php', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json', // what type of data do we expect back from the server
                    encode          : true
    })
        .done(function(data) {
            console.log(data); 
        });
    event.preventDefault();
    $('.compform button').html('Success!');
});

Html

<form class="compform" action="compform.php" method="post">  
   <input placeholder="Name" name="name"> 
   <input placeholder="Email" name="mail">
   <input placeholder="Type of Website" name="type"> 
   <select name="selectoptions">
    <option value="choose" disabled selected>Choose a Style</option> 
    <option value="modern">Modern</option>
    <option value="serious">Serious</option>
    <option value="light">Light Tone</option> 
    <option value="creative">Creative</option>
   </select>
   <textarea placeholder="Additional Information" name="info"></textarea>
   <button type="submit" name="submit">Submit</button>
</form>

try .compform is not a class it's not valid selector because you have not declared it Use <form class="compform" action="compform.php" method="post"> and use event.preventDefault(); ON first line of the function code — ShubhamD
– ShubhamD, Commented May 5, 2020 at 4:19
sorry i forgot to edit that! I had that in my original coe. But thanks for pointing it out though. Any other ideas? — Uriel Bitton
– Uriel Bitton, Commented May 5, 2020 at 4:20
Yes please update the latest code by editing so that we can give it a try :) — ShubhamD
– ShubhamD, Commented May 5, 2020 at 4:21
you are not using SMTP server right ? if you are testing it on localhost you must provide SMTP credentials for sending email — ShubhamD
– ShubhamD, Commented May 5, 2020 at 4:28

UfguFugullu · Accepted Answer · 2020-05-05 07:04:59Z

As a first point, you check in your PHP script if the field "submit" is set, but do not pass it in your ajax call. Next you don't give a json response as a answer because you made a forwarding.

Further you are using the encode property in your ajax call, that not seem to exist. Additionally you can use the complete method to get status messages of your ajax call.

All in one you can try this codes (if your mail function will work on the regular way)

PHP

if(isset($_POST['submit'])){
  $to = "[email protected]"; // this is your Email address
  $from = $_POST['mail']; // this is the sender's Email address
  $name = $_POST['name'];
  $mail = $_POST['mail'];
  $subject = "Quadflow Content Writing Service Request";

  $message = 'Hi Uriel, you have a new content writing request email from Quadflow App';
  $message .= $name;

  $headers = "From:" . $from;

  mail($to,$subject, $message,$headers);

  header('Content-Type: application/json');
  echo json_encode(['status' => 'success', 'message' => 'The mail sends successfully']);
  exit();
}

jQuery

$(document).ready(function() {

  $('.compform').on('submit', compformSubmit);

  function compformSubmit(event) {
    event.preventDefault();

    var target = $(event.target);
    var formData = {
      'name': target.find('input[name="name"]').val(),
      'mail': target.find('input[name="mail"]').val(),
      'submit': true
    };

    $.ajax({
        type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url: 'compform.php', // the url where we want to POST
        data: formData, // our data object
        dataType: 'json', // what type of data do we expect back from the server
        // encode: true // this setting does not seem to exist
      })
      .done(function(data) {
        console.log(data);
        target.find('button').text('Success!');
      })
      .always(function(jqXHR, textStatus) {
        console.log(jqXHR);
        console.log(textStatus);
        target.find('button').text('Always!');
      });
  }

});

HTML

<form class="compform" action="compform.php" method="post">
  <input placeholder="Name" name="name">
  <input placeholder="Email" name="mail">
  <input placeholder="Type of Website" name="type">
  <select name="selectoptions">
    <option value="choose" disabled selected>Choose a Style</option>
    <option value="modern">Modern</option>
    <option value="serious">Serious</option>
    <option value="light">Light Tone</option>
    <option value="creative">Creative</option>
  </select>
  <textarea placeholder="Additional Information" name="info"></textarea>
  <button type="submit" name="submit">Submit</button>
</form>

Collectives™ on Stack Overflow

Using Ajax to submit form Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related