Tips for sending a spring form as a parameter in an Ajax request using a JavaScript function

I have a form in Spring with two buttons on a JSP file.

<input type="button" onclick="saveFormActions(this.form)" class="btn primary publish border16" id="saveBtn" value="Save"/>
                <input type="submit" class="btn primary publish border16" id="publishBtn" value="Publish"/>

When the Save button is clicked, it should trigger an Ajax call by passing the form as an argument.

function saveFormActions(form){
            jsonData={};
            jsonData = form;
            VR.appendToJSObject(jsonData);
            var jqxhr = $.post(saveFormActionsURL, jsonData, function(returnString) {
                if (returnString == 'true'){
                    showAutoSaveMessage();
                }else{
                    alert(returnString);
                    window.location.reload();
                }
            });
            jqxhr.error(function(data){
                //This one is highly unlikely
                alert("There was a problem  - please contact support");
                window.location.reload();
            });

However, I am encountering the following JavaScript exception:

TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement

Answer №1

Instead of sending a form as a DOM element, consider passing the values in an AJAX call by forming a JSONObject and including it as a parameter in the request.

For more information on resolving the error "TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement", check out this link:

Error Resolution Link

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

The absence of a value in the Map<String,String> dataType

I am facing an issue with setting up the map using the code below. Even though the user input values are being received, when they are entered into the map using the corresponding key, it ends up printing null. Can anyone provide some guidance on this? p ...

What is the best way to utilize node packages?

Apologies for the novice question. I am just starting out with coding and have spent several hours searching online for instructions on how to run code from node modules, but unfortunately, haven't made much progress. My goal is to create an editable ...

Various components return distinct cookie values

Currently, I'm faced with the challenge of retrieving values from cookies in a React application. The interesting part is that when I compare the value stored in my Redux store.js file to that saved in the Cookies storage, they match perfectly. Howeve ...

Run a script on jquery mobile once the page has finished loading via ajaxrequestData

My website consists of multiple pages where I load external HTML pages using AJAX calls. After loading the page, I need to execute a specific code snippet that I've written. The code works perfectly when I access the page directly, but it fails to wor ...

Utilizing the scrollTop method to display the number of pixels scrolled on

My goal is to show the number of pixels a user has scrolled on my website using the scrollTop method in jQuery. I want this number of pixels to be displayed within a 'pixels' class. Therefore, I plan to have <p><span class="pixels"> ...

What are the best practices for utilizing ESM only npm packages alongside traditional npm packages within a single JavaScript file?

Hey there, I'm fairly new to web development and I encountered a problem when trying to require two packages, franc and langs, in my index.js file. It turns out that franc is now an ESM only package, requiring me to import it and mention type:module i ...

Is there a more efficient approach to configuring properties in AngularJS while maintaining a binding?

When trying to set a property in a service equal to data returned from a network call, the conventional method goes like this: //SERVICE// thisService.property = data; //SERVICE// The corresponding controller code usually looks something like this: //CO ...

Can Acumatica support the loading of external JavaScript files or libraries?

I am currently developing a new Acumatica screen for our company that will involve integrating javascript code to retrieve and display a map object (from ESRI). The challenge is that this code necessitates an external .js file which the javascript code it ...

An unusual html element

During a recent exploration of a website's code using the inspect tool, I stumbled upon a tag that was completely unfamiliar to me. <gblockquote></gblockquote> I've come across a blockquote before, but never a gblockquote. Interest ...

Integrating Dialogflow with a Heroku JavaScript application

After extensive research, I delved into the realm of integrating DialogFlow requests with a webhook hosted on platforms like Heroku. With both Heroku and nodeJS impeccably installed on my system, I diligently followed the heroku tutorial to kickstart the p ...

Error occurred after attempting to make a GET request

What I aim to achieve: I need to send two parameters from the front-end to the back-end. This is the code snippet: In TypeScript file: activeFromActiveToQuery(req?: any): Observable<ResponseWrapper>{ const options = createRequestOption(req) ...

React: Implementing a Method to Reset the Value of a React-Select upon Selection Change

In my layout, I have two side-by-side components that serve as drop-down lists using the React-Select library: <SelectField options={props.directories} placeholder="Directory" onChange={props.onDirectoriesChange} value={props.directoryCodeName ...

Comparison of loading time between loader gif and browser's loading image

Recently, I've come across a code snippet where I implemented a 'loader' gif to show while PHP retrieves data from an SQL database. Everything seemed to be working fine when testing on my localhost. However, upon closer observation, I notice ...

Passing variables to each view in Node.js using Express

Currently working on coding a web-based game and looking to share variables across all views. Each user has their own unique race with various variables, such as commodities (money, energy, etc.) and planets (owned, built, etc). The goal is to display th ...

Exploring the shadow DOM hierarchy is permitted

Having trouble accessing an element inside a shadow DOM. See the screenshot below for how it looks: https://i.stack.imgur.com/LYLo8.png I attempted to solve this issue using the following code: WebElement root1 = DriverFactory.driver.findElement(B ...

Enhancing Fullpage.js with a custom scroll delay feature

One issue I'm having is with a fading div "box" using ".fp-viewing" as a trigger for the transition effect. The problem arises when the page begins scrolling upon .fp-viewing being activated, causing the box to scroll out of view before its animation ...

What purpose does the keyword 'this' serve when used within a synchronized block in Java?

I find myself a bit puzzled when it comes to grasping the role of 'this' within a synchronized block. While I do have a basic understanding of the purpose of a synchronized block, my confusion persists. According to this article: The caution is ...

What is the best way to insert an object at a particular position within an array containing numerous nested objects?

This is the given Object: [ { "id": "1709408412689", "name": "WB1", "children": [ { "id": "1709408412690", "n ...

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Why isn't the video div sliding down and displaying properly in the beginning? Any ideas on how to fix it? Here is the snippet of HTML code and JavaScript: <!DOCTYPE HTML> <html> <head> <title>Team Songs</title> <link ...

I want to know how to shift a product div both horizontally and vertically as well as save its position in And Store

How can I animate and move a product div horizontally & vertically, and save its position for future visits? I need to move the div with animation in a specific sequence and store the position using PHP. Buttons <button type="button" href ...