What is the method for retrieving a specific value following the submission of an AngularJS form?

Here is how my form begins:

    <!-- form -->
    <form ng-submit="form.submit()" class="form-horizontal" role="form" style="margin-top: 15px;">
            <div class="form-group">
                <label for="inputUrl" class="col-sm-2 control-label">URL</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputUrl" name="inputUrl" ng-model="form.url" />
                </div>
            </div>
</form>

and the accompanying js controller starts like this:

$scope.form = {};

$scope.form.submit = function() {

        console.log($scope.form);
        var url = $scope.form[url];
        console.log("Url is  " + url);
}

The variable 'url' appears as undefined in the console. How can I rectify this?

Answer №1

Hey there! You forgot to include the name attribute in the form tag. Take a look:

<!-- form -->
<form ng-submit="form.submit()" class="form-horizontal" role="form" style="margin-top: 15px;" name="form">
        <div class="form-group">
            <label for="inputUrl" class="col-sm-2 control-label">URL</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputUrl" name="url" ng-model="form.url" />
            </div>
        </div>
</form>

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

Can an image be scanned pixel by pixel to extract and store each pixel's color in an array mapped by its coordinates?

Currently, I am working on a browser game where I have created a pixel map as a coordinate system. Each color on the map represents a unique terrain type with specific values that impact different aspects of the game. I'm looking for a solution using ...

Click on the input field to give it focus before adding a class during the page

Alright, so here's the deal - I have an input field with the class .cf-se-input. I want this field to be focused using jQuery as soon as the document is ready. Additionally, if the field is focused either by the user clicking on it or through jQuery f ...

Move the Form to the Top of the Window and Highlight the First Input Field

There's a link in the header that says "Let's chat": <div class="letstalk"> <a href="javascript:scrollForm();"> Let's chat <img src="/wp-content/uploads/link-icon.png"> </a> </div> ...

button to dim the image collection

On the top right corner of my image gallery, there's a button that, when clicked, creates an overlay darkening the image. I'm trying to figure out how to toggle this effect on and off with a click. Any suggestions on how I can achieve this? Here ...

A pair of demands within an express service

Currently, I'm facing an issue in a project where I am attempting to create a service using Express that makes two external API calls. However, I am encountering an error in Express that is difficult to comprehend. It seems like my approach might be i ...

Display an input field in VueJS with a default value set

Dealing with a form containing various editable fields, I devised a solution. By incorporating a button, clicking it would conceal the label and button itself, while revealing a text box alongside a save button. The challenge lays in pre-filling the textbo ...

Learn the process of creating an amchart pie chart with dynamic JSON data

I receive JSON data: {"Excellent":"5","NeedsImprovement":"14","Average":"9"} What is the best way to represent this data using an AmCharts Pie chart or donut chart with AngularJS? ...

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

The Uglify task in Grunt/NPM is having trouble with this particular line of JavaScript code

Whenever I execute grunt build, Uglify encounters a problem at this point: yz = d3.range(n).map(function() { return k.map(x -> x[1]); }), An error message is displayed: Warning: Uglification failed. Unexpected token: operator (->). I have recentl ...

There seems to be an issue with the $scope variable not being properly updated within the function in

<button class="button button-primary" ng-click="updateSchedule(controlCenter.selected)"> Update Schedule </button> Calling the updateSchedule function from the button $scope.data = []; $scope.updateSchedule = function(selectedData) ...

Mastering the art of resolving a dynamic collection of promises with '$.all'

Imagine having 3 promises and passing them to $q.all. This results in a new promise that resolves when the 3 promises are resolved. But what if I realize before the 3 promises resolve that I also want a 4th promise to be resolved? Can this be achieved? I ...

Can you suggest a more efficient method for retrieving data from a string?

Imagine having an array of strings with various information, and you need to extract specific details from them. Is there a simpler method to achieve this task? Consider the following array: let infoArr = [ "1 Ben Howard 12/16/1988 apple", "2 James S ...

Error in Cross-Origin Resource Sharing (CORS) encountered when trying to

Below is the code snippet provided: app.js: const passport = require('passport') , FacebookStrategy = require('passport-facebook').Strategy , ... passport.serializeUser(function(user, done) { console.log('serializing user&a ...

Generating a unique user ID similar to Zerodha's user ID using Node.js/JavaScript

For a project I'm working on, I need to create random and unique User IDs. I came across Zerodha's user IDs which are easy to remember. In Zerodha user IDs: The first two characters are always letters followed by four numbers. I want to generat ...

Performing calculations within handsontable

Trying to figure out how to concatenate values from a handsontable grid, I stumbled upon some code on jsfiddle that caught my eye. Here is the link: http://jsfiddle.net/9onuhpn7/4/ The task at hand involves 3 columns A,B,C and an attempt to concatenate ...

Is there a way for me to conduct multiple counts and choose the highest one especially if they are all promises?

Here is my voting controller for a post. If the user has not already voted on the post (their voterId is not in the votes array), their vote is added by adding their voterId to the votes array of the post. The voteCount is then reset to the length of that ...

Tips for patiently waiting for an axios request to finish

Within my vuejs application, I am faced with the challenge of initializing an object using data retrieved from an ajax call: let settings = {} api.readConfig().then((config) => { settings = { userStore: new Oidc.WebStorageStateStore(), author ...

How can `localePath()` be utilized to create a dynamic route with Nuxt i18n?

I currently have this route set up in my i18n.config.js: { pages: { 'rental/_id': { nl: '/verhuur/:id', en: '/rental/:id', de: '/mietbestand/:id', }, } } When attempting to link to this page in my ...

Vue alert: A duplicate key with the value of '10' has been identified. This could potentially lead to an issue with updates

I've been encountering a persistent error that I can't seem to resolve: [Vue warn]: Duplicate keys detected: '10'. This issue is causing an update error in my application. Despite trying the following steps, the error continues to appe ...

Guide on sending a JSON response from a POST request in JavaScript

After creating an API in Django that provides a JSON response based on a variable entered in the URL, I encountered a challenge with fetching and displaying this data using JavaScript. For instance, consider this URL: A sample of the JSON response looks ...