Incorporate a different address using $location.path(path); and submit the ng-form

I have a form:

<form name="myForm" ng-submit="save(myObject)">
...
<button type="submit" class="btn btn-primary" ng-click="changeLocation('/railway-connection')">Save </button>
</form>

My goal is to perform two actions when the form is submitted. First, to call the save() function and save the data. Second, to change the location.

 $scope.save= function (myboject) {
    $scope.saveObj = angular.copy(myboject);

    console.log($scope.saveObj);
};

$scope.changeLocation(path){
    $location.path(path);
};

However, the code is not working as expected. When I click the button, it successfully saves the data and enters the changeLocation() method, but it does not actually change the location.

If I remove the ng-click and instead put $location.path('/next') in the save() function, it works fine. But I prefer to have it within ng-click.

How can I make this work?

Answer №1

Avoid using both ng-submit and ng-click simultaneously, as mentioned in the ng-submit documentation:

Be cautious about triggering "double-submission" by utilizing both the ngClick and ngSubmit handlers together.

Instead, use ng-click to invoke the save function within your controller.

<form name="myForm">
    <button type="submit" class="btn btn-primary" ng-click="save(myobject)">Save</button>
</form>

Within your save function, modify the location path after successfully saving your object.

$scope.save= function (myboject) {
   $scope.saveObj = angular.copy(myboject);
   console.log($scope.saveObj);

   $location.path('/next');
};

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

Prevent encountering the error message "Cannot read property of undefined" while mapping data

When I retrieve data from the Google Books API, I need to transform it into a more manageable array for further processing. To achieve this, I am using the following code snippet: data.items.map(function(book) { return { googleId : book.id, image : book ...

Is it possible to relocate a function that relies on the success callback of Ajax outside of the callback?

According to JSHint.com: Avoid placing function declarations inside blocks. Opt for a function expression or move the statement to the outer function's top. JSHint advises against keeping this function within the success callback. function matchC ...

Long-term responsibilities in Node.js

Currently, I have a node.js server that is communicating between a net socket and a python socket. The flow is such that when a user sends an asynchronous ajax request with data, the node server forwards it to Python, receives the processed data back, and ...

Tips for showing a limited number of results the first time in an AngularJS application

I am a beginner in AngularJS and Ajax requests. I created a demo where I make an Ajax request to get remote data and display it in a list. My goal is to initially show only 10 results when the page loads for the first time, and then load the next 10 result ...

How can I prevent ng-blur from triggering when ng-readonly is set to true in AngularJS?

I am currently working with AngularJS and have run into an issue when combining ng-blur with ng-readonly. Even though ng-readonly is set to true, ng-blur still triggers (if the input field is clicked and then somewhere else is clicked). In this example, n ...

There was an error that was not properly handled: The property 'Minus' cannot be read because it is undefined

I tried uninstalling and reinstalling NPM using the command npm install but encountered an error afterwards. I also attempted npm audit fix --force which resulted in the following error: An unhandled exception occurred: Cannot read property 'Minus&a ...

Problem with jQuery Window Resize Trigger Not Reactivating

I am facing a challenge in integrating a slider within multiple jquery tabs. As the slider requires specific width and height to display correctly, I have to trigger a window resize event when the tabs are switched. Surprisingly, the code I implemented onl ...

Hmm, seems like there's an issue with the touchable child - it must either be native or forward setNativeProps to

Currently enrolled in a ReactNative course on Coursera, I am facing an error in a 4-year-old course: "Touchable child must either be native or forward setNativeProps to a native component." I am unsure about this error and would greatly appreciate any hel ...

Transfer a GET parameter from the URL to a .js file, then pass it from the .js file to a

Hey there, I'm currently using a JavaScript file to populate my HTML page with dynamic data. The JS file makes a call to a PHP file, which then fetches information from my SQL database and echoes it as json_encode to populate the HTML page. The issue ...

FadeOut/FadeIn Iframe Animation

Help needed with making an iframe fade in and out using jQuery. Something seems off with the code and I can't figure out why it's not working. Can anyone spot the mistake? HTML <body> <center> <div class="headbackground" ...

The incorrect date selection made by the Datepicker feature in the Vue / Buefy component

Currently, I am utilizing Vue / Buefy as a datepicker in the form on a specific page (2nd step). You can find the page here: An issue has arisen where the date of birth input is sometimes recorded inaccurately. For instance, the user selects June 5th, 197 ...

Sending an HTTP POST request from Angular 4 to Java SpringMVC results in the issue of POST parameters not

Currently, I am developing a REST API using Java Maven Spring Boot and Spring MVC. I have encountered an issue where Angular POST request parameters are not being recognized by SpringMVC's @RequestParam. Below is the Angular code snippet; saveAsSit ...

Steps for converting TypeScript code to JavaScript using jQuery, without the need for extra libraries or frameworks like NPM

My single-page dashboard is quite basic, as it just displays weather updates and subway alerts. I usually refresh it on my local machine, and the structure looked like this: project/ index.html jquery-3.3.1.min.js script.js I decided to switch it t ...

Tips for transferring information to a node server

Currently, I am working with Express and facing the challenge of dynamically sending data to the app.get() method. Specifically, on my index page, there is a list of topics, and upon clicking one, I need to send the name of that element as the required dat ...

RxJS BehaviorSubject allows you to retrieve the current value or obtain a new one depending on a specific condition

I am managing a subject that consumers subscribe to: private request$: Subject<Service> = new BehaviorSubject(null); Upon initialization, my components utilize this function: public service(id: number): Observable<Service> { return this. ...

Error: 'window not defined' or 'document not defined' encountered while importing a module in Next.js

I'm working on integrating a Wysiwyg editor into my web application. However, I encountered an error when trying to import the editor module. I tried using both react-draft-wysiwyg and react-quill. The former resulted in a "window not defined" error, ...

The use of a Bootstrap row is leading to incorrect dimensions for FullPageJS

Within the body tag, I have included the following code snippet: <div id="container"> <div class="section profile"> <div class="row"> <div class="col-sm-6"> A </div> ...

How to prevent mouse click events in Three.js after interacting with an HTML overlay

Encountering an issue with Three.js: I have created my own HTML user interface as a simple overlay. However, I am facing a problem where the mouse click does not reset when I interact with elements on this overlay. Specifically, when I click on the "Came ...

Displaying varied information based on JSON feedback using AngularJS

I am currently in the process of developing an app using AngularJS and the Ionic framework. The app will display a list of data with various subcategories for each item, depending on the account type. View sample image here The issue I am facing is that ...

JavaScript's square bracket notation is commonly used to access nested objects within an object

My goal is to accomplish the following: this.inputs[options.el.find('form').attr('class')] = {}; this.inputs[options.el.find('form').attr('class')][options.elements[x].selector] = false; Unfortunately, I'm fa ...