The function did not receive the parameter when ng-submit was executed

I created a function called reset(username) to log whatever is entered into the input field with ng-model="username". However, I am not seeing anything in the console. Why is that happening?

Here is my function:

$scope.reset = function (username) {
   console.log(username);
};

And here is how I submit the form:

<form name="Form" ng-controller="ResetController" ng-submit="reset(username)">
<div>
   <div class="row top5">        
      <label for="username">Username</label>
      <div class="col-xs-4">
         <input type="text" id="username"  placeholder="" maxlength="255"
          ng-model="username" required autofocus>
      </div>  

   <div>
      <div class="col-xs-5">          
         <button translate class="btn btn-secondary" type="submit">Reset</button>
      </div>
   </div>
</div>   
</form>

As requested, here is the controller:

app.controller("ResetController", function ($scope) {
   $scope.username='';
   $scope.reset = function (username) {
      console.log('username = ', username);
   };
});

Answer №1

I think it's important to have the ng-app set up correctly and to consider manipulating inputs as properties of an object rather than directly through $scope. Take a look at this resource for more insights. You can see in the code how the username is attached to $scope.object.username

var app = angular.module('myApp', [])

app.controller('ResetController', ['$scope', function($scope) {

    $scope.object = {};
    $scope.reset = function(username) {
        console.log(username);
    };

}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="Form" ng-controller="ResetController" ng-submit="reset(object.username)">
<div>
    <div class="row top5">        
        <label for="username">Username</label>
        <div class="col-xs-4">
            <input type="text" id="username"  placeholder="" maxlength="255"
            ng-model="object.username" required autofocus>
        </div>  

    <div>
        <div class="col-xs-5">          
            <button translate class="btn btn-secondary" type="submit">Reset</button>
        </div>
    </div>
</div>  
</form>
</div>

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

Move divs that are currently not visible on the screen to a new position using CSS animations

Upon entering the site, I would like certain divs to animate from an offscreen position. I came across this code snippet: $( document ).ready(function() { $('.box-wrapper').each(function(index, element) { setTimeout(function(){ ...

Why won't my redux application store the results of an asynchronous API request using redux-thunk's caching mechanism?

I am new to using Redux in my project. Currently, I am developing an application that displays a list of soccer leagues in each country. The process involves fetching a list of countries first, then using the country names to fetch the soccer leagues. Not ...

What steps do I take to include alternative text for images I insert within the content?

Ensuring all my images have alt text is important, but I overlooked this when I added my background images to the CSS under the body tag. The following code shows the background image in my CSS that needs alt text: body { background: url('contact ...

The duration spent on a website using AJAX technology

We conducted an online survey and need to accurately calculate the time spent by participants. After using JavaScript and PHP, we found that the calculated time is not completely accurate. The original script was sending server requests every 5 seconds to ...

User-Preferred Dark Mode Toggle Using Material-UI and Fallback Option

I am working on implementing a toggle for "dark mode" that is functioning well. However, I want the initial state to reflect the user's dark/light preference. The problem is that prefersDarkMode seems to be set to false when the page loads. It only c ...

Utilizing DOMStringMap data to populate CSS URLs

I am attempting to create a universal CSS modification for a webpage element that resembles: <button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="lo ...

The process of accessing a global JavaScript variable within an AngularJS directive is a common task

I spent some time searching for an article that addresses my specific question but came up empty-handed. My dilemma revolves around accessing a pre-defined JavaScript global variable within an AngularJS built-in directive. Let's say I declare the fo ...

What is the best way to stylize a date using Bootstrap-datepicker?

While this topic is well-known, I have a slightly more complex question regarding it. I have gone through the documentation here. My goal is to display the date in French format (dd/mm/yyyy) and save the value in US format (yyyy-mm-dd). Additionally, I nee ...

Altering the text of dropdown items prior to the ASP.NET autopostback

Recently, I inherited a project from a client that is plagued with some irritating issues. One particular problem involves a dropdown menu that triggers an autopostback event upon selection change, inserting the selected text into a T-SQL query. The troubl ...

Why is useEffect being executed twice?

For some reason, when I try to run useEffect for the first time page load, it ends up running twice. I can't seem to figure out why this is happening. Can someone please provide assistance? I'm currently using React 18 and I need help understand ...

The Threejs Blender exporter is exporting in an incorrect format

I'm attempting to convert a blender model into a threejs JSON format using the provided blender exporter. However, when I try to parse the JSON file, I encounter an error: Uncaught TypeError: Cannot read property 'length' of undefined The ...

Is there a way to determine if a parent of my HTML element possesses a CSS class?

Looking at this HTML code snippet - <div id="parent" class="foo"> <div id="child"> </div> </div> Is there a way to create a test to verify if the child element is utilizing the foo class? I attempted: element .children("#chi ...

including a content tag into an input field within a template

I'm experimenting with the new html5 template tag to create a versatile form that can be used in various situations without relying heavily on javascript. Check out this fiddle to see what I have so far http://jsfiddle.net/684uH/ My objective is to ...

Issue with AngularJS: Local storage not saving updated contenteditable data

My local storage implementation stops working when I attempt to incorporate contentEditable feature. Here is the link to the CodePen for reference: https://codepen.io/zanderbush/pen/WNwWbWe. Any assistance would be greatly appreciated. The functionality w ...

Believing that members possess a certain role when they actually do not

const { Discord, MessageEmbed } = require("discord.js"); module.exports = { name: "ban", description: "bans user from guild", execute(client, message, cmd, args, Discord) { const member = message.mentions.u ...

What could be causing my ajax request to not be successfully compiled?

I seem to be experiencing an issue with this part of my code. Despite trying multiple methods, it still isn't functioning correctly. What steps can I take to resolve this problem? $.ajax({ url: "https://corona-api.com/countries/BR", ...

Closing the Angularstrap dropdown when clicking elsewhere

Is there a method to close an angularstrap dropdown only when clicking outside of it? The current behavior is that it closes when you click inside the dropdown. Thank you ...

What is the best way to send an array of objects to a Jade template?

I'm looking to retrieve an array of objects from MongoDB and pass it to the client... Here is an example object: var objeto_img= { name:'name of the file', ...

Error encountered in my application due to Node.js (Error [ERR_HTTP_HEADERS_SENT]: Unable to change headers once they have been sent to the client)

Experiencing an error message in my application when typing nodeJS. Please assist. , Encountering an error after sending the first POST request while running the app. const express = require('express') const Workout = require("../models/work ...

The persistent connection of Socket.io results in consecutive connections while disregarding other occurring events

My goal is to create a unique web application where users can engage in toroidal chess matches with one another. This is the code from my app.js file on the server side: var express = require('express'); var app = express(); var http = require(& ...