Unable to send data to php script via jquery ' post function without refreshing the page?

Question

I have a form that I wan't to be submitted without refreshing the page. I wan't to get the result from this form and work with it in the same page.

The form is adding a row in my clients table, so what I want to do is to get the ID of this inserted row and work with it in my same page.

The issue I am having is that my jquery code does not function I guess there is a problem with my $.post(..) part but I can't seem to figure out what it is.

HTML code:

<form id='FormAjoutNewClient' class="form-style-9">
        <img class="PointerCursor CloseNouveauClient" width="16" src="#">
        <h2 class='titelAJoutNwClient' >New Client </h2>

            <ul>
                <li>
                    <input type="text" name="NomNouveauClient" class="field-style field-split align-left requiNouveauClient NomNouveauClient" placeholder="Nom" />
                    <input type="text" name="PrenomNouveauClient" class="field-style field-split align-right requiNouveauClient PrenomNouveauClient" placeholder="Prenom" />
                </li>
                <li>
                    <input type="email" name="EmailNouveauClient" class="field-style field-split align-left requiNouveauClient EmailNouveauClient" placeholder="Email" />
                    <input type="number" name="TelNouveauClient" class="field-style field-split align-right requiNouveauClient TelNouveauClient" placeholder="Telephone" />
                </li>
                <li>
                    <input type="text" name="EntrepriseNouveauClient" class="field-style field-full align-none requiNouveauClient EntrepriseNouveauClient" placeholder="Entreprise..." />
                </li>
                <li>
                    <input type="text" name="AdrssLine1NouveauClient" class="field-style field-full align-none requiNouveauClient AdrssLine1NouveauClient" placeholder="Adresse Ligne 1" />
                </li>
                <li>
                    <input type="text" name="AdrssLine2NouveauClient" class="field-style field-full align-none AdrssLine2NouveauClient" placeholder="Adresse Ligne 2" />
                </li>
                <li>
                    <input type="number" name="CodePostalNouveauClient" class="field-style field-split align-left requiNouveauClient CodePostalNouveauClient" placeholder="Code Postal" />
                    <input type="text" name="VilleNouveauClient" class="field-style field-split align-right requiNouveauClient VilleNouveauClient" placeholder="ville" />
                </li>
            <!-- Bouton Ajouter Nouveau Client  -->
                <li>
                    <center><input type="button" name='AjoutClient' class='AjoutNewClient' value="Ajouter client" /></center>
                </li>
            </ul>
        </form>

My JQuery Code:

$('body').on('click', '.AjoutNewClient', function(event) {       
                 var EmailNCF       = $(".EmailNouveauClient").val();
                 var TelNCF         = $(".TelNouveauClient").val();

                if (EmailNCF == '' || TelNCF == '' ) {
                    alert("please fill all required fields");
                    }
                 else {

                    $.post("../formsTraitements/FormAddClient.php", {
                        EmailNC: EmailNCF,
                        TelNC: TelNCF
                    }, function(data) {
                        alert(data);
                        $('#FormAjoutNewClient').reset(); // To reset form fields
                    });
                }

My php code is pretty simple:

$EmailNC        =   $_POST['EmailNC'];
$TelNC          =   $_POST['TelNC'];

        $query = mysqli_query(" INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')"); 
        if($query){
            echo "added.";
            }
        mysql_close($connexion);

[Your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Jay Blanchard, Jan 26 '16 at 14:09
Have you watched the request / response on your browser's developer tools? — Jay Blanchard, Jan 26 '16 at 14:09
Thanks for the sql injection Likn, and I am not getting anything from my developer tools — samouray, Jan 26 '16 at 14:21
You do not see the request or the response in the network tab of your console? — Jay Blanchard, Jan 26 '16 at 14:22

Berserk · Answer 1 · 2016-01-26T15:04:27.530

I haven't try but try this :

$.post("../formsTraitements/FormAddClient.php", {
                    EmailNC: EmailNCF,
                    TelNC: TelNCF
                }, function(data) {
                    alert(data);
                    $('#FormAjoutNewClient').reset(); // To reset form fields
                });

have just add "," before function(data) and change the name of the EmailNCF parameter

Edit

I have try this :

HTML code :

<form id='FormAjoutNewClient' class="form-style-9">
    <img class="PointerCursor CloseNouveauClient" width="16" src="#">
    <h2 class='titelAJoutNwClient' >New Client </h2>

        <ul>
            <li>
                <input type="text" name="NomNouveauClient" class="field-style field-split align-left requiNouveauClient NomNouveauClient" placeholder="Nom" />
                <input type="text" name="PrenomNouveauClient" class="field-style field-split align-right requiNouveauClient PrenomNouveauClient" placeholder="Prenom" />
            </li>
            <li>
                <input type="email" name="EmailNouveauClient" class="field-style field-split align-left requiNouveauClient EmailNouveauClient" placeholder="Email" />
                <input type="number" name="TelNouveauClient" class="field-style field-split align-right requiNouveauClient TelNouveauClient" placeholder="Telephone" />
            </li>
            <li>
                <input type="text" name="EntrepriseNouveauClient" class="field-style field-full align-none requiNouveauClient EntrepriseNouveauClient" placeholder="Entreprise..." />
            </li>
            <li>
                <input type="text" name="AdrssLine1NouveauClient" class="field-style field-full align-none requiNouveauClient AdrssLine1NouveauClient" placeholder="Adresse Ligne 1" />
            </li>
            <li>
                <input type="text" name="AdrssLine2NouveauClient" class="field-style field-full align-none AdrssLine2NouveauClient" placeholder="Adresse Ligne 2" />
            </li>
            <li>
                <input type="number" name="CodePostalNouveauClient" class="field-style field-split align-left requiNouveauClient CodePostalNouveauClient" placeholder="Code Postal" />
                <input type="text" name="VilleNouveauClient" class="field-style field-split align-right requiNouveauClient VilleNouveauClient" placeholder="ville" />
            </li>
        <!-- Bouton Ajouter Nouveau Client  -->
            <li>
                <center><input type="button" name='AjoutClient' class='AjoutNewClient' value="Ajouter client" /></center>
            </li>
        </ul>
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script>
     $('body').on('click', '.AjoutNewClient', function(event) {       
             var EmailNCF       = $(".EmailNouveauClient").val();
             var TelNCF         = $(".TelNouveauClient").val();

            if (EmailNCF == '' || TelNCF == '' ) {
                alert("please fill all required fields");
                }
             else {

                $.post("../formsTraitements/FormAddClient.php", {
                    EmailNC: EmailNCF,
                    TelNC: TelNCF
                },  function(data) {
                    alert(data);
                });
            }
        });
    </script>

PHP Code

<?php
header("Access-Control-Allow-Origin: *");
var_dump($_POST);

$EmailNC        =   $_POST['EmailNC'];
$TelNC          =   $_POST['TelNC'];
$sql = " INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')"
/*
    $query = mysqli_query(" INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')"); 
    if($query){
        echo "added.";
        }

    mysql_close($connexion);*/

And I receive the data in my php code. So try with that to see if it's work.

have you make a 'var_dump($_POST)' in your php file to see if you receive the information. Because I have try and i receive the parameter in the php file (with the js code that i have write). But after i haven't execute the SQL code. — Berserk, Jan 26 '16 at 14:39
My jquery code dosen't even work on my html page, so I guess it is essentialy an error in JQuery, but I can't seem to figure it out — samouray, Jan 26 '16 at 14:47

Unable to send data to php script via jquery ' post function without refreshing the page?

1 Answers1