I have used ng-csv-import to import a css file from desktop and i have submit button which uploads the csv. My requirements to disable the submit button until the user select a css file. Thanks in advance.
<ng-csv-import name="uploadCsv" content="MyCsv"
separator="csv.separator"
result="csv.results"
accept="csv.accept" required>
</ng-csv-import>
<div class="col-xs-12 col-sm-12">
<button type="submit" class="btn-top btn-rectangle" ng-click="submit()">Submit</button>
</div>
You could use ng-disabled on the button like so:
<button type="submit" class="btn-top btn-rectangle" ng-click="submit()" ng-disabled="yourDisabledVariable">Submit</button>
Then watch for the ng-csv-import content in your controller
//Default is disabled
$scope.yourDisabledVariable = true;
// Watch for changes on $scope.MyCsv
$scope.$watch('MyCsv', function(newVal,oldVal){
// see if user uploaded a csv by looking at $scope.MyCsv
if(newVal){
// Enable the button
$scope.yourDisabledVariable = false;
}
})
You can try this.
$('input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$('input[type="submit"]').prop('disabled', false);
}
});
Related
I want to submit the form on the button click as well as navigate to the next page, but it shows an error : "Form submission canceled because the form is not connected".
Can anyone help me with this problem ?? I am using nebular.
This is the html code
<nb-step [label]="labelOne" [stepControl]="formOne">
<ng-template #labelOne>Device type</ng-template>
<form class="form-inline" #formOne="ngForm" >
// Code goes here...
<div class="buttonHolder">
<button nbButton routerLink="/dashboard" nbStepperNext>Cancel</button>
<button nbButton outline status="primary" (ngSubmit)="onSubmit(formOne)"
nbStepperNext [disabled]="!formOne.valid">Next</button>
</div>
</form>
</nb-step>`
This is the .ts code
onSubmit(form: NgForm) { console.log(form.value); form.reset(); }
To change page after submitting the form try to import Router and register it in constructor(private _router: Router) in your .ts file.
At the end of onSubmit() method add this._router.navigateByUrl('/pathOfYourNextPage'); and in this way you'll make redirect throught your .ts file.
Hope that will help!
You can try to below way
ts file
onSubmit(formOne: NgForm) {
console.log(formOne.value);
this._router.navigate(['/navigation page link']); // navigation url link
formOne.reset();
}
constructor(){
private _router: Router,
}
HTML file
<nb-step [label]="labelOne" [stepControl]="formOne">
<ng-template #labelOne>Device type</ng-template>
<form class="form-inline" #formOne="ngForm" (ngSubmit)="onSubmit(formOne)" >
// Code goes here...
<div class="buttonHolder">
<button nbButton routerLink="/dashboard" nbStepperNext>Cancel</button>
<button nbButton type= "submit" outline status="primary"
nbStepperNext [disabled]="!formOne.valid">Next</button>
</div>
</form>
I have been doing some searching and most of what I find relates to the html <input type="submit"> buttons or connecting to a button by the ID tag. What I am trying to do is attach to every html5 <button> based off the NAME tag.
I have tried the following but when the button is clicked it submits and I don't get any alerts before it does.
$("button[name=Submit]").click(function ()
{
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;
});
Also tried
$("input[name=Submit]").click(function ()
{
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;
});
Here is the HTML for one of the submit buttons:
<button formnovalidate="formnovalidate" type="submit" name="Submit" value="Add Time">Add Time</button>
So how am I supposed to attach to all my html5 buttons?
Note: The JS in in an external file with about a dozen other functions which all work so I do know the JS file is being loaded properly and working. And all the code is in a $(document).ready(function ()
You need to prevent the default behaviour:
$("button[name=Submit]").click(function(event) {
event.preventDefault();
// other code
});
You must put the id in the button like below
<button formnovalidate="formnovalidate" id="id1" type="submit" name="Submit" value="Add Time">Add Time</button>
And also you jquery code sometime like this (call via button id)
$( "#id1" ).click(function() {
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;});
Hope it helps you...
I have following markup in my view
<div ng-show="showTheForm" class='col-md-8'>
<form ng-submit='login()'action="http://localhost/test/signin.php" target='signin' method="post">
<input type="submit" class='alt-btn' id="signin-button" value="Sign in">
</form>
</div>
<div ng-show="!showTheForm" class='col-md-8'>
<iframe height='600px' width='470px' id="signin" name="signin" frameBorder="0"></iframe>
</div>
When I submit the form I run this function within my controller
$scope.login = function() {
//Show the iframe
$scope.showTheForm = false;
}
What I want to happen is the form hides and the div with the iframe becomes visible.
The form hides when I submit but the iframe does not become visible and I'm wondering what I'm doing wrong?
I read about $apply and how it is used to inform angular if a variable is updated. I tried this but it made no effect.
Would anyone have any idea where I'm going wrong?
the definition of function in your controller is wrong.
Change function definition from $scope.login() = function() ==> $scope.login = function()
i need a Back Button that disappears, looked at ngdisabled from AngularJS but quite the beginner.
<button onClick="history.go(-1);" >Go back</button>
Already got the back button, and i want to disable it after its been clicked?
Use
<button onClick="history.go(-1);this.disabled=true;" >Go back</button>
Assuming your button is contained by an Angular-Controller, a more Angular-approach to this problem would be something like this:
<div ng-controller="controller as ctrl">
<button ng-click="ctrl.GoBackInHistory()"
ng-disabled="ctrl.isBackButtonDisabled">
Go back
</button>
</div>
<script>
angular.module('app', [])
.controller('controller', controller);
controller.$inject = ['$window'];
function controller($window) {
var vm = this;
vm.isBackButtonDisabled = false;
vm.GoBackInHistory = GoBackInHistory;
function GoBackInHistory() {
$window.history.back(); //or $window.history.go(-1);
vm.isBackButtonDisabled = true;
}
}
</script>
Please try this.
<button ng-click="goBack" ng-disabled="backDisabled">Go back</button>
click function:
$scope.goBack = function(){
$window.history.back();
$scope.backDisabled = true; // use $rootScope to access everywhere of app.
}
I want to create function (in angularjs controller) which add particular class to the parent div of the empty input when clicking on the button. And remove that class when i type something in the input.
I have a working example here: http://jsfiddle.net/fUdLv/
HTML:
<div ng-app="authorization">
<div ng-controller="authCtrl as auth">
<div ng-class="{'error':auth.needEmail}">
<input type="text" ng-model="auth.email" ng-keypress="auth.clearEmail()">
</div>
<div ng-class="{'error':auth.needPassword}">
<input type="password" ng-model="auth.password" ng-keypress="auth.clearPassword()">
</div>
<div>
<button ng-click="auth.signin()">Sign in</button>
</div>
</div>
</div>
Javascript:
angular.module('authorization', [])
.controller('authCtrl', function() {
this.needEmail = false;
this.needPassword = false;
this.signin = function pay() {
if (!this.email){
this.needEmail = true;
}
if (!this.password){
this.needPassword = true;
}
};
this.clearEmail = function(){
this.needEmail = false;
}
this.clearPassword = function(){
this.needPassword = false;
}
});
But i'm sure it is very bad code, because i have a particular function for working with particular input. How can i generalize this function for working on every input (for example, if i would have three or four inputs it is not very smart solution to create function for each of them)
How about use <form> and FormController to control state?
You probably need to read this guide from official site.