"Utilizing ajax to display multiple forms on a single page

There are two forms present on a single page. An upload script has been implemented (source unknown) and it functions correctly. However, the script is triggered when either of the forms is submitted. The objective is to determine which form was submitted and execute different actions for the second form. Both forms require the complete function.

<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);
}
});
})();

Answer №1

It seems you are utilizing

$('form')

to target every form element on your webpage. You have a couple of options:

  1. Add ajaxForm individually to specific forms, like so:

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

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

Alternatively, 2. Identify the form's name within the callback function:

//(...)
complete: function(xhr) {
    if ('NewForm' === this.name) {
        //... perform certain actions
    } else {
        //Do something else
    }
//(...)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show a picture upon hovering the button

Welcome to my website. My goal: Show an image when a user hovers over the links. I must be making some silly error, but I can't pinpoint it. This is what I've attempted so far: HTML <ul class="nm"> <li><a href="#">Cork& ...

Utilizing JavaScript to display numerous variables within a text box

After creating an HTML form, I encountered an issue where only one selected item was displayed in the text field. Can anyone help me solve this problem so that multiple names can be printed in the textfield? function myFun(extras) { document.get ...

Issue with People Picker directive causing AngularJS validation to fail

I have implemented a SharePoint client-side people picker in my form using the directive from this GitHub repository. However, I am facing an issue where the validation of my form fails and the button remains disabled. When I remove the field, the validati ...

How can I deactivate a Material UI button after it has been clicked once?

Looking to make a button disabled after one click in my React project that utilizes the MUI CSS framework. How can I achieve this functionality? <Button variant="contained" onClick={()=>handleAdd(course)} disabled={isDisabled} > ...

Using CSS transition on the height property does not produce the desired effect

I'm currently working on a menu interaction that activates on click. Here is the code snippet for reference: let btn = document.querySelector('.trigger'); let icons = document.querySelector('.icons'); let labels = document.query ...

Preventing ReactJS tooltips from exceeding the boundaries of the screen

Here is a simple demo showcasing blocks with tooltips that appear when hovered over. However, there seems to be an issue with the functionality. The tooltip should ideally be displayed either from the left or right side of the block. To determine the size ...

Using PHP's for loop to iterate through data and store them into arrays

Attempting to transmit data from JavaScript to a PHP file through an AJAX request, and then store each result in an array using PHP. queryData={"data":{"data_string":{"data":"medicine","default_field":"Content"}}} testArgument=0; $.ajax({ url:"test/q ...

Guidelines for filling an Express handlebars template and sending it via email

I am currently utilizing node.js, express, express-handlebars, and nodemailer for my project. My objective is to populate an HBS template with content and style it as an email before sending it out. The end result can be viewed below (first rendered in the ...

Having trouble with jQuery getJSON and file invocation in IE9?

JavaScript: var loadNeededDocumentsData = function () { $j.getJSON("customermanagement/documentsCheckJSON.do", function (data) { }); } $j(document).ready(function () { loadNeededDocumentsData(); }); While the code functions correctly in Fir ...

Altering the value of a form upon submission

Struggling with Javascript to update an input value before submitting and storing it in a MySQL table, I encounter the issue of getting a blank row in the database. The code snippet causing this problem looks like this: document.getElementsByName('w ...

Best method for adding markup content dynamically using XMLHttpRequest

How can we dynamically update content on a web page after successfully making an XML HTTP request? Let's use a specific example: User enters data in an input field (e.g. a forum post) Data is updated asynchronously using AJAX technology The forum po ...

Retrieve data from a URL by clicking on a link using JavaScript

After retrieving data from Laravel, I need JavaScript to capture the URL when text is clicked in the view. For example, if I click on clickme in the first line, I want to obtain /download=1. What is the most effective approach for achieving this? <a ...

What is the best way to associate an array of objects with another array in React or JavaScript?

const arrayObj = [{ id: 123, country: "IND" value: "" }, { id: 153, country: "AUS" value: "" }, { id: 183, country: "FRA" ...

Learn how to easily insert a marker on a map using leaflet js in vue 3 with just a simple click

Hey everyone! I need some help with a challenge I'm facing. I can't seem to get click coordinates to create a new Marker on my map. Check out the image here And another image here ...

Verify if the email is already registered in the database

I'm troubleshooting the following code snippet and encountering an issue where the second alert is being displayed for both existing and non-existing emails. Could you assist me in identifying the error? <script> $(document).ready(function(){ ...

Sending information to PHP with Ajax

Having trouble getting an ajax call to function properly. Using jQuery for the Ajax Call <script> jQuery( document ).ready(function() { jQuery.ajax({ url: "/handler/?Action=Variable", data: { "Action": "Variable" }, cache: ...

What is the best way to showcase AJAX data within a complex HTML structure?

I need assistance with displaying the JSON output in my HTML code. My current HTML code is quite complex, so I am unsure how to include this data and repeat the HTML section for every JSON element. Can you provide guidance on how to achieve this? HTML COD ...

Attempting to craft a multi-filter feature using AngularJS that will allow for the precise filtering of JSON data based on both month and year identifiers

I have integrated AngularJS into the RoR framework and am working on creating a multi-filter for the "ng-repeat" function to filter JSON data based on "month_id" and "year_id". Here is the current code: JSON: [ { "date":"October 4, ...

`"Error in accessing array index" occurred while trying to retrieve array data for the dataTable jQuery plugin`

Incorporating an ajax json response that will populate the dataTable jquery plugin with data retrieved from a server. The unique identifier for the table is #dataTable. Below is the code snippet for initializing the dataTable plugin: $(document).ready(fu ...

Error in Express: Request object is not defined

I'm facing an issue while trying to send data using XMLHttpRequest to a service built with ExpressJS. On the server side in index.js : app.post('/add',url.add); Implementing on the server side in url.js : exports.add = function(req, r ...