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, Mar 21 '20 at 22:01
You're also wide open to [SQL injection](https://stackoverflow.com/questions/332365/how-does-the-sql-injection-from-the-bobby-tables-xkcd-comic-work). You should use [prepared statements](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php) instead. — El_Vanja, Mar 21 '20 at 22:02
By not working I mean when I click the button to submit the form my code does nothing ‍♂️ — Josh Bygrave, Mar 21 '20 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, Mar 21 '20 at 22:07
Is the PHP getting called? Try to debug it, see till where it runs — davidev, Mar 21 '20 at 22:09
To be honest new to jquery completely and all I know is when I click the button to submit it does nothing, no data is submitted into the dB and the pages doesn't reload or load the next popup — Josh Bygrave, Mar 21 '20 at 22:11
Yeh I know but it wasn't working before I added that in anyway — Josh Bygrave, Mar 21 '20 at 22:58

Sergey Ponomarev · Answer 1 · 2020-03-21T22:49:27.750

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 '20 at 22:49

answered Mar 21 '20 at 22:44

Sergey Ponomarev

34
2

Alright thanks I've added that line in the header but still nothing happens – Josh Bygrave Mar 21 '20 at 22:49
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) – Sergey Ponomarev Mar 21 '20 at 22:55
Yehh all fields were filled. I'm wondering if it's a problem with my php file somewhere? – Josh Bygrave Mar 21 '20 at 22:56
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. – Sergey Ponomarev Mar 21 '20 at 22:58
Alright I'll check that tomorrow to see if anything has been posted to php – Josh Bygrave Mar 21 '20 at 22:59
HTML/JS code is ok for sure. What can be also wrong is the POST url: open http://localhost/TDS/basic.php in your browser and see if it is there (no 404 error). – Sergey Ponomarev Mar 21 '20 at 23:03
I'll try that tomorrow too. Is it a possible problem with my query which is causing nothing to happen as I spelt encode wrong? – Josh Bygrave Mar 21 '20 at 23:05
Update in the network tab I have a text/htnl type call to basic.php,which returns a code 302. There is then a call from jquery to reload to index.html,which I put in the code to test if it was an issue with me insert query – Josh Bygrave Mar 22 '20 at 09:54

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

1 Answers1