I have a page with approximately 20 input fields, along with save and register buttons. Is there a way to activate the "save" button only when a change has been made in at least one of the fields?
I have a page with approximately 20 input fields, along with save and register buttons. Is there a way to activate the "save" button only when a change has been made in at least one of the fields?
If you've built a form using Angularjs, you can take advantage of its form validation feature:
Assuming you have created a form with text inputs, you can dynamically disable the save button based on certain conditions (for example, disabling the button if the form is pristine):
<input type="submit" ng-disabled="myForm.$pristine" />
To see this in action, check out the live demo on Plunker here.
If you find yourself not needing to compare values, simply set up an event handler on key events for all text boxes and activate the save button whenever any of them triggers an event.
However, if you require a more refined feature that allows saving only when there have been real changes in the data (such as changing "aaa" to "aa" and then wanting it back to "aaa"), you will need to store the original data and compare it with any new modifications to decide whether to enable or disable the save button. In this scenario, consider adding an attribute like "original-data" to your input textboxes to hold the original value generated or loaded on the page, and running the comparer on every key change event.
If your HTML is structured as shown below:
<input>
<input>
<input>
<button class=save disabled>Save</button>
Try implementing the following JavaScript code:
var inputs = document.getElementsByTagName("input");
var enableSave = function() {
document.querySelector("button.save").disabled = false;
for (var i = 0; i < inputs.length; i++) {
inputs[i].removeEventListener("input", enableSave);
}
};
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("input", enableSave);
}
To disable a button in a form, the ng-disabled directive can be used
<form name="myForm">
Name :
<input type="text" name="Name" required><br>
Age:
<input type="number" name="Age" required><br>
<input type="submit" value="Save" ng-disabled="myForm.$error.required">
Only when all required fields in the form are filled out will the "Save" button become enabled
Situation: I'm running a Node.js REST server that receives JSON files, parses them, and inserts them into a database. With an anticipated influx of hundreds of requests per second. Need: The requirement is to only perform insertions by parsing the JS ...
I have implemented an Ajax function that retrieves data from a PHP file and displays it in a DataTable. Initially, this setup was working fine. However, when I added a new function to the PHP file, my Ajax function stopped retrieving data from the file. I ...
Struggling with my React/Redux drum app, I'm at a roadblock with the final component that should update with the selected object's ID through an action dispatch. It baffles me why the element won't reflect the changes even though I've c ...
Below is the React Component that I am working on: export default function Header () { const { isSessionActive, isMenuOpen, isProfileMenuOpen, setIsMenuOpen, closeMenu, URL } = useContext(AppContext) const [profileData, setProfileData] = useState({}) ...
I have a JSON array with a key that changes dynamically (room number varies each time I run the code). My goal is to access the inner JSON array using this dynamic key. Here's what I've attempted so far, but it's throwing an error. Here is ...
One challenge I am facing is with a checkbox that saves its value and title in the local storage when clicked. This checkbox is located within a div, and I want the checkbox value to change whenever any part of the div is clicked. Despite my efforts, I hav ...
In my project, I am using Backend Spring MVC with Spring-data and Spring-security, along with Front end AngularJS. The technologies include Spring 3.1, Jackson 1.8, JPA 2.1, and MySQL. The main issue I am facing has been asked multiple times before. I have ...
I created a function that picks a text based on the input string. If there is a match, it sets it as selected. Here is the function: function chooseDropdownText(dropdownId,selectedValue,hfId){ $('#'+dropdownId+' option').ea ...
I'm currently experimenting with a combination of HTML, JavaScript, and PHP on a single page. My goal is to update a JSON file with either 0 or 1 based on the toggle switch state change. I seem to be close to achieving this functionality, but upon rel ...
I am currently working on changing the icon color of an icon image in Mapbox. According to Mapbox documentation, the only way to do this is by using sdf-icons (https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color). After hours o ...
I am currently working on a project where I need to extract the content from a hidden iframe and display it as HTML in a div every time the iframe changes its loading state. The goal is for it to appear as if the page is being redirected and downloading it ...
I'm having trouble retrieving input from a text-field in react and I can't figure out why. I've tried several solutions but none of them seem to be working. I even attempted to follow the instructions on https://reactjs.org/docs/refs-and-th ...
So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...
Many software packages claim to execute their methods in parallel, such as the async npm package. They assert that even for functions like concat, they are processed concurrently. How can we verify if their assertion holds true? I have written code to te ...
While exploring examples and tutorials on http://docs.angularjs.org/guide/expression, I encountered a problem when trying to run the examples in plunker and jsfiddle. The error message displayed in the console is: Uncaught Error: [$injector:modulerr] http ...
I am currently performing the following action: myArray.push(pageCount); After that, I end up with something like this: $scope.myArray = Pages.getAllPageCount(); Finally, when I utilize AngularJS to display it in my .html file. {{myArray}} If there i ...
I created a function that toggles the active state of list items when clicked: React toggleActive: function(item){ item.active = !item.active; }, JSX <li key={property.id} onClick={() => this.toggleActive(property)}> Is there a way to count ...
Being new to using AngularJS, I am encountering an issue with parsing a JSON response. I have user login credentials such as Username and password, and I am attempting to parse them when the user clicks on the login button(). If the username and password m ...
I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...
I have been troubleshooting an issue with uploading image files using ajax without refreshing the page. However, I am facing a problem where the file does not get moved to the specified folder even after implementing basic PHP code for file upload. if($_S ...