Tips for utilizing the Struts2 submit tag as a button without triggering form submission

I am currently utilizing the Struts2 framework in my application, and I have a button on my JSP page. Here is the code for the button:

<s:submit type="button" name="btnSave" />

However, I want this button to act like a normal HTML button, meaning it should not submit the form but instead execute a scripting function on the onclick event. This function will then submit the form using Ajax.

The issue I am facing is that Struts2 converts it to:

<input type="submit" id="add_btnSave" name="btnSave" value="Save"/>

This results in my form being submitted.

1) Using the HTML button tag will disrupt the GUI as the theme of my form is Ajax-based.

Within the head tag, there is a script:

... (SCRIPT CONTENT HERE) ...

My body tag is structured as follows:

... (BODY TAG CONTENT HERE) ...

If anyone has any ideas on how to handle this situation with Struts2, your assistance would be greatly appreciated.

Thank you in advance.

javajavascriptajaxjspstruts2

Answer №1

When utilizing the s:submit tag, the resulting HTML output will be either an input or a button tag with the type set to submit, except for when the type is image. You can utilize this code to trigger a JavaScript onclick event that does not submit the form.

<s:submit type="button" onclick="return false;"/>

Answer №2

Did you attempt using preventDefault()?

$("btnSave").click(function(e){
    e.preventDefault();   
    //..continue with the code
});

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

Despite containing elements, Array.length incorrectly reports as 0 in React, JavaScript, and TypeScript

I have been working on storing persistent data for my Electron app using electron-json-storage. Initially, I tried using neDB but encountered an error, so I switched to another method. However, it seems that the issue is not with neDB but rather with my ow ...

javascriptreactjselectron

WARNING: Unit 0 does not have a bound texture

I'm currently attempting to recreate the Three.js panorama dualfisheye example using Three.js r71. I have to stick with r71 because I plan to use this code in Autodesk Forge Viewer, which is built on Three.js r71. While I've made some progress, ...

javascriptthree.js

Tips for deleting multiple objects from an array in angular version 13

I am facing an issue where I am trying to delete multiple objects from an array by selecting the checkbox on a table row. However, I am only able to delete one item at a time. How can I resolve this problem and successfully delete multiple selected objects ...

javascriptarraystypescriptangular13

Issue with pre-selected checkboxes: JavaScript

A function was created to automatically check the first value of a checkbox when a page is loaded: function defaultCheck(){ document.checkBoxForm.list[0].checked = true; var val=document.checkBoxForm.list[0].value; showtotal[0] = docum ...

phpjavascripthtmlajaxcheckbox

Is there a way to retrieve the drop down selection from the Property file using Selenium WebDriver?

Presently engaged in working with Selenium WebDriver and utilizing Java. The reports are being generated within the TestNG framework. Currently scripting for a web application that consists of numerous drop-down menus, each offering multiple options. I hav ...

javaselenium-webdriver

SapUI5: Implementing a toggle functionality to display/hide one list item based on another list item's action

UI5 is a versatile framework with numerous possibilities, but sometimes I find myself struggling to implement ideas that would be easier in traditional HTML. Here's the scenario: I want to create a List with ListItems that display cities like Berlin, ...

javascriptlistsapui5

How to Divide a String at the Second-to-Last Instance of a Comma Using jQuery

Imagine having a string like this: var str = "xy,yz,zx,ab,bc,cd"; If you wish to split it at the second-to-last comma occurrence, resulting in: a = "xy,yz,zx,ab" b = "bc,cd" How can one accomplish this task? ...

javascriptjquerystringsplit

What is the best way to extract specific keys from a PHP JSON object?

I would like the PHP function to generate a list of keys where the value is equal to or less than a specified variable. <?php $t = 35; $jsonobj = '{"ABC":35,"DEF":36,"GEH":34}'; $obj = json_decode($jsonobj); ...

phphtmljsonajax

Having trouble getting the new dynamic bootstrap card to function properly

I'm struggling to add a new bootstrap card to my page. Every time I try to insert it, the card doesn't show up. Here is the code snippet: Show a new bootstrap card if a record exists <div class="row"> <button type="button" ...

javascriptphpjquerybootstrap-4

Tooltipster fails to function with elements that are dynamically created

I've been struggling with this issue for several days now, but I can't seem to find a solution. In my JavaScript code, I have a function that generates HTML after an Ajax call is completed. I call this function in the following manner: $(documen ...

javascriptjquerytooltipster

Using ajax to submit variables may not function properly

I have a set of data that has been processed using JavaScript and I am looking to save it to a database. I have been attempting to code something with AJAX, but so far, I have had no success... What I require: Two variables (id, name) need to be sent to a ...

javascriptphpajaxvariables

Transforming images with Imagick

I've been trying to generate thumbnails from PDF uploads using Imagick. I have a script that is supposed to handle this task, but unfortunately, it only uploads the file without creating a thumbnail. I know some of you may find this basic, but PHP is ...

javascriptphphtmlmysqlimagick

Why is my client-side code being compiled and executed on the Node.js backend?

As a newcomer to SSR, I'm not sure if my problem and solution align with standard practices, but it seems unlikely. My objective is to create a dynamic page that allows users to add/remove items. Initially, I developed this component for a client-sid ...

javascriptnode.jsreact-reduxserver-side-rendering

Process for arranging an array according to the sorting sequence of another

Using two arrays in a Highcharts "series" parameter, for example: X = [25, 100, 50, 12] Y = [50, 12, 100, 25] The sequence of X and Y corresponds to the chart's Y value. When sorting X in ascending order, Y's order should match by becoming: X ...

javascriptarrayssorting

Simple way to extract the values from every input element within a specific <tr> tag using JQuery

Is there a way to align all input elements in a single row within my form? For example, consider the snippet of code provided below, which includes a checkbox and a text input box. I would like to retrieve the values from both of these input types and pres ...

javascriptjqueryhtml

Selenium and Python encountered an ElementNotInteractableException, indicating that the element was not interactable when inserting a value

My current challenge involves inserting a value into a text box on a web page. The issue I'm facing is that the text box is located at the bottom of the page and seems to be unlocatable by the code initially. Upon inspecting it twice in Chrome, I real ...

javascriptpythonseleniumcss-selectorswebdriverwait

Why does JavaScript return NaN when combining arrays of different lengths?

Information: Hey, take a look at these 4 arrays, and then there's an array with those arrays nested inside. I'm using _.reduce to calculate the total length of all arrays combined. However, when I run the function with the array of arrays, I&ap ...

javascriptarrays

Incorporating a stationary navigation bar alongside a parallax scrolling layout

After spending the entire night trying to figure this out, I have had zero success so far. I decided to tackle this issue with javascript since my attempts with CSS have been completely fruitless. This is a demonstration of the parallax scrolling webpage. ...

javascriptjqueryhtmlcss

Chaining multiple ajax calls in jQuery is a powerful technique that allows you

I am looking to execute a series of N ajax requests without causing the browser to freeze, and I intend to utilize the jquery deferred object for this purpose. Below is a sample scenario involving three requests, but in reality, my program might need to h ...

jqueryajaxjquery-deferreddeferred

Downloading files using Ext JS 6

I am attempting to download a file from the server using an Ext JS 6 component following a guide on downloading a file with Ext JS 4 Below is the code for the component: Ext.define('Aft.view.search.FileDownload', { extend: 'Ext.Component&a ...

javaspringfileextjsdownload