HTML to PHP form inputs through AJAX

user_14561225 0
Viewed 53

I want to get the inputs from an html form, and send them to PHP through my JavaScript. Basically I have a very simple html form, and I would like to grab it's inputs and send them to PHP with JavaScript as I'm using AJAX.

The problem is that whenever I fill out the form and I submit it, it just send me an email BUT without the values from the form - just what I already have in the PHP.

HTML Code

<!-- CONTACT FORM START -->
<form id="contact-form" class="fade-up" method="post" action="">
    <div class="row">

        <!--NAME FIELD-->
        <div class="col-md-6">
            <input type="text" id="cf-name" class="input__field cf-validate" name="name" placeholder="Name">
        </div>

        <!--EMAIL FIELD-->
        <div class="col-md-6">
            <input type="text" id="cf-email" class="input__field cf-validate" name="email" placeholder="Email">
        </div>

        <!--MESSAGE BOX-->
        <div class="col-md-12">
            <textarea id="cf-message" class="input__field cf-validate" rows="8" name="message" placeholder="Your Message"></textarea>
        </div>

        <div class="alert-container col-md-12"></div>

        <!--SUBMIT BUTTON-->
        <div class="col-md-12">
            <button type="submit" id="cf-submit" name="subind" class="main-btn cursor-link">Send as an individual</button>

            <button type="submit" id="cf-submit" name="subbiz" class="main-btn cursor-link">Send as a business</button>
        </div>

    </div>
</form>
<!-- CONTACT FORM END -->

Javascript Code

$(document).ready(function() {
    $('form').submit(function (event) {
        event.preventDefault()
        
        var name = document.getElementById('cf-name').value
        var email = document.getElementById('cf-email').value
        var msg = document.getElementById('cf-message').value
        
        //make a post request by AJAX
        
        $.post("mail.php",{name:name,email:email,msg:msg},function(data){
            console.log(data)
        })
    })
})

PHP Code

<?php
    $name = $_POST['name'];echo $_POST['name'];
    $email = $_POST['email'];echo $_POST['email'];
    $message = $_POST['msg'];echo $_POST['msg'];
    $subject = "Client Mail - Individual";
    $to = "clients@growpile.com";
    $headers = "From: ".$email;
    $txt = "Name: ".$name." - Individual"."\n"."From: ".$email."\n\n".$message."\n\n".$ind;

    mail($to, $subject, $txt, $headers);
?>
forms html php ajax javascript
1 Answers

Adjust your form so that there is no action associated with it, this is to prevent the form submitting a POST request before the Javascript can execute.

<!-- CONTACT FORM START -->
<form id="contact-form" class="fade-up">
    <div class="row">

        <!--NAME FIELD-->
        <div class="col-md-6">
            <input type="text" id="cf-name" class="input__field cf-validate" name="cf-name" placeholder="Name">
        </div>

        <!--EMAIL FIELD-->
        <div class="col-md-6">
            <input type="text" id="cf-email" class="input__field cf-validate" name="cf-email" placeholder="Email">
        </div>

        <!--MESSAGE BOX-->
        <div class="col-md-12">
            <textarea id="cf-message" class="input__field cf-validate" rows="8" name="ccf-message" placeholder="Your Message"></textarea>
        </div>

        <div class="alert-container col-md-12"></div>

        <!--SUBMIT BUTTON-->
        <div class="col-md-12">
            <button type="submit" id="cf-submit" name="subind" class="main-btn cursor-link">Send as an individual</button>

            <button type="submit" id="cf-submit" name="subbiz" class="main-btn cursor-link">Send as a business</button>
        </div>

    </div>
</form>

You can obtain the input of the HTML fields using JQuery's val() function.

$(document).ready(function() {
    $('form').submit(function (event) {
        event.preventDefault()
        
        var name = $("#cf-name").val();
        var email = $("#cf-email").val();
        var message = $("#cf-message").val();
        
        // Make a post request by AJAX.
        $.post("mail.php", {name: name, email: email, message: message}, function(data) {
            console.log(data);
        });
    });
});

As for your server-sided POST request handler, you grab the input from the POST request using the filter_input function under the index of the variable.

<?php
    $name = filter_input(INPUT_POST, "name");
    $email = filter_input(INPUT_POST, "email");
    $message = filter_input(INPUT_POST, "message");

    // Print the information from the form received.
    echo "Name: " . $name . "\n";
    echo "Email: " . $email . "\n";
    echo "Message: " . $message;

    $subject = "Client Mail - Individual";
    $to = "clients@growpile.com";
    $headers = "From: " . $email;
    $txt = "Name: " . $name . " - Individual" . "\n" . "From: " . $email . "\n\n" . $message . "\n\n" . $ind;

    mail($to, $subject, $txt, $headers);
?>
user_89820340
Related