Unable to submit AngularJS form - experiencing technical difficulties

I am encountering an issue with a form that takes input for the name of a country and should update a global variable. However, when the submit button is clicked, nothing happens. Can someone point out where I am going wrong? Below is the HTML code snippet:

<div ng-controller="InputController">
        <form class="form-wrapper cf" role="form">
            <input type="text" ng-model="model.country" placeholder="Search country..." required>
            <button type="submit" ng-click="update()">Search</button>
            <span>{{model.country}} ======</span>
        </form>
    </div>

Here is the corresponding controller code:

LastFmApp.controller('InputController',
function InputController($scope) {
    $scope.model = {};
    $scope.update = function() {
        console.log($scope.model.country);
    };
});

Answer №1

The problem doesn't seem to be related to AngularJS. When you click the submit button, the page refreshes and any changes made to your model will not be visible.

One solution is to use an input button with ngClick:

<input type="button" ng-click="update()">Search</input>

Another option is to use an input submit with ngSubmit attribute in your form:

<form ng-submit="update()">
   <input type="submit">Search</input>
</form>

Answer №2

It appears that your code is functioning properly as it is working in Plunker. You can view your code here.

<div ng-controller="InputController">
        <form class="form-wrapper cf" role="form">
            <input type="text" ng-model="model.country" placeholder="Search country..." required>
            <button type="submit" ng-click="update()">Search</button>
            <span>{{model.country}} ======</span>
        </form>
    </div>

To see your code in action on Plunker, click here.

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

Switch the design and save it in the browser's cache

Exploring the possibility of having two themes, "dark" and "light," that toggle when a checkbox is clicked. To implement the theme change, I used the following JavaScript code: document.documentElement.setAttribute('data-theme', 'dark&apos ...

The setInterval() function within a jQuery dialog continues running even after being destroyed or removed

I'm facing an issue with a jQuery dialog that loads an external page and runs a setInterval() function querying the server continuously every second via AJAX. The problem arises when I close the dialog, as the setInterval keeps running. Below is the ...

Is it better to Vuex - manipulate store item twice, trigger new items, or perform transformations within components each time they are mounted?

I am considering performing two separate transformations on a single, large store item and then saving the results as two new store items. For instance: setEventsData: (state, data) => {...} // main huge master object // perform transformations on it an ...

Can the Disqus API be leveraged to retrieve comments from a particular website address?

It is my preference to accomplish this task solely with client-side JavaScript scripting, if feasible. ...

Tips for switching the background image in React while a page is loading?

Is there a way to automatically change the background of a page when it loads, instead of requiring a button click? import img1 from '../images/img1.jpg'; import img2 from '../images/img2.jpg'; import img3 from '../images/img3.jpg& ...

function complete, ajax request finished

When working with Ajax to get data, I encountered a situation where I needed to return the value of `username` from within an if statement that is inside a loop and a function. How can I achieve this? Your help would be appreciated. $.ajax({ ...

Showing perspectives that include 'partial'/'nested' components in EXTjs 4

I am struggling to comprehend how I should define and implement the MVC model for my test application in EXTjs4. Let's take a look at the structure below. app.js Ext.application({ name: 'AM', appFolder: 'app', control ...

Exploring the Angular approach to accessing the ng-repeat value from within a directive

I am looking to create a list generated by ng-repeat. Each item in the list will have a name and an input field for a number. My goal is to be able to update this number using a directive, but I'm unsure of how to access this value from within the di ...

The form does not display the radio button value upon submission

Using redux form for the form elements, I encountered an issue where the radio button values were not being displayed when submitting the form. Despite getting values for email and password fields, the role value from the radio buttons was missing. In my i ...

Memory leaks observed in BinaryJS websockets

Currently, I am in the process of developing a simple client/server setup to facilitate the transfer of image data between a browser and a node.js server using BinaryJS websockets. Despite following the API examples closely, it seems that my implementatio ...

Trouble with useEffect not triggering in NextJS 13.4 (app router) application

When trying to fetch data from the next API route, I encountered an issue where the useEffect method did not trigger on page reload. Additionally, I was unable to make this component async as Next.js does not allow async functions in client components. pa ...

Move on to the following iteration within a (Typescript) .forEach loop by using setTimeout

Within my array, I have a list of image URLs that I need to update the src attribute of an img tag every 10 seconds. To achieve this, I am using a forEach loop which includes a setTimeout function that calls a DOM manipulation function (replaceImage) as sh ...

When I hover over div 1, I am attempting to conceal it and reveal div 2 in its place

I need help with a CSS issue involving hiding one div on mouse hover and showing another instead. I attempted to achieve this using pure CSS, but both divs end up hidden. Would jQuery be necessary for this task? Below is the CSS/HTML code I wrote: .r ...

Issue with AjaxSetup overlapping with jqgrid

How can I set up global AJAX calls using ajaxsetup without interfering with the functionality of jqgrids on my website? I want to apply the code below to my AJAX calls, excluding those related to jqgrids. $.ajaxSetup({ type: "POST", contentType: ...

Utilizing Cookies in an AJAX Request for Cross-Domain Communication with Pure Javascript

I am in the process of developing an Analytics application and I'm seeking a method to uniquely identify each user's device. Currently, my approach involves generating a "cookie" from the server side to track all page clicks and interactions thro ...

Creating distinct identifiers for table cells utilizing the map function

Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...

Issue: Unable to locate the module 'nexmo' & error TS2307: 'nexmo' module not found

Currently, I am utilizing the powerful NestJs Framework alongside typescript. My task involves incorporating two-factor authentication (SMS) using the Nexmo node library. You can find further information on their website: During the development phase, ev ...

Issue with Angular Factory not being invoked

I am currently using a tutorial to create a MEAN app with Google Maps. However, I have encountered an issue where the map is not appearing on the page. Surprisingly, there are no errors in the browser console and even when debugging with node-inspector, I ...

The PDF structure in vue3-pdf is not valid and may cause errors

This error is occurring on almost every file, except for one that works fine. The console also displays the following warning: Warning: Indexing all PDF objects. Object { message: "Invalid PDF structure.", name: "InvalidPDFException", ...

What is the best way to navigate a dynamic table in Vue.js?

I'm currently working on creating dynamic tables in Vue using loops where users can upload a table and view it. <el-table :data="filtered" border style="width: 100%" height="500" @selection-change="handleSelectio ...