"Troubleshooting ng-submit in AngularJS: How to Fix a Function That

I've encountered an issue with my angular-promise where a http method is not being called when a form is submitted using ng-submit. There are no errors, but it seems like the function is never executed. Here's the JavaScript code snippet:

myapp.factory('CardFactory', ['$http', function($http){
return{
    cardService: function(hclass) {
        return $http({
            method: 'get',
            url: UrlServices.baseUrl + 'http://localhost:8080//HSRestServices/hsrest/decks/getCards/' + hclass,
        })
    }
    }
  }])
myapp.controller('CardCtrl', ['$scope',  'CardFactory', function($scope, CardFactory ){

$scope.card = "Druid";

$scope.cardService = function() {


    CardFactory.cardService($scope.card)
        .then(function (response) {

            $scope.status = response.status;
            $scope.card = response.data;

            console.log("Response: " + JSON.stringify({data: response.data}));

            if (response.status == 200){
                $scope.card = response.data;
            } else {
                console.log("Response: Something went wrong.");
            }
        }, function (response) {
            console.log("Response: Something went wrong.");
        })
};
 }]);

And here's the HTML code snippet:

<body ng-app="mainApp">
<div ng-controller="CardCtrl">
<form ng-submit="cardService()">
    <input type="submit" value="Submit">
</form>
<p ng-model="card">{{card}}</p>

  </div>

 </body>

If you have any ideas on how to resolve this issue, I'd greatly appreciate it. Thank you in advance.

Answer №1

If the term "Druid" is missing from the app, chances are angular.js and app.js have not been included in your application.

If they are included and still not working, it could be due to an improper definition of UrlServices. Check the browser console for further information.

Alternatively, everything seems to be functioning for me. You can view this jsfiddle: https://jsfiddle.net/j8o0ag4t/

The console displays:

 Error: Can't find variable: UrlServices

cardService@http://fiddle.jshell.net/j8o0ag4t/show/:50:29 cardService@http://fiddle.jshell.net/j8o0ag4t/show/:62:28 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:160:97 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:177:84 $eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:100:328 $apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:101:110 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:177:71 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:27:19 forEach@[native code] p@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:7:262 c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:26:493

Answer №2

Ensure that your form has a name attribute and that all form elements within it also have their own respective name attribute.

Additionally, do not use the ng-model directive on a p tag. Instead, use an input element of type text like the example below:

HTML:

<form name="emailForm" ng-submit="submitEmail()" novalidate>
    <input type="text" name="email" />
    <input ng-model="email" type="submit" value="Submit">
</form>

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

Disable default behavior in a SharePoint 2010 List new form with jQuery if conditions are not met

In the SharePoint 2010 List new form, there are 10 checkboxes available. I specifically need to choose exactly 3 of them and not less than that. Even though I implemented jquery for this purpose, it seems that the form does not stop submitting when the con ...

Adding content to a text field and then moving to the next line

I am looking to add a string to a text area, followed by a new line. After conducting some research, here are the methods I have attempted so far but without success: function appendString(str){ document.getElementById('output').value += st ...

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

Passing an empty JSON object through Ajax requests

To Whom it May Concern (I am simply attempting to meet the "please add more detail" requirement) Upon sending data to the server as shown below, the body appears empty. Server // Route for POST method app.post('/pass', function (req, res) { ...

React - Page Loads with Empty Query Parameters

Seeking assistance with navigation logic in React, I'm encountering an issue that requires some guidance. I have developed a front-end web app using TypeScript, React, and Ionic Framework V5. The app features a standard search box that redirects use ...

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...

What is preventing Protractor from detecting Angular on a site that has been automatically initialized with Angular?

Whenever I try to utilize browser.get() in my code, I encounter the following error: Error: Angular could not be found on the page http://localhost:5000/#/login debug=timing&saveLogs=true&displayAll=true : angular never provided resumeBootstrap A ...

Discover the method for accessing the attribute of an Angular directive within the HTML content of the templateUrl

Can anyone help me understand how to access the attribute of an angular directive in the HTML content specified in templateUrl? angular.module('myApp') .directive('questionImage', function () { return { restri ...

Retrieve a specific value from an array of objects by searching for a particular object's value

Here is an example of an array of objects I am working with: $scope.SACCodes = [ {'code':'023', 'description':'Spread FTGs', 'group':'footings'}, {'code':'024', ' ...

Performing an ASync call to the GetData routine in MongoClient using NodeJS

Combining code snippets from https://www.w3schools.com/nodejs/nodejs_mongodb_find.asp and https://stackoverflow.com/questions/49982058/how-to-call-an-async-function#:~:text=Putting%20the%20async%20keyword%20before,a%20promise%20to%20be%20resolved. Upon ob ...

Tips on incorporating a color picker in HTML using jQuery

Looking to implement an HTML color picker with the help of JQuery. Wondering if there is a simpler method to do this without relying on external JQuery libraries? Experimented with <input type="color"> but encountered issues that prevented it from ...

Alternative for Jquery: a new Hash Table solution using Prototype JS

Greetings everyone! I have experience as a prototype JS developer but now I am transitioning to jQuery for work/client reasons. One feature I really liked in Prototype was the Hash class, such as var h = new Hash();. However, I understand that jQuery doe ...

Using ui-sref to transmit data attributes

Is there a way to pass extra data into the controller from within ui-sref? Currently, I am iterating through a JSON object and including data in the sref: <a data-imgName="{{ img.name }}" data-imgDesc="{{ img.desc }}" ui-sref="main.imgDesc({imgid: &apos ...

Quick inquiry about referencing state variables in the render method in React Native

Initially, I assumed it was just a simple syntax error, but now I'm beginning to think that it might be related to a bigger concept concerning hierarchy and inheritance. I am currently working on an app in react native (expo) where I aim to display a ...

Implementing access restrictions for modules in NodeJS

In Node, is it possible to limit access or permit access only to specific modules from a particular module? Should I consider replacing the require function and object in the global scope for this purpose? I have concerns about the security of a certain mo ...

Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...

What makes fastify-plugin better than simply calling a regular function?

I recently came across a detailed explanation of how fastify-plugin operates and its functionality. Despite understanding the concept, I am left with a lingering question; what sets it apart from a standard function call without using the .register() metho ...

Modify the contents of a textbox by editing the text as you type

Text within the text box follows this format: login -u username -p password When entering this text, I want to substitute 'password' with a series of '*'s equal in length. For example: 'login -u <a href="/cdn-cgi/l/email-prot ...

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...