Emptying the form input fields

[![output image][1]][1]

I am facing an issue on my webpage where input fields are not getting cleared even after clicking the submit button. I have written a code to read data from a JSON file, display it, take input from users, and display it along with the existing data. However, the input fields are not resetting as expected. Here is the code snippet:

<!DOCTYPE html>
<html ng-app="Provider List">
<head>
<meta charset="utf-8">
<title>Provider's List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
...

And here is the JavaScript code:

<pre><code> var ProviderList = angular.module('Provider List', []);
ProviderList.controller('Controller', function ($scope, $http){
...
});

Answer №1

When binding your inputs with $scope variables, the values will always be present in your controller. As a result, it is crucial to reset these values within the controller.

In the provided code snippet, there seems to be an issue with clearing the wrong variables:

$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';

To rectify this, the bound variables without .people should be cleared to avoid simply resetting variables within the people object.

The correct approach would be:

$scope.last_name='';
$scope.first_name='';
$scope.email_address='';
$scope.specialty='';
$scope.practice_name='';

Answer №2

To start, assign a name to your form such as myForm (this is optional if you are not utilizing AngularJS's form validation).

<form name="myForm" class="form-horizontal" role="form" ng-submit="addRow()"></form>

In the addRow() function within your Angular controller, manually reset all data model values and use $setPristine().

$scope.addRow = function() {
  // Your code for submitting data to the server
  // ...

  // Manual Reset
  $scope.first_name = '';
  $scope.last_name = '';

  // Set Form Pristine (Not required if AngularJS form validation is not being used)
  $scope.myForm.$setPristine();
}

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

Tips for capturing audio in flac codec format using JS/AJAX

Is there a way to record audio in flac codec instead of opus codec? I attempted setting the codec to flac like this: let blob = new Blob(audioChunks,{type: 'audio/ogg; codecs=flac' }); I also tried this: var options = { audioBitsPerSecond : ...

The jQuery navigation consistently unveils the initial option every time

My navigation element looks like this: <ul> <li name='first_item'> <ul> <li>item 1</li> <ul> <li>item 1.1</li> <li ...

The internal cjs loader in node threw an error at line 1078

I'm encountering an error on Windows 10 when running the npm command: node:internal/modules/cjs/loader:1063 throw err; ^ Error: Cannot find module 'D:\mobile-version portfolio\ at Module._resolveFilename (node:internal/modules/cjs/load ...

Ways to display a default view in React

I am working on a React website that has three different routes. My goal is to have the first route, named Home, automatically displayed when a user lands on the site. Below is the code snippet from my App.js: <Router> <Navigation /> <Sw ...

What is the best way to transfer a variable from an iframe to its parent window?

My colorbox parent page includes a TabContainer with various iFrames, and in the case of the second tab, a change is made to the database that requires updating a textbox on the parent window. ...

What is the process for triggering an unordered list when I click on a table data cell within the Hospitals category?

Hi there! I need help with writing a JavaScript function for Hospitals in the code below. When I click on Hospitals, I want to display the values in the unordered list. Expected output: Hospitals--->onclick Bangalore| salem |Goa| Mangalore| Visakhapat ...

The functionality of the "#Next" and "#Prev" features in the Tiny carousel are currently not functioning properly within the MVC project

Looking to implement a simple content carousel using jQuery 2.1.3 in my project. Previously used a non-responsive jQuery content carousel and switched to find a responsive option:Tiny Carousel Added Tiny Carousel's .js and .css files to Bundles.confi ...

How can I arrange images vertically instead of placing them side by side?

I need help figuring out how to display multiple images in a vertical format instead of horizontally in the code below. The images are wide and take up too much space if shown side by side. My coding skills are basic, so specific guidance on where to mak ...

Exploring the search capabilities of input fields that are disabled

Lately, I've been struggling with a search function on my table of information. The trouble started when I made the text in the table editable - now the search function refuses to cooperate. I've tried troubleshooting it from different angles, b ...

Tips for navigating through lengthy webpages using the jQuery onepage-scroll plugin

I recently came across a fantastic plugin called onepage-scroll that almost perfectly fits my requirements. However, I have encountered an issue. Some of my pages, defined within <section> tags, are larger than a single screen. Is there a way to cust ...

Concentrate on the HTML element once it becomes active

I am facing a challenge where I need to focus on a specific input element. However, there is a spinner that appears on page load and remains hidden until certain http requests are completed. All inputs are disabled until the requests are finished. The setu ...

Tips for incorporating the .click function with an overlay

Having some trouble using the .click function in conjunction with jQuery Tools overlay. HTML: <p id="click">Click here:</p> <div class="pop"> <div> <p>Insert text here</p> </div> </div> jQuery func ...

Issue with JS npm package: Unable to use import statement outside a module

I recently attempted to utilize the npm package found at https://github.com/nefe/number-precision. However, despite following the prescribed steps, I encountered some difficulties. After running npm install number-precision --save--dep, I tried impor ...

It appears that Yarn is having trouble properly retrieving all the necessary files for a package

Recently, I encountered a strange issue in our project involving 3 microservices, all using the exceljs library. Two of the microservices successfully download all necessary files for this package through yarn. However, the third microservice is missing ...

Angular array: Cannot access property of undefined - Type Error

Having trouble fetching data from a web service? I keep encountering the same error message that says "ERROR TypeError: Cannot read property 'bu' of undefined", even though the data I want to show is appearing correctly. Check out the response an ...

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

I have a specific object structure that contains information about countries and their respective cities: const geo = { europe: { germany: ['berlin', 'hamburg', 'cologne'], france: ['toulouse', ' ...

What is the best way to pass a variable using the href tag in jQuery?

for (var i in result) { $('#tgt').append( "<li><a href='/UpdateStatusData/?id='"+result[i]+" >"+result[i]+"</a></li>"); } I am facing an issue where the id is appearing blank when being extracted o ...

What is the best way to ensure the image fills the entire space available?

Creating a website and looking to incorporate an image in the header section. Here is the HTML code: <header class="jumbotron"> <div class="container"> <div class="row row-header"> <div class="col-x ...

Div with CSS shadow on all sides

Is there a way to achieve this effect using only CSS (not CSS3) so that it is supported by all browsers? https://i.sstatic.net/XcWEh.png I am looking to create a div with shadows on all sides, where the top area will be used for navigation. I have tried s ...

Uploading Files with Angular and Including Extra Data in ASP.NET Web API

I am facing an issue while trying to upload a form containing text fields and a file to my WebAPI. Every time I attempt to upload, I encounter a 415 error and the ASP controller breakpoint does not get hit. Here is a snippet of my code: Angular Service / ...