Making AngularJS form page dirty using JavaScript - javascript

I want to make the AngularJS form field dirty by using JavaScript code,
Here is the HTML Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
I tried using
document.querySelector('input[name="myInput"]').value="123",
clicking, focusing but none of them seems to work/override it. Please guide me on how to do that without using AngularJS functions and by using plain JavaScript.
I want to change the input's valid state to true

To interact with angular App from console you need to use
var scope = angular.element(document.getElementById('yourElementId')).scope();
this will bring you the required scope, then to set element as dirty you can use
scope.myForm.myInput.$setViewValue(scope.myForm.myInput.$viewValue);

Use:
var $body = angular.element(document.body);
var $scope = $body.data().$scope;
$scope.myForm.myInput.$setDirty();
$scope.$apply();
The DEMO
setTimeout(function() {
var $body = angular.element(document.body);
var $scope = $body.data().$scope;
$scope.myForm.myInput.$setDirty();
$scope.$apply();
}, 1000);
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<p>Watch dirty state flash from false to true</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input dirty state is:</p>
<h1>{{myForm.myInput.$dirty}}</h1>
</body>
</html>

Related

$rollbackViewValue() - setting initial state of form - AngularJs

I am making a simple program, where if a person types a word 'alpha', the form gets all its elements states ng-prestine/ng-touched/ng-valid/ng-invalid all to their initial states. I think I am doing it correctly but getting an error in console.
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="form1">
<input type="text" ng-model="person">{{person}}
<button ng-click="click()">Click</button>
</form>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.click = function(){
if ($scope.person = "alpha"){
form1.$rollbackViewValue();
}
}
});
</script>
</body>
</html>
Error
Reference
https://docs.angularjs.org/api/ng/type/form.FormController
Can someone help me out?
The form form1 isn't a defined variable in your controller. You have to use $scope.form1.$...
But be aware that $rollbackViewValue might not do what you expect. It would be easier to set the state you want your form to be in manually.

Adding a popover to an input box with a button (angularJS)

My goal is to have a button that on click will show a popover "Hello World" on the input box
Currently when clicking on input box itself, the popover will show, but not through the button. Please check my fiddle
What are some ways to trigger a popover over the input with a button ?
I tried adding a popover-trigger on the button, but was not sure what value I should use inside it
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<p>
<button class="btn btn-default">Mouseenter</button>
</p>
<input type="text" value="Click me!" popover="hello world" class="form-control">
</div>
</body>
</html>
Below are some additions to your snippet which will trigger the pop over when you click the button, but a few things here should be noted:
DOM manipulations should never happen in the controller, I merely did it to make the current code do what it was originally intended to do
For the input button to be taking instructions from a button, I would recommend crating a new directive around the input tag which will be listening for an angular event and when it hears it, it will show the pop up, the event can be generated by the button itself, for information on them see here
It is not a good idea to use window, document or other default JS global variables in your app, try to use their angular counterparts whenever possible
I used timeout to avoid a digest cycle error, which will not happen if you're using the directive method I talked about
Hope this helps.
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $timeout) {
$scope.activateInput = function () {
var elm = document.getElementsByTagName("input")[0];
$timeout(function () {
angular.element(elm).triggerHandler('click');
});
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<p>
<button class="btn btn-default" ng-click="activateInput()">Mouseenter</button>
</p>
<input type="text" value="Click me!" popover="hello world" class="form-control">
</div>
</body>
</html>

Repopulating form fields with javascript

Hi Sorry I'm newbie in Javascript but I need to know how I can do to repopulate a form field when I have this kind of form :
I tried with this code(part) but it doesn't work,the file name is 'testjavascript.html'
<head>
<script language="javascript" type="text/javascript">
function updateUsername(){
var first = document.getElementById("first").value;
document.getElementById("first").value = first;
} </script>
</head>
<body>
<form action="action.php" method="post">
<input type="text" name="usename" value="" id="first" >
Link
<input type="submit" name="submit">
</form>
</body>
This behavior needs to be on the server side. When you change page, the browser will reload your javascript code and you will lose all references.

Firefox ignores JavaScript override of form submit

I have this code
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
I don't want the browser to request a new URL. That is why "onsubmit" has "return false;". This code works in Internet Explorer, but Firefox generates a new request. Any ideas what I am doing wrong?
FireBug changes between not wanting to acknowledge there is Javascript reference and showing the Javascript file without any errors... I will update this when i have more to add. I will try various thingsm e.g. try upload it to the net and see if FireFox behaves differently when not running JS on local disk.
Are you sure that you haven't got any errors?
I try with a simple html:
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
And a simple javascript called my-search.js in the same path of my html with the next code:
var my_Init = function(){
alert('Hello Onload');
}
var my_EventHandler_Action = function(){
alert('Hello OnSubmit');
}
And it works fine.
Can you show a live demo (with dropbox or something)?
Instead of using a submit button, try using a button and link the javascript function to that.

How to modify the value of text input with js/jquery?

I would like to dynamically modify the values of certain form elements, more specifically certain input text fields. So far, whenever I load my html page, I am just getting the blank input field, but I am expecting it to contain the value of 1. Here is an example of how I am trying to do this.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myForm = $(this).getElementById('form1');
myForm.elements['Q01'].value = '1';
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
The reason this needs to be done dynamically is because the value of form could be different every time. Am I even approaching this correctly? Suggestions on how I can achieve my intended functionality?
-- EDIT --
None of the solutions seem to be doing the trick. Here is an update of my code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("#Q01").val("1");
$("#form1 input[name='Q01']").val("1");
//$("input[name='Q01']").val('1');
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
I am expecting when I load the page, that the input text will have 1 in it. But the input text keeps showing up empty. Any ideas?
-- EDIT --
Here is a solution derived from the answers from below that I like:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Q01").val("1");
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
If you are using jQuery you could just change the id attribute to name in the input elements and then do something like this:
$('#Q01').val('1')
The val method sets the value sou can find more here: http://api.jquery.com/val/
You've got your ready handler correct. One of the great things about jQuery is its selector engine. I recommend taking a look at the documentation to help familiarize yourself with it.
To do what you want, I'd recommend something like this:
$(document).ready(function() {
$("#form1 input[name='Q01']").val("1");
});
The #form1 is the same as document.getElementById("form1"). The input[name='Q01'] grabs all input elements that have a name attribute equal to Q01. The .val method sets the selected elements value to the string 1.
$(document).ready(function(){
$("form input[name='Q01']).val('1');
)};
This should work:
$("input[name='Q01']").val('1');
But why not to set id's to your inputs?
Hope it works

Categories