Angular's ngSubmit is malfunctioning

Check out this code snippet:

<form data-ng-submit="ctrl.filter()" novalidate="true" class="search-filter ng-valid ng-dirty ng-valid-parse">
          <fieldset>
            <div class="search-filter-group">
              <div class="search-field-group">
                <div class="text-field">
                  <input type="text" placeholder="Type some text" data-ng-model="ctrl.searchString" class="ng-valid ng-touched ng-dirty ng-valid-parse">
                  <div data-ng-click="ctrl.resetFilter()" class="action-button reset-button">Reset</div>
                </div>
              </div>
              <input type="submit" value="Find" data-ng-class="{disabled: !ctrl.canFilter()}" class="button">
            </div>
          </fieldset>
        </form>

After clicking the submit button, I noticed that the 'ctrl.filter()' function didn't trigger. However, upon adding data-ng-click="ctrl.filter()" to the submit input, it started working. Why is this happening?

javascriptangularjs

Answer №1

<div id="example" ng-app="StackM">
<div ng-controller="StackC as ctrl">
    <form data-ng-submit="ctrl.filter()" novalidate="true" class="search-filter ng-valid ng-dirty ng-valid-parse">
      <fieldset>
        <div class="search-filter-group">
          <div class="search-field-group">
            <div class="text-field">
              <input type="text" placeholder="Type some text" data-ng-model="ctrl.searchString" class="ng-valid ng-touched ng-dirty ng-valid-parse">
              <div data-ng-click="ctrl.resetFilter()" class="action-button reset-button">Reset</div>
            </div>
          </div>
          <input type="submit" value="Find" data-ng-class="{disabled: !ctrl.canFilter()}" class="button">
        </div>
      </fieldset>
    </form>
</div>


<script>
angular.module("StackM", [])
    .controller("StackC", function($scope){
        this.filter = function(){
          var a = this.searchString
            debugger;
        }

    })

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

Using <span> tags to wrap sentences within <p> tags while maintaining the rest of the HTML formatting

In order to achieve my goal, I have utilized the following code to extract content within tags and encapsulate each sentence in tags for easier interaction. $('p').each(function() { var sentences = $(this) .text() ...

javascriptjqueryregexparsinghtml-parsing

FAB Toolbar - Stuck halfway and won't fully open

I have implemented a FAB Toolbar component in the lower right corner of the screen. It is overlaying the scrollable content (represented by the <div> here). The hovering behavior over the content seems to be working correctly, and the positioning app ...

angularjsangular-material

set available date with angular bootstrap datetimepicker

Currently, I am utilizing an angular bootstrap datetimepicker plugin that can be found at https://github.com/dalelotts/angular-bootstrap-datetimepicker. My goal is to configure the calendar so that only dates within the range of today and seven days in t ...

htmlangularjs

Showing PHP array in the JavaScript console

I have a straightforward AJAX script that sends 3 variables to an external PHP script. The external script then adds them into an array and sends the array back. I want to output this array in the JavaScript console to check if the variables are being pass ...

javascriptphpjqueryajax

Updating the image source URL dynamically inside a division within a script using JavaScript

I'm attempting to insert a dynamic URL within an img src tag. Below is my HTML and Script code. When a tab is clicked, a GET HTTP Method is called, which responds with an image URL. I want to use this image URL in the img src field. HTML Code ...

javascripthtmlajax

Can transitions be applied to links in this manner?

Having an issue with ajax requests, I am currently resorting to using JavaScript linking. This is how I normally link: window.location.href = ('file:///android_asset/www/custom/kontakty.html'); I am curious if it's possible to add a transi ...

javascriptjqueryjquery-mobile

Fixing a div at the top post scroll - bug on iOS mobile device

I am looking to achieve a similar effect as demonstrated in the example below: https://css-tricks.com/scroll-fix-content/ Essentially, the goal is to have a div become fixed at the top of the page after scrolling to a certain point. Initially, the div wil ...

javascriptjqueryhtmlcss

Is there a way to search through an array of object arrays in JavaScript for a specific key/value pair using lodash or any other function?

I am faced with a task involving an array of objects. Each object has a key that needs to be used to search through sets of arrays containing similar objects. The goal is to determine if all the arrays contain the same value for a specific key in my object ...

javascriptarraystypescript

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

Encountering an error: "Unhandled promise rejection SyntaxError: Unexpected character in JSON data at line 1 column 1."

When the submit button is clicked, my registration form data is sent using an event function called postData() in React. The user data is sent at the register route, and I have mentioned line numbers in the comments: const postData = async(event) =>{ ...

javascriptjsonreactjsexpressmern

Guide on utilizing protractor to confirm equality of two spans in varying positions?

<span ng-bind="locations.selectedCount" class="ng-binding">1005</span> <span ng-bind="locations.selectedCount" class="ng-binding">1005</span> What method can I use in Protractor to verify that the values of these two spans are ide ...

javascriptangularjstestingselenium-webdriverprotractor

Changing the ID of a textbox can be done by modifying the corresponding

I need to dynamically generate textboxes, checkboxes, and buttons based on user input during runtime. Users should be able to delete a specific textbox, checkbox, and button by clicking a button. The creation process is working correctly. However, when ...

javascript

Using Webdriver to dynamically enable or disable JavaScript popups in Firefox profiles

I am currently working on a test case that involves closing a JavaScript popup. The code functions correctly in a Windows environment, but when I try to deploy it on a CentOS based server, I encounter the following error: Element is not clickable at point ...

javascriptjavaseleniumfirefoxwebdriver

Integrating Express into a React Webpack project

I am currently in the process of integrating express into my React project to establish connections with databases for storing form data. As of now, I am using webpack to create a dev server that displays my React view. My technology stack includes... Web ...

javascriptnode.jsreactjsexpresswebpack

Error: Unable to extract the 'id' property from 'this.props.Name' because it is undefined in ReactJS

Can you please assist me in resolving this issue? Error: Cannot destructure property 'id' of 'this.props.Name' as it is undefined. src/component/Detail.js file import React, { Component } from 'react'; import { Character } f ...

javascriptreactjs

Tips for aligning the timer on a client's webpage with the server

What is the most effective method to synchronize the time displayed on a webpage with the server? My webpage requires that a countdown begins simultaneously for all users and ends at precisely the same time to avoid any user gaining a time advantage. Whi ...

javascriptajaxtimesynchronizationclient-side

Access-Control-Allow-Headers does not allow the use of X-Requested-With

I'm currently working on a system that includes an add item to cart feature. This functionality involves using Jquery's $.ajax method. However, I've encountered an error when attempting to access the online server - "XMLHttpRequest canno ...

javascriptphpjqueryajaxcross-browser

Display or conceal a div depending on the value of an integer stored in the $scope variable

Consider the ng repeat pattern below: <div class="presentForm" id="presentForm{{$index}}" ng:repeat="slide in slides" style="display: block;"> <img id ="presentationSlide" ng-src='{{slide}}' style="height: 300px" width ...

javascriptangularjs

Creating an associative array in javascript: A step-by-step guide

I require an array to be structured in the following manner: {"3": {"label":"All i want for christmas", "song":"Alliw_1405399165.mp3", "name":"All i want for christmas"}, "4": {"label":"Call your girlfriend robyn clip", "song":"Gang ...

javascriptarrays

AngularJS Modal Button

After adding a button and writing the necessary code for implementing a modal in AngularJS, I encountered an issue where the modal was not displaying as expected. Below is the HTML code snippet that I used: <body> <div ng-controller="Mod ...

htmlangularjs