Sending Form data by Jquery.ajax including php function in action parameter

Question

I´m developing a wordpress pluging. I have a php file that controll all the plugin and some php class and css files.

In the main php file I create a form. When the form is submited, a Jquery.Ajax function catch the form values and send them to a php function defined in the main php file. After this jquery have to give you a alert verification.

I know how to send the file imagen. I know hot to send the text values.

But I have not idea how to send the file imagen and the text values to my php function in my php main file. Here is my code:

PHP main file:
Create the form

function formulario_nueva_ft(){ 
    $cadena="<form id='form_new_ft' method='post' enctype='multipart/form-data'>
    $cadena.="<input id='tit_new_ft' maxlength='40' type='text'>";
    $cadena.="<input id='horas_new_ft' type='text'>";
    $cadena.="<textarea id='requisitos_new_ft' type='text' maxlength='245'> </textarea>";
    $lista=new areatematica;    
    $res=$lista->listarareastematicas(); 
    $cadena.="<select id='cod_at_new_ft'>";
        foreach($res as $valor){
            $cadena.="<option value='.$valor->id_at.'>".$valor->titulo_at."</option>";
        } 
    $cadena.="</select>";
    $cadena.="<select id='modalidad_new_ft'>
        <option value='online'>Online</option>
        <option value='mixta'>Mixta</option>
        <option value='presencial'>Presencial</option>";
    $cadena.="</select>";
    $cadena.="<input type='file' name='new_pdf_ft' id='new_pdf_ft'/>";
    $cadena.="<h4 id='loading' >loading..</h4><div id='message'></div>";
    $cadena.="<input id='btn_new_ft' type='submit' value='Añadir'>";
    $cadena.="</form>";   
    echo $cadena;
    die();
}

Here is where I catch the ajax response ,insert data in mysql and upload the image file:

function crear_ft(){   
    $tit=$_POST['tit'];
    $hor=$_POST['hor']; 
    $req=$_POST['req'];
    $cod_at=$_POST['cod'];
    $modalidad=$_POST['mod'];
    $pdf=$_POST['pdf'];
    $tabla='ft'; 
    $ft=new curso();
    $sourcePath = $_FILES['new_pdf_ft']['tmp_name'];  
    $targetPath = "archivos/".$_FILES['new_pdf_ft']['name'];  
    move_uploaded_file($sourcePath,$targetPath);

    $ft->set_titulo($tit);
    $ft->set_horas($hor);
    $ft->set_requisitos($req);
    $ft->set_cod_at($cod_at);
    $ft->set_modalidad($modalidad);
    $ft->set_pdf($pdf);
    $ft->set_tabla($tabla);
    $nada=$ft->insertarcurso();  
    echo $nada;
    die();
}

And this is my js code: This have to be 'live' method because is about an element that appears
after other js event.

jQuery('#form_new_ft').live("submit", function(e){   
    var file = new FormData(jQuery('#form_new_ft')); 
    e.preventDefault();
    jQuery("#message").empty();
    jQuery('#loading').show();  
    jQuery.ajax({
        url: "/wordpress/wp-admin/admin-ajax.php", 
        type: "POST", 
        contentType: false,
        processData: false,
        cache: false,  
        //how to send img file and string values?
        data: file + { tit:jQuery('#tit_new_ft').val(),
                       hor:jQuery('#horas_new_ft').val(),
                       req:jQuery('#requisitos_new_ft').val(),
                       mod:jQuery('#modalidad_new_ft').val(),
                       cod:jQuery('#cod_at_new_ft').val(),
                       pdf:jQuery('#modalidad_new_ft').val(),  
                       action:'crear_ft'//this is the php function that will          
                                        //handle this data.
                      }, 
        success: function(data){  
            jQuery("#message").html('');
            jQuery("#message").html(data);
        },
        error: function(){
            alert("Error funcion");
        }
    });  
});

Help me please!!

Are you seeing any errors? or is there anything happening on the server that could give more information? — theatlasroom, Apr 28 '15 at 09:43
when I submit the form, all looks fine, i get the ajax success, but the php function didn´t was called. I think the problem is here: data: file + { tit:jQuery('#tit_new_ft').val(), .... It looks like if it were not the way to send DataForm together to others parameters . — Francisco Moreno, Apr 28 '15 at 10:07

score 0 · Answer 1 · answered Apr 28 '15 at 10:05

0

I do not understand your `file +'. I would expect, within the data object, something such as

img:$("#new_pdf_ft").val(),

answered Apr 28 '15 at 10:05

Sylvia Stuurman

137
4

-.- I am not enlightened today. I tried to do this but i don´t know why didn't work. I have a different response now, I think something changed in my code. I will try to resolve it with your advice. – Francisco Moreno Apr 28 '15 at 10:18
when I tried your code: data: { img:jQuery("#new_pdf_ft").val(), tit:jQuery('#tit_new_ft').val(), ...... action:'crear_ft' } that returns to php a $_POST['img'] that contents a string: C:\\fakepath\\btnhome80.png, but is not set the $_FILE, I can´t upload the img file to the server folder – Francisco Moreno Apr 28 '15 at 10:29
I see. To upload a file using Ajax, you need a File uploader. See http://stackoverflow.com/questions/4006520/using-html5-file-uploads-with-ajax-and-jquery – Sylvia Stuurman Apr 29 '15 at 07:11

Sending Form data by Jquery.ajax including php function in action parameter

1 Answers1