Whenever I initiate an AJAX call, my form submits automatically

I have designed a form that sends a list of products to the spring backend. This form consists of two separate buttons:

A "Submit" button for submitting the form.
A "Fetch available Stock" button for checking stock availability.

When the "Fetch available stock" button is clicked, it should trigger a function that makes an Ajax call to retrieve stock details. However, the issue I am facing is that clicking this button causes both the Ajax call for fetching stock data and form submission to occur simultaneously.

I specifically want the form submission to only happen when the user presses the "Submit" button.

Note: The form is located within a bootstrap modal.

Thank you in advance for any assistance provided!

Answer №1

It's important to include code in the form submission process using e.preventDefault() to override the default behavior of the submit button. This allows you to execute all necessary logic before actually submitting the form.

Answer №2

Include the attribute type="button" in the button element

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

What could be causing the state object in React to not be updating correctly? There seems to be a discrepancy between the expanded and

Displayed on the console is a screenshot showing <br><br> I am working with React.js, and the object displayed in the image is an element within an array that is part of the state object. I'm puzzled by what's happening. The object a ...

javascript reactjs

Having trouble with the JsonLoader copied from Threejs.org?

I've been trying to make use of a JSONLoader from threejs.org, but I'm facing some issues. Three.js seems to be functioning properly because I can easily create a cube. However, when I attempt to load a js file through the JSONLoader, nothing hap ...

javascript json three.js loader 3dsmax

Extracting information from this array using JavaScript

After struggling for a day, I finally managed to get some output from PHP instead of just the word "array". What a relief! (check out this link for the solution) Basically, this is the data returned from an XMLHTTP request to PHP, handled through a JS ca ...

javascript arrays

Customizing the cursor for disabled custom controls in Bootstrap 4

I'm having trouble changing the cursor for disabled custom-control elements like checkboxes and radiobuttons. The following style isn't working as expected: .custom-control-input:disabled ~ .custom-control-label::before { cursor: not-allowe ...

css bootstrap-4 twitter-bootstrap-4

The form action seems to be unresponsive when utilized within a vue-bootstrap form

I'm utilizing a form submission service called formsubmit.co, which allows forms to receive input data via email without the need to develop a backend for storing and transmitting data. Formsubmit handles all the storage and sending processes. Accordi ...

javascript forms vue.js bootstrap-4 form-submit

Implementing AngularJS to Display Images (IMG, PNG, or SVG) Within Dropdown Options

Looking to include an image in an Angular select option list. I've seen examples using data-image within the options, but can't seem to get it working. Any help would be appreciated. Check out the jsfiddle here: http://jsfiddle.net/drt6y0wf/ Is ...

javascript angularjs select svg

Ways to set the className prop for all components automatically without having to specify it repeatedly

One challenge I face is dealing with code duplication whenever I create a new component. Is there a way to pass the className property between components without having to explicitly define it every time a new component is created? For example, when I cr ...

javascript reactjs typescript next.js

Ways to efficiently display elements in a grid in real-time

Attempting to design a layout where each row consists of 3 cards using Bootstrap's Grid layout for responsiveness. The challenge lies in the fact that the card data is stored in JSON format, and the length of the JSON Object array may vary, leading t ...

javascript css vue.js grid-layout bootstrap-vue

What is the reasoning behind excluding any JavaScript code between the <script> tags when our intention is solely to incorporate an external JS file?

It's puzzling to me why the author of the "Javascript & Jquery: the missing manual , second edition" recommends the following sentence: When including the src attribute to connect to an external JavaScript file, avoid placing any JavaScript cod ...

javascript jquery

React application created with create-react-app that uses multiple environment files for varying configurations

I've been working on setting up various environment files for a React project (using create-react-app). I referred to the official documentation, but I encountered the following error: '.env.development' is not recognized as an internal or ...

javascript node.js reactjs npm create-react-app

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head>  </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

javascript php jquery html

Exclude weekends from DateTime

Currently working on a task list and aiming to set the default date to 3 days from now, excluding weekends. Utilizing Vue and thinking a computed property might be the solution? DateTime.utc().plus({ days: 3 }).toFormat('yyyy-MM-dd HH:mm:ss'), ...

javascript typescript vue.js luxon

The HTML code may fade away, but the JavaScript is still up and running behind the

Switching between different div elements in my HTML document is a challenge. Here's the code I currently have: <div id="screen1" class="current"> <div id="press_any_key_to_continue"> <font style="font-family: verdana" color="yellow ...

javascript jquery html three.js

Unleashing the power of promises through chaining resolution and rejection

My function returns a deferred.promise, following jQuery's deferred concept. Regardless of the success of the file read, I want to move on to the next step in the chain. Here's an example of how I currently handle it: var a, b, c; readF ...

javascript jquery jquery-deferred

Is there a way to access the current $sce from a controller?

One way to access the current $scope outside of a controller is by using the following code: var $scope = angular.element('[ng-controller=ProductCtrl]').scope(); Is there a way to retrieve the $sce of the current controller? ...

javascript angularjs

Pulling data from a MySQL database using AJAX and PHP to convert it into a JavaScript variable, resulting in

I am attempting to retrieve MySQL data using PHP, convert it to JSON, and then pass it into my JS variables for Chart.js. The JSON generated by PHP appears correct. However, when trying to access the data within my variables, the console is displaying them ...

javascript php mysql json ajax

Frozen Blanket: Modifying Particle Velocity

I need assistance adjusting the particle speed in this snowfall animation script. I'm having trouble locating the specific values that control the "Falling Speed." The current speed of the falling particles is too fast, and here is most of the code sn ...

javascript html three.js html5-canvas

``There seems to be a problem with the ngb time picker when using the up and

Currently, I am utilizing Bootstrap 4 and NG Bootstrap time picker for a project in Angular 10. Despite correctly adding all the code, I have encountered an issue where the up and down arrows on the time picker are not functioning as expected. Below is a s ...

javascript angular ng-bootstrap

Utilizing asynchronous false in Wordpress Ajax functionality

Is there a way to use the AJAX return value outside the function in WordPress? For example: function get_login_member($) { $.post(ajax_object.ajax_url, {action: 'getloginmember'}, function (data) { data = JSON.parse(data); ...

javascript php jquery ajax wordpress

Error: The componentwillmount function has encountered an issue. Actions must be in the form of plain objects. For asynchronous actions, consider

Currently, I am setting up a feature to retrieve all images based on their type using redux-saga. There are two types available: kristik and motif. While implementing the kristik type, everything works smoothly and I receive successful responses. However, ...

javascript reactjs react-native

JavaScripter Q&A