0

firts of all, thank you for all the help you have been giving me allways with your answers. I'm really new with coding, but more or less I get through and I'm creating a website from 0 (www.mundopedales.com)

But today I'm really stuck with a form I want it to do two action, sending data to MySQL db and uploading a image file with a custom name. I'm able to run both but not at the same time, if one works the other one doesn't.

Form action runs this file where I can send the input text for the custom name and the image:

<form action="upload.php" id="send-bike" method="post" enctype="multipart/form-data">
<input type='text' name='newname' id='newname' placeholder='Image filename'/>
<input type="file" name="fileToUpload" id="fileToUpload">

Button :

<input id="postData" type="button" value = "post">

Ajax code is this and is where I get curious action hapening:

$('#postData').click(function (e) {
e.preventDefault();
var newname = $('#newname').val();
var dataString = 'newname=' + newname;
$.ajax({
    type: 'POST',
    url: 'sendbike.php',
    data: dataString,
    success: function () {  
        $('#send-bike').submit();
        //window.location.assign('http://www.mundopedales.com/crear-bicicletas.php');//if I untag this line I change upload.php to work and then sendbike.php runs....
        }
    });

});

Don't understand why that makes that change and how I can do to make both run at the same time.

Thanks in advance and sorry for my poor English (made in Spain...)

JorgeD.
  • 9
  • 2
  • Why don't you either just process the form data with a regular form submit OR ajax? Don't do them both ;) – faerin Jul 20 '16 at 08:33
  • @entiendoNull thaks for help. I've managed to add sendbike.php code inside upload.php and both actions are now working fine. – JorgeD. Jul 20 '16 at 08:49
  • Great :) If you do **want** to use ajax however see @Logan Wayne 's approach in the answers below. That is how you would do it. – faerin Jul 20 '16 at 08:56

1 Answers1

1

Use .submit() of jQuery instead.

$('#send-bike').submit(function(){

    var formData = new FormData($(this)[0]); /* DATA FROM THIS FORM */

    $.ajax({
        type: 'POST',
        url: 'sendbike.php',
        data: formData,
        contentType: false,
        processData: false,
        success: function () {  
            alert('success uploading!');
        }
    });

    return false;

});

Just process the submitted data to sendbike.php.

Logan Wayne
  • 6,001
  • 16
  • 31
  • 49
  • this way I wasn't able to change files name. Thanks you althought! – JorgeD. Jul 20 '16 at 08:51
  • @JorgeD. Why? sendbike.php will still receive `newname` and `fileToUpload` data from your form. – Logan Wayne Jul 20 '16 at 09:04
  • I wasn't getting nothing from $_POST['newname'] at sendbike.php and I couldn't understand where to change the default filename for my custom newname. As I said, I'm really new and don't know much about JS. I tried to understand FormData and data.append properties but didn't figure out... Thank you anyway!! – JorgeD. Jul 20 '16 at 09:17
  • @JorgeD. - `formData` variable contains the data from your form. So, the POST data is `$_POST["newname"]` and `$_FILES["fileToUpload"]`. With [`FormData`](http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax), you are just literally passing the form normally but using Ajax. – Logan Wayne Jul 21 '16 at 00:29
  • Great @LoganWayne I will give it a try! – JorgeD. Jul 21 '16 at 11:09