Submitting multiple forms with one button can produce unexpected results

As I work on my app development, I encountered an issue when trying to submit multiple forms using a single button.

I applied the same class to all the forms and looped through them to submit. While this approach worked smoothly on my localhost, it seems to be inconsistent on Heroku - where sometimes only one or a few forms get submitted.

   const submitBtn = document.getElementById('submit-form');
   const forms = document.querySelectorAll('.form');

   submitBtn.addEventListener("click", () => {
     forms.forEach(form => form.submit());
   }

Answer №1

Could you also share your html code with me?

I have a feeling that the issue might be due to the page refreshing before the second form is able to submit. Typically, when using form.submit(), it will redirect to the URL specified in the action attribute of the form.

Is this related to Submitting two forms with one button? It seems like trying to call multiple form.submit() functions consecutively can sometimes be unreliable. I recommend checking out the solutions provided in the linked post to see if any of them work for your situation. You could potentially combine the form data into one request or submit them individually and wait for each response before proceeding to the next submission.

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

Implement custom material-ui styles exclusively for mobile displays

When working with Material-UI in react, I am wondering if there is a way to apply theme provider overrides only in mobile view. Specifically, I am using the <Card> component and would like to remove the boxShadow of the card when it's displayed ...

The JavaScript function I created to remove the last item in an array is not functioning correctly when it encounters an "else

My button has been designed to delete the last index from this.fullformula, which is a string. However, I've encountered an issue with deleting characters from this.result, which is an integer. Instead of looping over the function, it only deletes one ...

Enhancing the appearance of the final column within static columns of a data table

I am facing an issue where I need to add a shadow next to a set of fixed columns in order to indicate that there is content beneath them. These fixed columns are marked with the class dtfc-fixed-left which is assigned by the FixedColumns library within Dat ...

Tips for updating or toggling an icon within a button with the help of Bootstrap 5 and jQuery

Looking to switch the icon displayed inside a button upon clicking? The initial icon is <i class="fas fa-bars"></i>, and after being clicked, it should change to <i class="fas fa-times"></i>. How can this be ach ...

An unusual occurrence involving JQ selectors and various variable labels

Looking to incorporate mouseover and mouseout functions into a series of classes, I decided to use jQuery selectors with variables in a loop: for(i=1; i<=2; i++){ cid = '.Cid'+i; ccid = '.CCid'+i; csid = '.CSid&apo ...

Issue with ng-pattern directive not working as expected within AngularJS

<label for="updateInterval" class="control-label" for="UpdateInterval">Choose Interval</label> <input name="intervalRange" id="intervalRange" ng-pattern="" type="number" class="form-control input-medium fld-updateinterval-val" placehold ...

Unable to trigger onSelect event on the datepicker component

Whenever a date is chosen, I need to trigger a javascript function. Here is the javascript code: $(document).ready(function(){ var date_input=$('input[name="date"]'); //our date input has the name "date" var container=$('.bootstrap- ...

Ways to retrieve records within a specified date range in MongoDB?

I have a data record in my mongodb collection with the field "birth_date" set to "1983-05-06T16:26:32.613Z". Below is the find query I used to retrieve this record within a specific date range: var birthYear = 1983; var birthDateStart = new Date('1. ...

Brick-themed HTML/CSS elements drift away from each other

I'm currently designing an image collage for my website and attempted to use masonry for the layout. However, when I adjust the size of the blocks, they seem to drift apart, creating large gaps between each block. Any suggestions on how to resolve thi ...

The class type "selectLabel" passed to the classes property in index.js:1 for Material-UI is not recognized in the ForwardRef(TablePagination) component

Just started using react and encountering a repetitive error in the console after adding this new component. Here is the full error message: Material-UI: The key selectLabel provided to the classes prop is not implemented in ForwardRef(TablePagination). ...

Synchronize two div elements with JavaScript

The demonstration features two parent divs, each containing a child div! The first parent div's child div is draggable and resizable using JQueryUI. There are events for both dragEnd and resizeEnd associated with this div. The goal is to synchronize ...

What are the advantages of using classes versus ids for managing multiple li elements in example 20 with knockout and jQuery? Is one option more efficient and easier to maintain

<ul class="sellerDetails sellerdetailsData " data-bind="attr: { id: 'sellerdetailsData-' + $index()}"> <li><span class="buyerprocess-sprite seller-name"></span> <p class="leftfloat"> <span data-bind=" ...

Validating a string as a date input by utilizing the moment library

Utilizing the momentjs library for validating dates can be tricky. The typical format for validation is as follows: moment(date, formats, true).isValid() However, if you only want to check if a string is a valid date without specifying a format, things ...

What causes isomorphic-style-loader to generate a TypeError: Cannot read property 'apply' of undefined when utilized alongside CSS-Modules?

Currently, I am working on server-side rendering the application, and while the HTML and JS are loading fine, I have encountered an issue with my styles (.less | .scss) not being loaded. After some research, I believe that the problem lies in missing the i ...

Exporting data acquired from a MongoDB query using Node.js

I am currently working on exporting the contents of a MongoDB collection by using exports.getAllQuestions = async function (){ MongoClient.connect(url, function(err, db) { if (err) throw err; var dbo = db.db("Time4Trivia"); ...

100vh nested section with scrolling

I am attempting to create a section that remains fixed as you scroll, allowing the inner articles to scroll by 100vh within the section. Essentially, I want to have a block of section with a height of 100vh and then scroll the inner articles by 100vh: HTM ...

Adding an external JavaScript library file to a specific component in Angular 7 is a straightforward process. Let's walk through the

As a beginner in Angular framework, I've encountered an issue while working on creating a custom HTML template using Angular version 7. My template consists of various pages like home, about, product, etc. Specifically, on the home page, I am trying t ...

What is the best way to adjust font size based on div size?

Imagine a div with fixed dimensions that contains text content. If the text is too long, it overflows and "explodes" the div. On the other hand, if the text is too short, the div looks empty. I think the solution would be to adjust the font size dynamical ...

Challenges in using Three.js on mobile devices with orientation capabilities

I'm currently running tests on a web application built using three.js, and it seems that users on tablets, especially Android devices, are experiencing some unusual behavior within the scene. https://i.sstatic.net/FkFi3.jpg Below is how the view sho ...

How should the post method in Rails be utilized to retrieve data from the client side (Android)?

How can I use the post method in the def create function to receive data exclusively from the client side? post controller.rb def create @post = Post.new(params[:post]) if @post.save flash[:notice] = "Prayer Successfully created." @ ...