JQuery post to submit HTML form data to php file not working

Question

I am new to Jquery but I have done a lot with html/php in the past. What I need to do is submit for data from within a popup modal, insert that into a mysql database on localhost and then open teh next popup via javascript. As redirecting to the php page does not allow you to load js, I have looked into using jquery to post the data to my phpfile, which will then insert the data and return a code to the jquery, which will then load the next popup if the post was succesful. I have tried different tutorials, but I just cannot get the code to work. Below is my index.php file, which contains the popup form and jquery code...

    <div id="survey1" class="w3-modal">
    <div class="w3-modal-content w3-animate-top w3-card-4">
        <div class="w3-container w3-padding-16">
            <div class="section-heading text-center">
                <div class="col-md-12 col-xs-12">
                    <h1>BASIC <span>DETAILS</span></h1>
                    <p class="subheading">The basics of your business and your website.</p>
                </div>
            </div>
            <form role="form" class="login-form" method="post" action="http://localhost/basic.php" id="basicForm">
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Full Name" aria-describedby="basic-addon1" name="name" id="name">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1" name="email" id="email">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Business Name" aria-describedby="basic-addon1" name="bname" id="bname">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Business Type" aria-describedby="basic-addon1" name="btype" id="bemail">
                </div>
                <div id="response"></div>
                <button class="btn" type="submit" id="submit1" name="submit1" style="width:40%; float: right;"></button>
            </form>
            <script>
                $(document).ready(function(){
                    $('#basicForm').on('submit', function(e){
                        e.preventDefault();
                        $('#submit1').prop('disabled', true);
                        var name = $('#name').val();
                        var email = $('#email').val();
                        var bname = $('#bname').val();
                        var btype = $('#bemail').val();
                        if(name == '' || email == '' || bname == '' || btype == '')
                        {
                            $('#submit1').prop('disabled', false);
                        }
                        else
                        {
                            $.post(
                                'http://localhost/TDS/basic.php', 
                                $('#basicForm').serialize(),
                                function(data)
                                {
                                    $('form').triggered("reset");
                                    $('#submit1').prop('disabled', false);
                                }
                            );
                        }
                    });
                });
            </script>
        </div>
    </div>
</div>

And this is my php insert file...

<?php 
require('connection.php')

if(isset($_POST["name"]))
{
    $name = mysqli_real_escape_string($con, $_POST["name"]);
    $email = mysqli_real_escape_string($con, $_POST["email"]);
    $bname = mysqli_real_escape_string($con, $_POST["bname"]);
    $btype = mysqli_real_escape_string($con, $_POST["btype"]);

    $insert_query = "INSERT INTO Details ('Name', 'Email', 'Business Name', 'Businesss 
Type') VALUES ('".$name."', '".$email."', '".$bname."', '".$btype."')";
     if(mysqli_query($con, $insert_query))
    {
        echo json_enchode(success => 1);
    }
    else
    {
        echo json_enchode(success => 0);
    }
}
?>

Any help would be much appreciated!

Can you please specify in what way you "cannot get the code to work"? Do you get any errors? Do you get undesired results? It helps a lot if you tell which part of the process you're stuck with. I can also see you wrote json_enchode in your question, the correct name is json_encode. — El_Vanja
– El_Vanja, Commented Mar 21, 2020 at 22:01
You're also wide open to SQL injection. You should use prepared statements instead. — El_Vanja
– El_Vanja, Commented Mar 21, 2020 at 22:02
By not working I mean when I click the button to submit the form my code does nothing 🤷‍♂️ — Josh Bygrave
– Josh Bygrave, Commented Mar 21, 2020 at 22:05
Have you attempted any debugging? Have you put any part of the jQuery process under test with console.log() statements? Have you checked your network tab in developer console to see what kind of a response you're getting from the AJAX call? — El_Vanja
– El_Vanja, Commented Mar 21, 2020 at 22:07
Is the PHP getting called? Try to debug it, see till where it runs — davidev
– davidev, Commented Mar 21, 2020 at 22:09

Sergey Ponomarev · Accepted Answer · 2020-03-21 22:49:27Z

1

The code itself is OK, but you need to load jQuery itself.

Put this somewhere in the beginning of your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

(the tips on how to include jQuery see here: https://www.w3schools.com/jquery/jquery_get_started.asp)

Except this, the code worked for me: - The form was submitted correctly; - The PHP endpoint received the correct POST data;

The saving to DB I didn't check, but it looks OK. Anyways, the PHP part is out of the scope of the question.

Also, a small issue is in the code itself: there's no such method as "$('form').triggered('reset');", use "$('form').trigger('reset');" instead.

edited Mar 21, 2020 at 22:49

answered Mar 21, 2020 at 22:44

Sergey Ponomarev

342 bronze badges

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

8 Comments

Josh Bygrave Over a year ago

Alright thanks I've added that line in the header but still nothing happens

Sergey Ponomarev Over a year ago

A wild guess, did you fill in all the form fields before pressing submit? (there's a condition in the code to do nothing if any of them are empty)

Josh Bygrave Over a year ago

Yehh all fields were filled. I'm wondering if it's a problem with my php file somewhere?

Sergey Ponomarev Over a year ago

Might be, you can use developer console in the browser. There's the "Network" tab to check if the request went to the PHP file and check what response was.

Josh Bygrave Over a year ago

Alright I'll check that tomorrow to see if anything has been posted to php

|

Collectives™ on Stack Overflow

JQuery post to submit HTML form data to php file not working

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related