I have this very simple form:
<div ng-app>
<div ng-controller="Ctrl">
<form>
<input type="text" value="" onchange="angular.element(this).scope().change(this)" />
<br />
<input type="submit" name="button1" value="{{text}}" />
</form>
</div>
</div>
And this JS:
function Ctrl($scope) {
$scope.text = "New";
$scope.change = function (element) {
$scope.text = element.value;
$scope.$apply();
}
}
jsfiddle
Currently, the button value is updated when I leave the text field. How can I change the button value as user is typing?
There is no need to reinvent the wheel, just use ng-model directive:
<input type="text" ng-model="text" />
DEMO: http://jsfiddle.net/d28L8bc9/1/
HTML:
<div ng-app>
<div ng-controller="Ctrl">
<form>
<input type="text" value="" ng-model="text" />
<br />
<input type="submit" name="button1" value="{{text}}" />
</form>
</div>
</div>
JS:
function Ctrl($scope) {
$scope.text = "New";
}
Related
first post here, i'm trying to write a code following a tutrial, its a to do list and i wrote a function that takes the content of a text type input and adds it to a list, im testing the code using an alert inside the function but it doenst work and no alerts are shown, here's the code. Thanks in advance
let elements = [];
function addElements(){
if (document.querySelector("#task").nodeValue.trim() != ""){
elements.push(document.querySelector("#task").nodeValue.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
<script src="../todo_list/apps.js"></script>
</body>
So your problem was you didn't call addElements() on your button.
and instead of using nodeValue just use value instead.
this is working code
let elements = [];
function addElements(){
console.log(document.querySelector("#task").value)
if (document.querySelector("#task").value.trim() != ""){
elements.push(document.querySelector("#task").value.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
</body>
First you need to stop the html form submit with
<form action="#" id="todoForm" onsubmit="return false;">
Then you need to bind click function to your button, so that when button clicked your addElements function will be triggered
<button class="addBtn" onclick="addElements()">
Finally you need to get the input value with
document.getElementById('task').value;
Complete Code Sample
let elements = [];
function addElements() {
var task = document.getElementById('task').value;
if (task.trim() != "") {
elements.push(task);
alert(elements)
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm" onsubmit="return false;">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
</form>
</div>
</body>
I inserted a form on a html page, which contains several fields the user is supposed to fill ("name", "surname", a textarea, and so on); I then added a button and assigned the id Click to it:
<input type="button" name="button" value="Click" id="cliccami">
I linked the html page to a JQuery file.
By using JQuery I want to add a function clearAll which clears all the fields in the form when the user clicks on the button. I want to use another function main which calls the function clearAll when the button is clicked, as in the following:
function main() {
$("form").on("button", clearAll);
}
How can I write the function clearAll (to empty the fields in the form) by using JQuery?
Inside the function you can target the closest() form of this element to find all the elements to clear them like the following way:
function main() {
$("form").on("click", "#cliccami", clearAll);
}
function clearAll() {
$(this).closest("form").find("input[type=text], textarea").val("");
}
function main() {
$("form").on("click", "#cliccami", clearAll);
}
main();
function clearAll() {
$(this).closest("form").find("input[type=text], textarea").val("");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div>
<label>First Name:</label>
<input type="text" id="first-name">
</div>
<div>
<label>Last Name:</label>
<input type="text" id="last-name">
</div>
<div>
<label>Comments:</label>
<textarea id="comments"></textarea>
</div>
<input type="button" name="button" value="Click" id="cliccami">
</form>
Use jQuery's .val() function to set the value of a input element. Check the snippet for an example:
function clearAll() {
$(":input[type=text]").val("");
}
function main() {
$("#cliccami").on("click", clearAll);
}
main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="button" name="button" value="Click" id="cliccami">
You can bind your function using the onclick attribute. And use reset method to reset the entire form this way.
function main(){
// reset form
$('#my-form')[0].reset();
// do whatever you want
alert('Form cleared!');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Form</h2>
<form id="my-form">
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group">
<label for="last-name">Last Name:</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group">
<label for="comments">Comments:</label>
<textarea class="form-control" id="comments"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" onclick="main()" class="btn btn-default">Clear All</button>
</form>
</div>
Try this
<form id="form1" action="">
<input type="text">
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="button" name="button" value="Click" id="cliccami">
</form>
function clearAll() {
$('#form1 input, #form1 textarea, #form1 select').each(function() {
$(this).val('');
});
}
$("#cliccami").on('click',function(){
clearAll();
});
$('#clearit').click(function(){
$(":input[type=text]").val("");
setTimeout(function(){ afteremptyfield(); }, 1000);
})
function afteremptyfield(){
alert("Function trigged after clearing fields")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="button" name="button" value="Clear and trigger a function" id="clearit">
This is how it could be done....
I have this very basic example. This should work in a form for multiple inputs as well.
I want a form without any required parameters. But I only want to enable the button if at least one of them is not empty.
$pristine almost works. The problem is that if I type something and delete it the button remains enabled.
Basically,
If all fields are empty -> button disabled
Else if at least one not empty -> button enabled
function ctrl($scope){
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
<input type="text" ng-model="name" name='myName' ng-model='myName'/>
<span>{{name}}</span>
<input type="submit" value="Submit" ng-disabled="myForm.$pristine" />
{{myForm.$pristine}}
</form>
</div>
Pristine checks whether the input field is touched or not. That's why it remains enabled after you deleted your input. Check on valid and provide some condition. Or use pattern and regex.
With `required`:
function ctrl($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
<input type="text" ng-model="name" name='myName' ng-model='myName' required/>
<span>{{name}}</span>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid"/>
</form>
</div>
Without required using controller:
function ctrl($scope) {
$scope.isDisable = true;
$scope.validate = function(){
if($scope.name == undefined || $scope.name == ""){
$scope.isDisable = true;
} else {
$scope.isDisable = false;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
<input type="text" ng-model="name" name='myName' ng-model='myName' ng-keyup = "validate()"/>
<span>{{name}}</span>
<input type="submit" value="Submit" ng-disabled="isDisable"/>
</form>
</div>
Another way using `name.length`:
function ctrl($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
<input type="text" ng-model="name" name='myName'/>
<span>{{name}}</span>
<input type="submit" value="Submit" ng-disabled="!name.length"/>{{name.length}}
</form>
</div>
Note: If you don't want to use HTML5 validation that you can mark your form novalidate.
This is naive way, but you can just use ng-model of each input in ng-disabled
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
<input type="text" ng-model="name" name='myName' />
<input type="text" ng-model="fName" name='FirstName'/>
<span>{{name}}</span>
<input type="submit" value="Submit" ng-disabled="!(name || fName)" />
{{myForm.$pristine}}
</form>
</div>
Also, your code has 2 ng-model for the same input
Use disabled="!name.length" instead of ng-disabled="myForm.$pristine".
This will solve your issue. Below is working code:
function ctrl($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
<input type="text" ng-model="name" name='myName' ng-model='myName' />
<span>{{name}}</span>
<input type="submit" value="Submit" ng-disabled="!name.length" />
{{myForm.myName.$pristine}}
</form>
</div>
Basically I have a HTML form that contains a textbox and a submit button, what I want is when I pressed submit button it should check for the textbox that it have no error then proceed with submission.
Here is my button code:
<form id="thisform">
<div id="Registeration" class="Registeration">
<input type="text" id="textbox" class="textbox"
placeholder="My textbox" name="fBox" maxlength="30"/>
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="submitform" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" onclick="submit()"/>
</div></form>
function(){
alert('hello');
return false;
}
Here's a plain JS example where the form is only submitted if the text is at least 5 characters long.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="result.html" class="da-form">
<input type="text" name="textbox" class="textbox">
<input type="submit" class="submit">
</form>
<script>
var formEl = document.querySelector('.da-form');
var submitBtn = document.querySelector('.da-form .submit');
var textEl = document.querySelector('.textbox');
submitBtn.addEventListener('click', function(event) {
event.preventDefault();
if (textEl.value.length >= 5) {
formEl.submit();
} else {
console.error('text should be at least 5 chars long');
}
console.log();
});
</script>
</body>
</html>
you can use AngularJS:
Angular allow you to get status about your form: $invalid/$valid
the following code will disable the button until the form will be valid:
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
please see the following example:
HTML:
<div ng-app>
<form ng-controller="FormController" name="myForm">
<div class="header padding-b--10">Form Area</div>
<div class="padding-b--10">
<input name="empId" placeholder="Employee ID" ng-model="data.empId"
style="padding:5px" required/>
<span ng-if="myForm.empId.$dirty && myForm.empId.$invalid" ng-bind="invalid" class="error"></span>
</div>
<div class="padding-b--10">
<input name="empEmail" type="email" placeholder="Email" ng-model="data.empEmail"
style="padding:5px" required/>
<span ng-if="myForm.empEmail.$dirty && myForm.empEmail.$invalid" ng-bind="invalid" class="error"></span>
</div>
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
</form>
Controller:
function FormController($scope){
$scope.invalid = "Invalid";
$scope.submit = function(){
console.log($scope.data);
}
};
Working Example: https://jsfiddle.net/pqz3hsac/22/
I have this code to change the color of elements like the Background-color,text color,active link color,visited link color etc. inside a div. I have to enter the color for each in the text-boxes and accordingly the color of background,text color,link colors would change. This is the program objective.
But I can't change the colors of the active, followed and visited links. How to do that with only HTML, CSS and JavaScript? Please don't tell me any method using jQuery, as I don't know jQuery. I only want it it with JavaScript.
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("dv").style.alinkcolor=txt;
document.getElementById("dv").style.vlinkcolor=al;
document.getElementById("dv").style.color=vl;
document.getElementById("dv").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv"> hello
This is a Test<br/>
You Have Selected These Colors<br/>
This is a Test Link<br/>
</div>
</body>
</html>
I Updated your code by assigning the ID's to the elements. Here is the updated code. Try this code to see if it helps. Thanks.
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("link").style.alinkcolor=al;
document.getElementById("link").style.vlinkcolor=vl;
document.getElementById("para").style.color=txt;
document.getElementById("link").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv">
<p id="para">hello This is a Test<br/>
You Have Selected These Colors<br/><p>
<a id="link" href="#">This is a Test Link</a><br/>
</div>