What is the method for retrieving the value of a text field in AngularJS?

I am trying to retrieve the value from a text field using AngularJS when a form is submitted.

However, the code below always returns "undefined".

Here is the HTML snippet:

<form ng-submit="AdvanceSearchSubmit($event)" name="AdvanceSearch" novalidate>
 <p ng-show="!AdvanceSearch.SearchKeyWord.$pristine && AdvanceSearch.SearchKeyWord.$invalid" class="text-danger">Text Cannot Be Empty!</p>
  <div ng-hide="AdvanceSearchModel" class="input-group">
    <input name="SearchKeyWord" ng-model="SearchKeyWord" id="SearchKeyWord" class="form-control" placeholder="Search in timeline...." type="text" required>
      <span class="input-group-btn" ng-click="isAdvanceSearch='false'; SearchPost(0,'true')">
       <button ng-disabled="AdvanceSearch.$invalid" type="submit" name="search" id="search-btn" class="btn btn-flat">
        <i class="fa fa-search"></i>
       </button>
      </span>
     </div>
</form>

First attempt:

$scope.AdvanceSearchSubmit = function(event)
{
    alert(event.SearchKeyWord.value);
};

Answer №1

replace event with SearchKeyWord as an argument

ng-click="PerformAdvancedSearch(SearchKeyWord)"

controller

$scope.PerformAdvancedSearch = function(keyword)
{
    alert(keyword);
};

Answer №2

There is no requirement to pass the event to your AdvanceSearchSubmit function when submitting. The values you need are already accessible within the $scope, such as the ng-model for input fields like ng-model="SearchKeyWord".

alert($scope.SearchKeyWord); //retrieve value directly from `$scope`

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

Starting Array index value at 1 in React js: A step-by-step guide

Is there a way to make the index value start from 1 instead of 0? {props.useraccountListData.useraccountTypeList.map((item, index) => ( {index} ))} The current output is starting from 0, 1, 2. However, I would like it to start from 1, 2, 3... ...

Trouble parsing a long JSON string with JSON.parse and angular.fromJson

I am attempting to replace the angularjs POST request with a standalone JSON response string. Previously, the angular GET / POST requests would automatically convert the response to JSON which worked perfectly. Now, I am trying to store the JSON response ...

Proper Techniques for Removing, Creating, and Storing Referenced Data in Mongoose and Express

The main issue I am facing is that when attempting to delete a Comment, I am unable to locate the index of that specific comment within the post.comments and user.comments arrays as it consistently returns -1. The reason I need to find it is so that I can ...

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

The issue with CSS filter invert not functioning properly in Mozilla Firefox is causing complications

I am currently developing a small Firefox add-on designed to make reading pages at night more comfortable. The goal is to invert page colors without affecting images. Here is the code snippet I am using: document.body.style.filter = "invert(100%)"; var i ...

What is the best way to implement a keypress event in this code?

As a JavaScript and jQuery newbie, I have a question regarding adding a simple key press action to this code. How can I implement functionality where pressing the Right Arrow key takes me to the next image, and pressing the Left Arrow key takes me to the p ...

Tips for simulating a dropdown selection from a remote location

I have multiple dropdown selection menus where changing the option in one menu affects the options in the next menu, and so on. I want to programmatically trigger a change (without user interaction) in the dropdown menu that will activate the JavaScript f ...

Is there a way to incorporate a method into a JavaScript object dynamically without encountering any unusual errors?

I am dealing with an array of JavaScript objects that I need to modify. Here is an example of the initial setup: let headers = [ { text: 'something', value: 'something else' }, { text: 'something1', value ...

Sequelize: Establishing association upon saving without the need to retrieve another object

Suppose I have two tables, parent and child, where the parent has multiple children. They are properly mapped in Sequelize. Now, I need to add a new child to an existing parent. However, I do not have access to the parent instance, only its id. I am aw ...

Experiencing difficulty in transferring array information from a parent component to a child component within an

I'm currently working on a task where I need to pass data from a parent component to a child component. The data consists of an array that is nested within another array. parent.component.html <div *ngFor="let parent of parentArray; index as ...

Utilizing Django in conjunction with Vue to identify and address form validation errors

Utilizing a Django ModelForm with crispy forms for display on the template, upon completion of filling out the fields and clicking Submit, an email is triggered in the backend using Django's send_email functionality. However, the issue arises from th ...

What is the process for incorporating a full-page blog into a blog preview?

I customized a template, but there is a blog section within the div that I am struggling to replicate. Here is the test website for reference: Below is the HTML code for the blog section: <!-- Blog Start --> <section class="section bg ...

Tips for customizing the date format in Vue.js

How can I retrieve the current date in Vue.js? To achieve this, I have utilized the following approach. today_date: new Date().toJSON().slice(0,10).replace(/-/g,'.') The variable today_date will display the date in the format 2019.09.11. Is t ...

When I hover over the content, the image displayed in the tooltip is causing a flickering effect

Dealing with Angular in this situation, my goal is to have an image or video displayed inside a tooltip when hovering over specific content. However, there seems to be a flickering effect before the image renders, making the transition less smooth compared ...

Angularjs not rendering the assigned value

I am having some trouble getting the Xeditable table to function properly. Despite my efforts, I cannot seem to display any values as intended. Here is a snippet of my JavaScript code: app.controller('XeditableCtrl', ['$scope', ' ...

The element in TS 7023 is implicitly assigned an 'any' type due to the fact that an expression of type 'any' is not valid for indexing in type '{}'

I have implemented a select-box that includes options, labels, optgroups, and values. Is my approach correct or is there something wrong with the way I have defined my types? interface Option { label: string value: string selected?:boolean mainGrou ...

Utilize Ajax to transfer an image from an input form to a PHP script

I am currently working on a basic HTML page that includes an image upload form. Here is the code for the form: <input type='file' id='image_uploaded' accept='image'/> <input type='submit' id="upload_image"/ ...

Feeling uncertain about Node, NPM, Bower, and how to set them up for Bootstrap?

Looking to expand my knowledge in web development, I have a solid understanding of HTML, JS, CSS, and server-side programming. However, the concepts of Nodejs, npm, and Bower are still unclear to me. In order to begin a new project, I created a designated ...

Using JQuery, Ajax, and PHP for a secure login system

I need a handler for my login process to verify the username and password in the database and redirect the user to another page if the credentials are correct. I am attempting to achieve this using JQuery Ajax and PHP. I have created a JS script to send t ...

Clicking on the Primary Division

Experimenting with the onclick event on a parent div led me to realize that making the entire div clickable at 100% width is not what I intended. I only wanted the sub div to trigger a specific function. Here's an example: <div id="loginContain ...