Submit multiple forms using dojo's xhrGET method

I am searching for a solution on how to use ajax to submit multiple forms in one xhr.post call using dojo. The documentation mentioned below at the end of this page states:

Actually, the attribute "form:" can be set on any node, not just form nodes. If there are more than one form in your page enclosed within a div or span tag, you can submit all of these forms by setting "form:" to the surrounding div or span tag.

Setting the id of a div containing multiple forms as the "form" attribute in an xhr call does not produce the desired result:

xhr.post({
    form: "idOfDivThatSurroundsManyForms",
    ...
});

This fails in domForm.formToObject, which actually requires a form node (or id) with elements attribute.

Is this section of the documentation incorrect or am I missing something?

Do you have any suggestions on how to effectively merge multiple forms into one xhr call through different methods?

javascriptajaxformsdojo

Answer №1

It seems like there may be a mistake in the documentation and your observation is correct - the form attribute is indeed passed to the formToObject function.

One way to work around this issue is by using the following code:

require(["dojo/_base/xhr", "dojo/query", "dojo/_base/lang", "dojo/dom-form"], function (xhr, query, lang, domForm) {

  var mergedForms = {}
  query('form', 'idOfDivThatSurroundsManyForms').forEach( function(form) {
        lang.mixin(mergedForms, domForm.formToObject(form));
  } );
  xhr.post( {
    content: mergedForms
  } );

});

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

Having trouble passing JSON data from JQuery to ASP.Net MVC using AJAX calls?

When I try to call a WCF Service from my ASP.Net web application using jquery to test the service function GetData, I encounter an issue where the parameter value is null. It seems that I am unable to pass the data to the WCF service despite trying various ...

jqueryajaxwcfasp.net-ajax

Navigate to a fresh web page without encountering any script loading issues

I am currently working on a web application that loads new pages without requiring the browser to reload. While some pages load perfectly fine, others are causing errors due to missing scripts. The code snippet below is used to load a new page: function lo ...

javascripthtmljqueryajax

Browser-agnostic script proxy

Currently, I am working on client-side Javascript which interacts with JSON web services from a different domain. I've learned that certain browsers don't permit cross-domain scripting, so it's recommended to set up a proxy on my local serve ...

asp.netjavascriptweb-servicescross-domain

One issue with AngularJs is that it does not accurately display data that has been modified within

My MediaService service is being modified within a component. The data in MediaService is connected to another component, but any changes made in the first component are not reflected in the HTML of the second component. MediaService angular .module(&apo ...

javascriptangularjs

Storing arrays in arrays with different structures

When creating a copy of a form on button click, I am facing an issue with storing the form data in the database. While single input data is inserting properly, how should I handle checked values storage? View my form https://i.sstatic.net/FGM20.png Curren ...

ajaxlaraveldatabasemultidimensional-arraystore

The right data-placement tooltip seems to be malfunctioning

Initially, the tooltip functions correctly for top, bottom, and left directions. However, it fails to display properly when set to right. This issue seems to be related to the CSS or HTML structure, even though the tooltip is positioned absolutely. The fo ...

javascriptbootstrap-4tooltip

Light as a feather external HTML initiation (AJAX)

Sorry, I've been struggling for a while to figure out how to get the other HTML file to pop up using Featherlight. The manual doesn't provide any additional information, so I would appreciate some guidance on what might be wrong: <link href=" ...

ajaxfeatherlight.js

Unable to retrieve all form properties when using enctype='multipart/form-data'

Recently, my NodeJS server has been successfully uploading files to Amazon using a secret form. However, in an effort to enhance security measures, I decided to introduce a password field to the form. Unfortunately, upon doing so, I encountered an issue wh ...

htmlnode.jsformsexpress

Tips for integrating angular signature functionality using fabricjs in the latest version of Angular (Angular 11)

After struggling to make paperjs and the angular-signature library work together, I was at my wit's end. But then, I stumbled upon a different solution that proved to be much better. I realized that posting the solution under the appropriate question ...

javascriptangularfabricjsimplementationsignature

Building a dynamic dropdown menu for interconnected categories and tags using Ajax in Wordpress

I am currently working on implementing a dynamic filtering system with two dependent dropdown lists for WordPress. The feature I am focusing on is related to recipes, so my specific example should provide more clarity than a general inquiry. Our recipes a ...

ajaxwordpressdrop-down-menu

Discovering the Error Message within the Error Object transmitted by NodeJS to Angular

When handling errors in Nodejs functions using a try/catch scope, an error may be returned in cases such as when the user doesn't exist or when the database is unreachable. The code snippet below demonstrates this scenario: router.delete('/delete ...

javascriptnode.jsangulartypescript

Incorporating an npm reference into a personalized node within Node-RED

As a novice in both the NodeRed and NodeJs/npm realms, I am embarking on the journey of creating a custom node for the first time. Despite my efforts to follow the official documentation on Creating your first node, I seem to have hit a roadblock. Everyth ...

javascriptnode.jsnode-red

Showing a global variable from an external JavaScript library

I have integrated some external libraries into my ionic project. One of these libraries includes the declaration of var loading = false; In my page's .ts file, I am "importing" this variable using: declare var loading; Although I can use this vari ...

javascriptangulartypescriptionic-framework

Mocha maintains the integrity of files during testing

After running a unit test to update a config file, I noticed that the file was altered. My initial thought was to use "before" to cache the file and then restore it with "after". mod = require('../modtotest'); describe('Device Configuratio ...

javascriptnode.jstestingmocha.js

Play multiple videos simultaneously on a single webpage automatically

Looking to enhance my archive product page in woocommerce by adding a featured video. Encountering an issue where only one video auto plays while the others pause. When there's just one video on the page, it works flawlessly, but adding a second vide ...

javascripthtmljquerywordpresshtml5-video

Troubleshooting React Native in VS Code using Node shims

I recently started working on a React Native project using the Ignite CLI 2.0.0 default boilerplate, and I find myself in need of some dependencies from node-based packages. To address this, I created files named transformers.js, babel-transform.js, and r ...

javascriptnode.jsreact-nativevisual-studio-codejestjs

Implement a FOR loop in conjunction with an AJAX request

My goal is to send an AJAX request with multiple form fields and use an array for validations. I would like to also pass these values via AJAX: Although I haven't used a for loop in JavaScript before, it looks familiar. The current approach of the l ...

javascriptajaxjqueryloopsfor-loop

"Enhancing Progress Using JQuery Looping for Dynamic Progress

I am trying to create a progress bar that runs in a loop. It should count down to zero and then start again with the initial value. Check out this example on JSFiddle This is the JavaScript code: <script type='text/javascript'>//<![CD ...

javascriptjqueryhtml

"The interconnection between NetBeans, jQuery, and AJAX is

My issue is with a Netbeans 7.4 (also tried 7.3) project involving PHP and JavaScript where breakpoints do not work in jQuery ajax loaded pages that contain included JavaScript. I have no problem with PHP or top-level JavaScript, but for example: In index ...

javascriptphpajaxdebuggingnetbeans

Sort the array of objects based on the nested attribute

I am facing a challenge in ordering an array based on a nested object. The array contains information about objects on a timeline and I would like to sort it by the start position defined within nested arrays. Currently, I am able to iterate through the ar ...

javascriptarrayssorting