Tips for sending a form using ajax in Safari browser within a Grails framework

I am attempting to use an ajax function to submit a form when the button is clicked,

however, in Safari browser it submits the form like a normal form submission.

In other browsers, it works correctly with the ajax function.

<g:form action="addEmpHistory" name="formNew" method="post">

 <button id="submitBtn" name="submitBtn" onclick="submitform(formNew);"></button>

</g:form>

//Ajax code

function submitform(data){  
    $("#"+data).submit(function(event) {    
        new Event(event).preventDefault();
        event.preventDefault();

        $.ajax({
            type: 'POST',
            url: '/user/addUSer',
            data: $('#'+data).serialize(),

            success: function (data) {
                location.reload();  
            }

        });
    });
}

Answer №1

It might be a good idea to consider removing the onclick attribute since you are using jQuery

<form action="addEmpHistory" id="formNew" name="formNew" method="post">
    <button id="submitBtn" name="submitBtn">Submit</button>    
</form>

Instead of your submitform function, you could replace it with jQuery event binding like this:

$(document).ready(function() {
    $("#formNew").submit(function() {
        $.ajax({
            type: 'POST',
            url: '/user/addUSer',
            data: $("#formNew").serialize(),
            success: function(data) {
                alert(data);
            }
        });

        return false; // prevent actual form submit
    });
});

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

How can I implement AJAX with an aspx backend?

While I am relatively new to AJAX, I have picked up some knowledge from various online tutorials. If I were working with PHP, I would be fine, but... ...I am required to use VB.Net. Microsoft does offer tools in the Visual Studio IDE for implementing AJAX ...

Why does my computed property become undefined during unit testing of a head() method in Vue.js with Nuxt.js?

In my Vue.js + Nuxt.js component, I have implemented a head() method: <script> export default { name: 'my-page', head() { return { title: `${this.currentPage}` }; }, ... } </script> ...

Is there a way to make $animate.removeClass function within a directive without needing to use $eval

I have developed a custom directive that smoothly fades out and fades in the content whenever there is a change in the model. app.controller('myCtrl', function($scope, $interval) { $scope.number = 0; $interval(function() { $scope.number+ ...

Dealing with TSLint errors within the node_modules directory in Angular 2

After installing the angular2-material-datepicker via NPM, it is now in my project's node_modules folder. However, I am encountering tslint errors that should not be happening. ERROR in ./~/angular2-material-datepicker/index.ts [1, 15]: ' should ...

What is the best way to handle processing large amounts of data stored in a file using JavaScript within the

Suppose my file contains the following data and is located at /home/usr1/Documents/companyNames.txt Name1 Name 2 Name 3 Countless names... I attempted to use this code: $> var string = cat('home/usr1/Documents/companyNames.txt'); $> s ...

Tips for waiting in webdriverjs until takeScreenshot captures the screenshot:

When capturing a screenshot using webdriverjs, I often face the issue of the screenshot being taken asynchronously, resulting in potential errors if an exception occurs before the screenshot is saved. The code snippet I typically use is as follows: var pr ...

Display array elements without numerical indexes

Consider the code snippet below: for(i=0; i<3; i++){ a = {}; a['name' + i] = i; data.push(a); } This code will generate the following array: { 1:{name0:0}, 2:{name1:1}, 3:{name2:2} } How can I modify the code ...

How can AngularJS ng-repeat be used to extract HTML elements?

I need help parsing HTML that is received from the server as a string. Here is an example of what I receive: <img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width=" ...

Guidance on toggling elements visibility using Session Service in AngularJS

After reading this response, I attempted to create two directives that would control the visibility of elements for the user. angular.module('app.directives').directive('deny', ['SessionTool', function (SessionTool) { ret ...

The issue of undefined database columns arises when attempting to transmit data from an HTML form to a MySQL database via Express

My primary objective is to develop a RestAPI using Node.js and test it in a small HTML application. With the guidance of my instructor, I successfully created the RestAPI based on an example and customized it to work with my own MySQL database. Testing ea ...

Issues with returning undefined values in JSON with Node.js and AngularJS

I have developed an application that communicates with an API to retrieve and display data. The process involves entering a username in the client input, which is then sent to the server. Upon checking, everything seems to be working fine at this stage. H ...

Numerous web worker asynchronous requests are being made, but not all are coming back

Within my web worker script, I am utilizing the following code: self.addEventListener('message', function(e){ try { var xhr=new XMLHttpRequest() for(var i = 0; i < e.data.urls.length;i++){ xhr.open('GET&apos ...

Use error list substitution as opposed to adding Json

Hi there! I have the JSON code below that is used to validate a form. If incorrect data is entered more than once when the create button is clicked, it appends all the data again and still displays the original errors. Is there a way to remove the curren ...

Modifying numerous array keys/names in JavaScript

Alright, I have an array named arrayObj containing three objects: arrayObj[0], arrayObj[1], and arrayObj[2]. All of these objects have the key name["user"] repeated three times. To change these key names using a function, here's what I've come up ...

Only initiate an AJAX call if there are no other pending AJAX requests from prior function invocations

Arriving at a new, chaotic code base with no testing available has presented me with a significant challenge. I am currently struggling to resolve an issue without the use of ES6, only relying on plain vanilla JS and jQuery. The scenario: Within a web pag ...

Sending information to components in Angular using Router

Should I pass data through the angular router to a component, or is it better to use a service? Currently, the component is receiving data in the following way: this.account = activatedRoute.snapshot.data.account ...

Can you provide guidance on integrating this jQuery script into my Next.Js application effectively?

I have been using a script on a plain HTML website, importing it via the <script> tag: (function($) { var wa_time_out, wa_time_in; $(document).ready(function() { $(".wa__btn_popup").on("click", function() { if ($(&qu ...

Steps for submitting a form once all inputs have been verified

$('#f_name, #l_name').change(function(){ if($(this).val().length < 2) { $(this).css('border', '1px solid red'); alert('names must be at least 2 symbols'); check ...

Running Python in React using the latest versions of Pyodide results in a malfunction

As someone who is new to React and Pyodide, I am exploring ways to incorporate OpenCV functionality into my code. Currently, I have a working piece of code that allows me to use numpy for calculations. However, Pyodide v0.18.1 does not support OpenCV. Fort ...

When the dependency value transitions from 1 to 0, useEffect fails to trigger

I'm really puzzled by how useEffect behaves in this scenario: Check out this code snippet: const numVertices = selectionProvider.verticesSelectionProvider.count; console.log('RENDER ---> COUNT = ', numVertices); useEffect(() => { ...