CODEWITHSUNDEEP
javascriptajaxformsresponsetext
user170324
user170324

Reputation: 45

ajax different forms same page

I have two forms on the same page
I have taken an upload script (can't remember where from) which works fine, but it is called when both forms are submitted, I would like it to determine which form was submitted and do something different for the second form.
They both need to have the complete:function
FORM1

<form action="upload.php" name="upform" method="post" enctype="multipart/form-data" onsubmit="return disuload();">
<label for="ftp_upload" id="uloadlfile">Select a file: </label><input type="file" name="ftp_upload" id="uloadfile"></br>
<label for="ftp_upcomm" id="uloadlcomm" class="percent">Comments: </label><input type="text" name="ftp_upcomm" size="34" id="uloadcomm"></br>
<label id="uloadlimit">Maximum upload size: <?php echo ini_get('post_max_size'); ?></label></br>
<input type="submit" id="uloadsub" value="Upload">
</form>

FORM2

<form method="post" name="NewFolder">
<label for="ftp_nfolder">Folder name: </label><input type="text" name="ftp_nfolder" size="30"></br>
<input type="submit" value="Create">
</form>

SCRIPT

(function() {
var bar = $('.bar');
var percent = $('.percent');
$('form').ajaxForm({
 beforeSend: function() {
 var percentVal = '0%';
 bar.width(percentVal)
 percent.html(percentVal + ' uploaded, Please wait...');
},
uploadProgress: function(event, position, total, percentComplete) {
 var percentVal = percentComplete + '%';
 bar.width(percentVal)
 percent.html(percentVal + ' uploaded, Please wait...   ');
},
complete: function(xhr) {
 bar.width("0%");
 location.reload();
 percent.html(xhr.responseText);
}
});
})();

Upvotes: 0

Views: 50

Answers (1)

Misiur
Misiur

Reputation: 5297

You are using 

$('form')

which will work for each form element in your document. You can either:

  1. Add ajaxForm for specific forms separately, like:

    $('form[name="NewFolder"']).ajaxForm({ //...

    $('form[name="upform"]').ajaxForm({ //...

or 2. Determine the name of form inside callback:

//(...)
complete: function(xhr) {
    if ('NewForm' === this.name) {
        //... do something
    } else {
        //Somethingelese
    }
//(...)

Upvotes: 1

Related Questions