I have three textboxes and a submit button. Need to enable submit button only when there is text in any of the 3 textboxes or else the button needs to be disbaled. What would be the code in angular1 or javascript to achieve this validation? Below is my code
First name:
<br>
<input type="text" id="textsend1" name="firstname1" value="Mickey">
<br>
Last name:<br>
<input type="text" id="textsend2" name="lastname" value="Mouse">
<br>
<br>
<input type="text" id="textsend3" name="firstname" value="Mickey">
<br>
<br>
<input type="submit" value="Submit" ng-disabled>
Try to add a class to enable or disable de button, check this url or just use ng-disabled
You can use a form and ng-required to accomplish this. With 3 textboxes it's manageable, but if you start to get more it can get a bit messy.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.firstname = '';
$scope.middlename = '';
$scope.lastname = '';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="myForm">
First name:<br>
<input type="text"
name="firstname"
ng-model="firstname"
ng-required="!middlename && !lastname"><br>
Middle name:<br>
<input type="text"
name="middlename"
ng-model="middlename"
ng-required="!firstname && !lastname"><br>
Last name:<br>
<input type="text"
name="lastname"
ng-model="lastname"
ng-required="!firstname && !middlename"><br><br>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid">
</form>
</div>
Related
I want to remake my payment form. I'm using GET method, and want to return link below form instead of redirect, after clicking submit. Someone have any idea?
<script type="text/javascript">
function formatMoney(e) {
document.getElementById('z24_kwota').value = (!isNaN(e.target.value) ? e.target.value : 0) * 100
}
</script>
<form method="get" id="myform" action="https://sklep.przelewy24.pl/zakup.php">
<input type="hidden" name="z24_id_sprzedawcy" value="000000">
<input type="hidden" name="z24_crc" value="000000">
<input type="hidden" name="z24_return_url" value="https://google.com">
<input type="hidden" name="z24_language" value="pl">
Tytuł wpłaty
<input type="text" name="z24_nazwa" id="pole" maxlength="30" value="" placeholder="Wprowadź tytuł wpłaty" required>
<br>
<input type="hidden" name="z24_kwota" id="z24_kwota">
Kwota wpłaty
<input type="text" id="pole" placeholder="Wprowadź kwotę wpłaty (PLN)" pattern="^([1-9])((\.\d{1,2})?)$|^((?!0)(\d){1,5})((\.\d{1,2})?)$|^(1(\d{5})(.\d{1,2})?)$|^(200000(.[0]{1,2})?)$" onkeyup="formatMoney(event)" required>
<br>
<BR>
<input type="submit" class="przycisk" value="zapłać teraz">
</form>
I checked all Internet, and can't find any solution
I'm new to JS and I practice, I want to connect between my form "firstname" to my function so when someone will click the button it will change the headline to "Hello ____ (his name)". I can't understand what should I add and where to my code so it will work. Thanks for your help.
<h1 class="example"> My Application </h1>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="" >
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<button onclick="Hello(name)">Click here to change headline</button>
`<script>`
function hello(name){
return document.querySelector(".example").innerHTML = "Hello" + name ;
}
</script>
There's a few small issues in your code, but you were close. You're not passing anything into the function, you just have to get the values from your form. There are several ways to do this, but without overly complicating what you already have or understand, here's a working version.
<h1 class="example"> My Application </h1>
<form action="/action_page.php">
First name:<br>
<input type="text" id="firstName" name="firstname" value="" >
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<button onclick="Hello()">Click here to change headline</button>
<script>
function Hello(){
var name = document.getElementById("firstName").value;
document.querySelector(".example").innerHTML = "Hello " + name ;
}
</script>
Notice the addition of the 'id="firstName"' attribute to your input.
Why doesn't my ng-show work when I give ng-app a name and declare it?
https://jsfiddle.net/jzhang172/f7mrkf48/
$(function(){
var app = angular.module('myApp', []);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<form name="formMe">
1<input type="text"><br>
2<input type="text"><br>
Email<input name="email" ng-model="email" required>
<span ng-show="formMe.email.$touched">You touched me</span><br>
<input type="submit" ng-disabled="formMe.email.$invalid">
</form>
</div>
You need to use name attribute for your form and use that form name instead of module name myApp to validation form field. So use name property in your form tag name="myForm" and for validation use myForm.email.$invalid
like:
<form name="myForm">
1<input type="text"><br>
2<input type="text"><br>
Email<input type="email" name="email" ng-model="email" required>
<span ng-show="myForm.email.$touched">You touched me</span><br>
<input type="submit" ng-disabled="myForm.email.$invalid">
</form>
Your code snippet has syntax error, the exact code snippet after fixing the error is working.
var app = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<form name="formMe">
1
<input type="text">
<br>2
<input type="text">
<br>Email
<input name="email" ng-model="email" required>
<span ng-show="formMe.email.$touched">You touched me</span>
<br>
<input type="submit" ng-disabled="formMe.email.$invalid">
</form>
</div>
I want to increment the form number once the user had submitted the form successfully. Is there any way to increment it through JavaScript or jQuery.
<form action="">
form no:1<br>
First name:<br>
<input type="text" name="firstname" value ="">
<br>
Last name:<br>
<input type="text" name="lastname">
<button type="submit" onclick="">Submit</button>
</form>
I would suggest something like this:
$(function () {
$("form").submit(function () {
$.post("url", $(this).serialize(), function () {
$("#count").text(parseInt($("#count").text() + 1);
});
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
form no: <span id="count">1</span><br>
First name:<br>
<input type="text" name="firstname" value ="">
<br>
Last name:<br>
<input type="text" name="lastname">
<button type="submit" onclick="increment();">Submit</button>
</form>
For instance by hitting return while in an input field?
No, it's not. try the sample here: https://jsfiddle.net/tun8js68/
<form action="http://www.w3schools.com/html/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit" disabled>
</form>
You still can submit form with javascript.