Having trouble retrieving the value from the input field with Angular.js

I am having trouble retrieving the value from an input field using Angular.js. Below is the code explanation.

Here is my controller code:

$scope.shipping=0;
$scope.addProductInfoData=function(billdata){
        console.log('valid',$scope.shipping);
}

And this is my view part:

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Shipping charge :</span>
<div ng-class="{ 'myError': billdata.ship.$touched && billdata.ship.$invalid }">
<input type="text" name="ship" id="shippingcharge" class="form-control" placeholder="Add shipping charge" ng-model="shipping" ng-keypress="clearField('shippingcharge');" ng-pattern="/^[0-9]+([,.][0-9]+)?$/">
<div style="clear:both;"></div>
</div>
</div>
<div class="help-block" ng-messages="billdata.ship.$error" ng-if="billdata.ship.$touched || billdata.usp.$error.pattern">
<p ng-message="pattern" style="color:#F00;">This field needs only number(e.g-0,1..9).</p>
</div>
<input type="button" class="btn btn-success" ng-click="addProductInfoData(billdata);"  id="addProfileData" value="Add"/>

Upon clicking the add button, I should see the shipping value as 0 in the console message. However, it currently shows as undefined. Can someone please assist me in resolving this issue?

javascriptangularjs

Answer №1

Your shipping_status has not been defined, which is why it currently shows as undefined. This could be due to a typo in the variable name or because you meant to reference $scope.shipping.

To correct this issue, update your code from:

console.log('valid',$scope.shipping_status);

to:

console.log('valid',$scope.shipping);

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

Unable to invoke functions in the child window

In my Vue page, I have a script that opens a child window using the code snippet below: this.presentation = window.open( this.$router.resolve({name:'presentation'}).href, 'child window', 'width=auto,height=auto' ) ...

javascriptvue.jsvuejs2vue-router

Storing dropdown selection in database using Laravel form and AJAX

In my controller (FocalController.php), I have generated a dropdown list using the following code: $focalData = DB::table('role_users')->orderBy('users.id','DESC') ->leftJoin('users', function($j ...

javascriptphpjqueryajaxlaravel

Should the ListItem expand and collapse when clicked?

My react/material-ui component has the following structure: export const TodoItem: React.FC<Props> = ( {todo, itemKey}) => { const [dialogState, setDialogState] = React.useState<boolean>(false); const handleClose = () => { setDial ...

javascriptreactjsmaterial-ui

One beneficial aspect of utilizing JavaScript closures for events is when defining a click event

There are two common ways to write code in JavaScript that accomplish the same task: Option A. SomeObject.prototype.hideElement = function(e, element){ e.stopPropagation(); hide(element); } Option B. SomeObject.prototype.hideElement = function( ...

javascript

Error Message: Unable to access properties of an undefined object while interacting with an API in a React application

Creating a Weather application in React JS that utilizes the OpenWeatherMapAPI to display dynamic backgrounds based on the API response. I need to access the data at 'data.weather[0].main' which will contain values like 'Clear', ' ...

javascriptreactjsjsonapi

VueJS does not support certain characters in its JavaScript replace function

In my current situation, I am utilizing the replace method in the following manner: <code v-html="'/<try>/'.replace(/(?:\r\n|\r|\n)/g, 'testing')"></code> As I work with a longer string t ...

javascriptvue.jsvuejs2vuejs3

Encountering a problem when trying to send an API request for multer in order to save

I encountered an issue with my node API that uses multer to store files. I am receiving an error when calling it and seeking assistance. Below is the code snippet along with the specific error message - Code - const storage = multer.diskStorage({ d ...

javascriptnode.jsexpressmulter

Maintain checkbox state through page reloads using ajax

Currently, I am troubleshooting a script that is intended to keep checkbox values checked even after the page is reloaded or refreshed. The code snippet below was implemented for this purpose, but unfortunately, it doesn't seem to be functioning corre ...

javascriptajax

javascript/jquery: ensure Android device displays content in full-screen mode

Currently working on developing a web app specifically for an android device that needs to be displayed in fullscreen mode. I came across the code snippet above on stack overflow, which successfully activates fullscreen mode upon click event. However, I a ...

javascriptandroidjqueryfullscreen

Use the onclick event to submit a form, ensuring that it can only be submitted once

For a form, I am configuring the action and triggering submission using the onclick event of a div: <div class="action_button" onclick="document.forms['test'].action='url/to/action';document.forms['test'].submit()"> < ...

javascriptjqueryformsonclick

How to implement scrollIntoView in Vue 3 with script setup

Having some trouble with scrolling to a specific element when clicked. I keep getting this error message. Uncaught TypeError: element.scrollIntoView is not a function Here is my script <script setup> import { ref } from 'vue' function goT ...

javascriptvue.jsvuejs3vue-composition-apijs-scrollintoview

Tips for surviving a server restart while using sequelize with a postgres database and handling migrations

Within my express application, I utilize Sequelize for database management. Below is the bootstrap code that I use: db.sequelize .sync({ force: true}) .complete(function(err) { if (err) { throw err[0]; } else { //seed requi ...

javascriptnode.jssqlitepostgresqlsequelize.js

Attempting to access an avatar image via an API, only to encounter an error message indicating that the avatar is not defined

userData is a function that retrieves user data from an API using getUserByChainAccount. The username required by getUserByChainAccount is dynamically fetched from buyer. I'm trying to access the avatar, but I keep encountering the error message Unha ...

javascriptreactjsnext.js

Is there a built-in constant in the Angular framework that automatically resolves a promise as soon as it

I'm facing a situation where I have code that checks a conditional statement to decide if an asynchronous call should be made. If the condition is not met, the call is skipped. However, I still need to perform some final action regardless of whether t ...

javascriptangularjs

What is the process for updating button text upon clicking in Angular?

To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error. import { Component } from '@angular/core ...

javascriptcssangular

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

My data table is massive, filled with an abundance of information. Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have ...

javascriptjqueryhtmlcssjquery-ui

Firefox displays an error when using jQuery.load(), but Chrome functions properly without any issues

I have created a function that opens a page in a dialog box instead of the main window. The code has been cleaned up and here is the revised version: var baseUrl = window.location.origin + '/static/docs/'; function handleLinkClick(event) { ev ...

javascriptjqueryajaxgoogle-chromefirefox

JavaScript string: Use regex to find and replace with position index

I'm not very familiar with regex, so I'm curious about the process of replacing a section in a string based on a regex pattern where the index is part of the identified section. Let's consider this example string: let exampleStr = "How do ...

javascriptarraysregexstring

Changing text array to field identifiers with JavaScript

Is there an elegant way in ECMAScript 6 to transform a string array generated from a map function into field names within a dynamically created object? For instance, if I receive the following output from my map function: ["checkbox1Value", "checkbox4Val ...

javascriptecmascript-6

choose a value from a dropdown menu to reset other dropdowns to their default values

I am encountering an issue with my PHP form that consists of 7 dropdown lists. Whenever I select a value from one of the dropdown lists, I want the other 6 to reset to their default values if they were previously opened. I believe using JavaScript is neces ...

phpjavascript