用ajax和jquery提交表单

Question

I am trying to submit a form with jquery and ajax to add a row in a table called cadreSante (the name of the table and its fields are in French) I am using those piece of code to execute this operation. can someone please tell me which code contains an error and how to solve it?

$(document).ready(function(){
    $("#submit").click(function(){
        var nom = $("#nom").val();
        var prenom = $("#prenom").val();
        var adresse = $("#adresse").val();
        var ville = $("#ville").val();
        var codePostal = $("#codePostal").val();
        var tel = $("#tel").val();
        var salaire = $("#salaire").val();
        var dateEmbauche = $("#dateEmbauche").val();

        // Returns successful data submission message when the entered information is stored in the database.

        var dataString = "nom=" + nom + "&prenom=" + prenom + "&adresse="+ adresse + "&ville="+ ville + "&codePostal=" + codePostal + "&tel=" + tel + "&salaire=" + salaire + "&dateEmbauche=" + dateEmbauche;

        if(nom =='' && prenom =='' && adresse =='' && ville =='' codePostal == '' &&
            tel =='' && salaire= '' && dateEmbauche =='jj/mm/aaaa')
        {
            alert("Merci de renseigner les champs");
        }
        else
        {
        // AJAX Code To Submit Form.
            $.ajax({
                type: "POST",
                url: "databaseupdateprocessing.php",
                data: dataString,
                cache: false,
                success: function(result){
                    alert(result);
                }
            });
        }
        return false;
    })

I am trying to submit a form with ajax and jquery to insert a row in the table called cadreSante it has the following fields (nom, prenom, adresse, ville,codePostal,tel,salaire,dateEmbauche) i send the form to a file named databaseupdateprocessing.php this is the portion of code in this file for inserting the row`

if($_POST['action'] =='ajoutCadreSante'){

$columns = "insert into cadresante(";
$values = " values(";
if($_POST['nom'] != ""){
    $columns .= "nom";
    $values .= $_POST['nom'];
}

if($_POST['prenom'] != ""){
    if($columns == "insert into cadresante("){
        $columns .= "prenom";
        $values .= $_POST['prenom']
    }
    else{
        $columns .= ",prenom";
        $values .= "," . $_POST['prenom'];
    }
}

if($_POST['salaire'] != ""){
    if($columns == "insert into cadresante("){
        $columns .= "salaire";
        $values .= $_POST['salaire']
    }
    else{
        $columns .= ",salaire";
        $values .= "," . $_POST['salaire'];
    }
}

if($_POST['tel'] != ""){
    if($columns == "insert into cadresante("){
        $columns .= "tel";
        $values .= $_POST['tel']
    }
    else{
        $columns .= ",tel";
        $values .= "," . $_POST['tel'];
    }
}

if($_POST['adresse'] != ""){
    if($columns == "insert into cadresante("){
        $columns .= "adresse";
        $values .= $_POST['adresse']
    }
    else{
        $columns .= ",adresse";
        $values .= "," . $_POST['adresse'];
    }
}

if($_POST['codePostal'] != ""){
    if($columns == "insert into cadresante("){
        $columns .= "codepostale";
        $values .= $_POST['codePostal'];
    }
    else{
        $columns .= ",codepostale";
        $values .= "," . $_POST['codePostal'];
    }
}

if($_POST['ville'] != ""){
    if($columns == "insert into cadresante("){
        $columns .= "ville";
        $values .= $_POST['ville'];
    }
    else{
        $columns .= ",ville";
        $values .= "," . $_POST['ville'];
    }
}

if($_POST['dateEmbauche'] != ""){
    if($columns == "insert into cadresante("){
        $columns .= "dateEmbauche";
        $values .= $_POST['dateEmbauche'];
    }
    else{
        $columns .= ",dateEmbauche";
        $values .= "," . $_POST['dateEmbauche'];
    }
}

$columns .= ") ";
$values .= ")";
$addquery = $columns . $values;
mysqli_query($db,$addquery);

}

and this is the HTML code for the form

<form class="form-horizontal">
        <input type="hidden" name="action" value="ajoutCadreSante">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="control-label col-sm-2" for="nom">Nom :</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="nom" name="nom">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="prenom">Prénom :</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="prenom" name="prenom">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="adresse">Adresse :</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="adresse" name="adresse">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="ville">Ville :</label>
                <div class="col-sm-10">
                    <input type="tel" class="form-control" id="ville" name="ville">
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="control-label col-sm-4" for="codePostal">Code postal :</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="codePostal" name="codePostal">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4" for="tel">Tél :</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="tel" name="tel">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4" for="salaire">Salaire :</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="salaire" name="salaire">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4" for="dateEmbauche">Date d'embauche :</label>
                <div class="col-sm-8">
                    <input type="date" class="form-control" id="dateEmbauche" name="dateEmbauche">
                </div>
                <div class="col-sm-12">
                    <button type="submit" id="submit" class="btn btn-default pull-right enregistrer">Enregistrer</button>
                </div>
            </div>
        </div>          
    </form>

Answer 1

You need to send the data in JSON format. In AJAX change the datastring from string to JSON object.

var dataString = "nom=" + nom + "&prenom=" + prenom + "&adresse="+ adresse + "&ville="+ ville + "&codePostal=" + codePostal + "&tel=" + tel + "&salaire=" + salaire + "&dateEmbauche=" + dateEmbauche;

to

var dataString = {
 nom: nom,
 prenom: prenom,
 adresse: adresse,
 ...
};