John Beasley John Beasley - 1 month ago 7
Ajax Question

Change form class to file upload

I am working on a file upload script. There are several directories to where the files need to be uploaded, however, I am trying to use a single form to do this.

With that said, I am able to change the form class using JQUERY in an attempt to use a single form.

Here is the form:

<form method="post" class="addFileClass" id="addFileForm" enctype="multipart/form-data">
<input type="file" class="fileToUpload" name="fileToUpload" id="fileToUpload" />
<button type="button" id="newfilesubmit">Upload</button>
</form>


These links are what I am using to begin the form class change:

<a href="#" class="addDentalFile">Add Dental File</a>
<a href="#" class="addLifeADDFile">Add Life ADD File</a>
.....several more.....


Using these hrefs, I can use JQUERY to change the form class:

$('.addDentalFile').on('click', function(e)
{
e.preventDefault();
$('#addFileForm').trigger('reset');
$('#addFileForm').removeClass();
$('#addFileForm').addClass('dentalFileForm');
$('.addFileModal').modal('show');
});
......same format for the other links......


Using the above, I can successfully alter the class for the form ID #addFileForm.

This is where I am stuck. Here is my current upload script:

$('#newfilesubmit').on('click', function()
{
var formData = new FormData($('#addFileForm')[0]); // <-class should be passed here, but how when the class will be different?
$.ajax({
url: 'api/uploadFile.php',
data: formData,
async: false,
contentType: false,
processData: false,
cache: false,
type: 'POST',
success: function(data)
{
// doing success stuff
},
fail: function()
{
// doing fail stuff
}
});
});


The above script works when the ID remains the same. But since now I am using the class of the form, the JQUERY needs to be able to identify the new class (I hope I'm saying that right).

With all this said, how can I change the variable formData whenever a new class is passed? If this is not possible, please let me know.

Answer

You can do something like this. On click of submit button, Just get URL based on the current applied class on form.

I hope, it will help.

$('#newfilesubmit').on('click', function()
     {
       var formData = new FormData($('#addFileForm')[0]); // <-
       var currentclass = $('form').attr('class');
       var currentUrl;
       if(currenClass == 'dentalClass'){
         currentUrl = 'api/upload.php';
       }else if(currenClass == 'dentalClass'){
         currentUrl = 'api/someotherfile.php';
       }
    //class should be passed here, but how when the class will be different?
       $.ajax({
         url: currentUrl,
         data: formData,
         async: false,
         contentType: false,
         processData: false,
         cache: false,
         type: 'POST',
         success: function(data)
         {
           // doing success stuff
         },
         fail: function()
         {
           // doing fail stuff
         }
       });
     });
Comments