How use $.ajax with text and/or image and checkbox?

Question

I have to post with ajax a form that can contains text and/or message and/or value of checkbox.
All of these post will be sent to a php controller. I have always use $.post (just for a tchat with text only) and never $.ajax . Here my form :

if ($member_data->member->isBreeder){

echo '<div id="foalDiscussion"></div>';
echo '<form id="form" action="#" method="post" enctype="multipart/form-data">';
echo '<textarea id="foalNewsTextArea" name="mess_text"></textarea>';
echo '<ul id="mainBreedList">';
foreach ($breeder_foalList as $v){

    echo '<li><label class="checkbox-inline"><input type="checkbox" name="foaltarget" value='.$v['foal_id'].'>'.$v['foal_name'].'</label>';

}
    echo '</ul>';



    <input id="buttonNews" type="file" accept="image/*" name="image" />
    <input class="btn btn-secondary" id="button" type="submit" value="Envoyer">
</form>
<div id="err"></div>';
}

I don't know how get data, send data to the controller with $.ajax .

Here my classical $.post chat :

function postFoalMessage(text, foalId, isFoalNews){


$('#foalTextArea').val('');

$.post('http://localhost:8080/MHFManager/src/controller/ChatController.php', 
    {
        mess_text : text,
        foal_id : foalId,
        isFoalNews : isFoalNews,


    },function(data) 
    {

    });


}

Help is welcome!

Just like you do with `$.post` but with more possible options... — jeroen, Dec 21 '16 at 14:18
The jquery documentation offers pretty fine examples for the functions it implements. Anything in particular you do not understand about those? — arkascha, Dec 21 '16 at 14:18

score 0 · Answer 1 · edited May 23 '17 at 10:30

Actually after reading a bit more - I realized that serialize() doesn't catch the input type="file" elements. I think your best answer is here: How can I upload files asynchronously?

Below is still my original post covering the very basics of using $.ajax instead of $.post...

$.post is just a shortcut for $.ajax - but I myself have found it's just as easy to just use $.ajax.

http://api.jquery.com/jquery.ajax/

/* Add listener to process the form */
$(body).on("submit","#form", function(event){
    event.preventDefault(); // prevent default browser post.
    sendFormToHandler($(this)); // call your custom form handler 
});

/* Your custom ajax form hander */
function sendFormToHandler(formObj){
    var formData = formObj.serialize(); // get the form data
    $.ajax({
        url: '/path/to/form/handler.php', 
        data: formData,
        method: 'POST',
        contentType: 'multipart/form-data',
        success: function(response){
            $("#divToPutResponseIn").html(response); // on success, put response in div
        }
    });
}

score 0 · Accepted Answer · answered Dec 25 '16 at 18:02

I found it! Here my PHP

if ($member_data->member->isBreeder){

echo '<div id="foalDiscussion"></div>';
echo '<textarea id="foalNewsTextArea" name="mess_text"></textarea>';
echo '<ul id="mainBreedList">';
foreach ($breeder_foalList as $v){

    echo '<li><label class="checkbox-inline"><input type="checkbox" name="foaltarget" value='.$v['foal_id'].'>'.$v['foal_name'].'</label>';

}
    echo '</ul>';

echo '<button class="btn btn-secondary btn-xs" id="buttonNews"><span class="glyphicon glyphicon-comment"></span></button>';

<form id="form" action="#" method="post" enctype="multipart/form-data">
    <input id="uploadImage" type="file" accept="image/*" name="image" />
    <input class="btn btn-secondary" id="button" type="submit" value="Upload">
</form>

}

Here my javascript. I get data without a "submit".

$('#buttonNews').click(function(){
var formData = new FormData();
formData.append("mess_text", $('#foalNewsTextArea').val());

$('#mainBreedList li input:checked').each(function() 
        {
            valeurs.push($(this).val());

        });
formData.append("checkbox", valeurs);
formData.append("mess_img", $("#uploadImage").prop("files")[0]);
//console.log(formData);

var text = $('#foalNewsTextArea').val();
var img = $("#uploadImage").prop("files")[0]; 
var isNews = true;
$.each(valeurs, function(i,foalId){
    $.ajax({
        url : "http://localhost:8080/MHFManager/src/controller/ChatController.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false
    });
});
valeurs = [];

$('#foalNewsTextArea').val('');

How use $.ajax with text and/or image and checkbox?

2 Answers2