Need help with creating a new instance in AngularJS? Unfortunately, the save method in CRUD is not getting the job done

Whenever I attempt to create a new task, nothing seems to happen and no request is being sent. What could be causing this issue? How can I go about troubleshooting it?

Take a look at how it appears here

Check out the $scope.add function below:

 var app = angular.module('Tasks', ['ngResource', 'xeditable']);

  app.factory('Task', [
    '$resource', function($resource) {
      return $resource('/tasks/:id', {
        id: '@id'
      }, {
        update: {
          method: 'PUT'
        }
      });
    }
  ]);

  this.TasksCtrl = [
    '$scope', 'Task', function($scope, Task) {

      $scope.add = function() {
        var task;
        task = Task.create($scope.newTask);
        $scope.tasks.push(task);
        return $scope.newTask = {};
      };
  ];

Below is my html code snippet:

<div ng-controller='TasksCtrl' class='tasks-container'>
  <form ng-submit='add()'>
    <input type='text' ng-model='newTask.title'/>
    <button type='button' class='btn btn-default btn-sm'>
      <span class='glyphicon glyphicon-plus'></span> Add
    </button>
  </form>

Answer №1

Make sure to include a submit button in your form if you are using the ng-submit directive. Without a proper submit button, the form will not be submitted as expected. Update your code like this:

<button type='submit' class='btn btn-primary btn-sm'>

With these changes, your form should now submit correctly.

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

Encountered a 'File is not defined' error in JavaScript when running code from the node.js command line

I'm encountering an issue with my JavaScript code that is supposed to read a file and print it on the console. Despite having the file test.txt in the same path, I keep getting an error saying "File is not defined." Below is the snippet of the code: ...

Button click triggers CSS animation

Check out the interactive demo $(document).ready(function(){ $('#btn-animate').click(function(){ animate(); }); $('#btn-remove').click(function(){ $('.to-animate').removeClass('animate'); }); func ...

Guide to making a Java Servlet for a specific jQuery.ajax () request?

In one of my files named wfd.proxy.js, I have the following code snippet: if (!WFD) { var WFD = {}; }; if (!WFD.Proxy) { WFD.Proxy = {}; }; WFD.Proxy = { SERVICE_URL : "/delegate/WFD/WFService?", PDF_SERVICE_URL : "/delegate/pdf-exporter?", ...

Utilize both a model and a boolean variable within expressionProperties in Formly configuration

I'm having trouble setting formly form fields to disabled based on model properties and a boolean variable. The code snippet I've tried doesn't seem to be working as expected. expressionProperties: { 'templateOptions.disabled' ...

Utilize Next.js with Axios for making an HTTP request to a Laravel Lumen endpoint, then showcase the retrieved data within the Next.js

I currently have a Next.js application that utilizes Axios to make calls to Lumen endpoints. The Axios HTTP client functions are organized in a separate folder named services/index.tsx, with sample code as follows: export const register = async (payload: a ...

Collaborating on validating inputs and modules for both backend and frontend

Sharing input validation is crucial for various reasons: Immediate feedback to users on the frontend regarding the validity of their input Enhanced security measures in the backend, preventing manipulation of data through the API Dependency on frontend J ...

What is the best way to receive the information that was transmitted to me through a callback function?

While web development is not my strong suit, I have a question that might sound silly, so bear with me as I explain. Once the user selects their desired purchase, an API call is made to generate a trans_id and redirects them to the bank's payment pag ...

Getting AJAX data in PHP: A comprehensive guide

As a student, I am working on creating a simple form for my website that will utilize ajax to save the submitted details to the database using PHP. I prefer not to use any external libraries like jQuery. Although I have successfully implemented the ajax "g ...

Creating a custom decision tree in Angular/JS/TypeScript: A step-by-step guide

My current project involves designing a user interface that enables users to develop a decision tree through drag-and-drop functionality. I am considering utilizing GoJS, as showcased in this sample: GoJS IVR Tree. However, I am facing challenges in figuri ...

What is the best way to modify an array within separate functions in a NodeJS environment?

I am facing an issue where I want to update an object inside the fetchAll() functions and then send it back after successful updation. However, the response I receive is '[]'. var ans = [] Country.fetchAll(newdate,(err, data) => { if ...

Design a custom Bootstrap dropdown using an input[type="text"] element

After exploring the Bootstrap dropdown example here, I realized that for my particular scenario, it would be more beneficial to have an input field (type="text") instead of a button. This way, I can display the selected option from the dropdown. Is there ...

Mastering React Final Form: Displaying data using a button placed outside the form

I have a query regarding integrating my form component (<InvoiceForm.tsx />) with a button component (<Button.js />) to save its data in the database. The button component is located in another component called <InvoiceList.tsx />, which ...

My jquery is malfunctioning when trying to retrieve values

I am facing an issue with accessing server-side values in my jQuery function. When I use my localhost path (NewsRecord.php) as the AJAX URL, it works fine. However, when I use the server path, it does not work. The strange thing is that the server URL pr ...

Deactivate or Conceal certain ng-options within angularjs

I am facing an issue with my dropdown box. I want to add an input box once an option is selected, but then disable/hide/remove that option once the input box is added. And then enable the option again once the input box is removed. Is using the disabled ex ...

Is there a way to incorporate multer middleware into my express controller without using the router?

This is the structure I typically follow when writing controllers and routes using Express controller exports.postBlog = async (req, res, next) => {...} routes router.route("/post").post(onlyAdmin, postBlog); *onlyAdmin serves as a middlewa ...

The background failed to display (potentially due to a hovering function)

I encountered an issue with a div that has a background image. Upon loading the page, the background image fails to display initially. However, when I hover over the div and then move my mouse elsewhere (due to a specific function described below), the bac ...

Efficiently run multiple Node-written apps on a single server

I currently have a single VPS and would like to host multiple node.js apps on it, similar to how Apache or Nginx works. I am using Nginx as a proxy, but I have concerns. As you know, one of the key features of Node.js is its non-blocking I/O and sing ...

Displaying a variable in a live HTML user interface

I have successfully created a Python program that captures data from an Arduino Potentiometer and shows it on the Python console. Now, I am working on enhancing the output by displaying it in a local HTML file. I am seeking guidance on how to incorporate t ...

If the element is checked and equal to a specific value, take action

I am trying to hide one of the 3 radio buttons on my page. Although they all have the same class, each button has a different value. I attempted to write code to achieve this, but unfortunately, it is hiding all radio buttons instead of just one. Could s ...

Best methods for deleting an element's attribute or style attribute

Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...