I am very new to captcha. I want to disable submit button until captcha is verified successfully. (restricting from form submission until captcha is validated successfully)
<div class="col-sm-offset-3 col-sm-6">
<div class="g-recaptcha" data-sitekey="sitekey"></div>
</div>
<div class="row form-row1">
<div class="col-sm-6 col-md-6 col-xs-4"></div>
<div class="col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary" ng-click="registration()" style="float: left;">SUBMIT</button>
</div>
<div class="col-sm-4"></div>
</div>
Related
I'm doing a system to idle a user after 1 minute and I'm opening a modal with a button to alert the user with a button inside which redirects to login page.
controllerScope.logout = function () {
alert("logout");
$location.path('/');
AuthService.logout(controllerScope.user).then(function (result) {
$state.go('user.signin');
});
};
In my view:
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>Oh, Snap! You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Click the button below to be redirected to the login page and begin again.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-small" ng-click="doLogout()">Back To Login</button>
</div>
</script>
Why when I click on my "back to login" on modal it doesn't go to my function on the controller? I tried to pop up an alert, a simple thing but event that doesn't work
You need to make below changes, since you use controller as syntax :
In controller it should be like var controllerScope = this
In HTML controller declaration be like : ng-controller ="yourcontrollername as controllerScope"
During calling logout, it should be like ng-click="controllerScope.logout()"
Update
Your plunker has many issues, this even doesn't run angular.
So I created this Fiddle with minimal possible code to show the things to be done.
In general :
use controller as alias., for logout ng-click="inventoryCtrl.openNewDeviceModal()" and for opening modal popup use alias as well controller: 'InventoryController as inventoryCtrl',
You set doLogout() function into your ng-click. Would you mean logout() as in your controller ?
Your ng-click method is wrongly called: Kindly change ng-click="controllerScope.logout()"> instead of ng-click="doLogout()">
Update
I have uploaded my code to share with you https://jsfiddle.net/y0xrgjaf/
Your template code in outside of the controller div tag. You should add your all html code inside of the main div
<div ng-controller="controllername">
//all code should be here
</div>
Copy this below code and paste it
<div class="row" ng-controller="InventoryController as inventoryCtrl" >
<div class="col-md-12">
<div class="panel mb25">
<div class="panel-body">
<table class="table mb0 table-striped datatable" ui-jq="dataTable" ui-options="devicesData">
<thead>
<tr>
<th></th>
<th>S/N</th>
<th>IP</th>
<th>Name</th>
<th>Manufacturer</th>
<th>Model</th>
<th>Organization</th>
<th style="width:70px;"></th>
</tr>
</thead>
</table>
</div>
</div>
<div>
<button class="btn btn-default" ng-click="openNewDeviceModal()">Add Device</button>
</div>
</div>
<script type="text/ng-template" id="newDeviceModalContent.html">
<div class="modal-header">
<h3 class="modal-title" ng-bind="deviceModalTitle"> Add Device</h3>
</div>
<div class="modal-body">
<form class="form-horizontal bordered-group" role="form" name="addDeviceForm">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" ng-model="newdevice.data.name" required>
<span ng-show="addDeviceForm.name.$invalid">The name is required.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">S/N</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="sn" ng-model="newdevice.data.sn" required>
<span ng-show="addDeviceForm.sn.$invalid">The S/N is required.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Model</label>
<div class="col-sm-10">
<select class="form-control" ng-model="newdevice.device_type_id" ng-options="type.id as type.model for type in deviceTypes">
<option value="">None</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Organization</label>
<div class="col-sm-10">
<select class="form-control" ng-model="newdevice.organization_id" ng-options="organization.id as organization.data.name for organization in organizations">
<option value="">None</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default btn-sm" ng-click="saveDevice()" ng-disabled="addDeviceForm.name.$invalid || addDeviceForm.sn.$invalid">Save</button>
<button class="btn btn-default btn-sm" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>Oh, Snap! You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Click the button below to be redirected to the login page and begin again.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-small" ng-click="inventoryCtrl.logout()">Back To Login</button>
</div>
</script>
</div>
I am doing an event scheduler app using angular js. In calendar when i am clicking the event i am sent the event id to back end to getting event details.Here how to get the pop up on my calendar when the url status is true.
My code is:
$scope.alertOnEventClick = function( date, jsEvent, view){
var event_id=date.id;
$http.post("Youin-api/v2/business/event_information",{"event_id":event_id}).then(function(response) {
if(response.error="true")
{
$scope.eventInformation= response;
}
});
};
My bootstrap model pop up is:
<div class="modal fade" id="AddUsers" ng-model="eventInformation" role="dialog">
<div class="modal-dialog " style="top:80px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body">
<p><form role="form" ng-submit="AddUsers(addusers)">
<div class="form-group">
<label for="pwd">User Type</label>
<input type="text" class="form-control" id="user_type" ng-model="addusers.user_type" value="{{addusers.user_type}}">
</div>
<div class="form-group">
<label for="pwd">Created By</label>
<input ty{{addusers.user_type}}pe="text" class="form-control" id="created_by" ng-model="addusers.created_by" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form></p>
</div>
</div>
</div>
</div>
thanks in advance..!!
To manually trigger modal to show from javascript. Use this.
$('#AddUsers').modal('show')
Note: You have to add bootstrap.js and jquery.js to use this functionality.
You can view the complete modal api options here.
Wherever you want to open the modal based on your condition you can achieve the same using following:
angular.element(document.getElementById("AddUsers")).modal();
i have a bootstrap model
<div id="otpModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter OTP</h4>
</div>
<div class="modal-body">
<form class="form-otp" name="otp" ng-submit="enterOtp()" >
<div class="row col s6">
<p>A verification code has been sent to your mobile by SMS. Please enter the verification code.
</p>
<input type="text" id="otp" placeholder="enter your OTP code" name="otpName" class="validate" maxlength="6" ng-pattern="/^[0-9]{4,6}$/" ng-model="otp" required>
</div>
<p id="otpMsg" style="color:#e52424"></p>
Resend ?
<button type="submit" ng-disabled="form-otp.$invalid" class="waves-effect waves-light btn done">
<i class="material-icons left">done</i> Done
</button>
</form>
</div>
</div>
</div>
</div>
i have a controller in which enterOtp() & resendOtp() is defined. Problem is text box with name "otpName" is showing [object Object] in it .
Try changing
ng-model="otp"
to
ng-model="otp.name"
You are probably using the wrong field as ng-model.
I want use a form under another form in angularjs. First form (form1) is a form-wizard. I want use another form in form1 and then goto another step of form-wizard. I want add some data in form2 and push data in a list and then by form 1, goto another step. I have below code:
<form class="tab-pane" id="second-1" name="second-1Form" rc-submit rc-step>
<form ng-submit="form2()">
<div class="form-group">
...
</div>
<div class="form-group">
...
</div>
<div class="form-group">
<button>Submit</button>
</div>
</form>
</form>
<div class="form-group">
<div class="pull-right">
<a class="btn btn-default" ng-click="rc.sampleWizard.backward()"ng-show="rc.sampleWizard.currentIndex > rc.sampleWizard.firstIndex">Back</a>
<a class="btn btn-primary" data-loading-text="Please Wait..." ng-click="rc.sampleWizard.forward()"ng-show="rc.sampleWizard.currentIndex < rc.sampleWizard.navigationLength">Continue</a>
<a class="btn btn-primary" ng-click="rc.sampleWizard.forward()"ng-show="rc.sampleWizard.currentIndex == rc.sampleWizard.navigationLength">Complete</a>
</div>
</div>
and in controller:
$scope.addBolouk = function(){
$scope.BoloukRadif.push($scope.formdata);
};
but when I complete form2 and click on submit, data don't add to list and submit of form-wizard is work and page is goto next form-wizrd.
I want add data to list by using first form and then goto next form-wizard. How can I seprate button of form2 from button of form-wizard? How can I resolve this problem?
You can't have a form inside a form, but you can use the ng-form directive,
<form class="tab-pane" id="second-1" name="second-1Form" rc-submit rc-step>
<ng-form>
<div class="form-group">
...
</div>
<div class="form-group">
...
</div>
<div class="form-group">
<button ng-click="form2()">Submit</button>
</div>
</ng-form>
</form>
<div class="form-group">
<div class="pull-right">
<a class="btn btn-default" ng-click="rc.sampleWizard.backward()"ng-show="rc.sampleWizard.currentIndex > rc.sampleWizard.firstIndex">Back</a>
<a class="btn btn-primary" data-loading-text="Please Wait..." ng-click="rc.sampleWizard.forward()"ng-show="rc.sampleWizard.currentIndex < rc.sampleWizard.navigationLength">Continue</a>
<a class="btn btn-primary" ng-click="rc.sampleWizard.forward()"ng-show="rc.sampleWizard.currentIndex == rc.sampleWizard.navigationLength">Complete</a>
</div>
</div>
I am using AngularJS as my front-end, below is my HTML file
<div >
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body">
<div style="margin-bottom: 10px;">
<button type="button" ng-click='cancel()' class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{alert.summary}}</h4>
</div>
<form name="alertForm" novalidate>
<div ng-if="!displayMap">
<alert ng-if='displayAlertMsg' type="alertMsg.type">{{alertMsg.message}}</alert>
<input type="hidden" ng-model="alert.source" />
<div class="field-box">
<span class="checkboxLabel">Public: </span><input type="checkbox" id='updateType' ng-true-value="1" ng-false-value="0" ng-model="alert.publicAlert"></input>
</div>
<div class="field-box">
<label>qweqwName:</label>
<input class="span5" id='updateName' ng-model="alert.summary" required />
</div>
<div class="field-box">
<label>Notes:</label>
<textarea id='updateNotes' ng-model="alert.details" rows="2" required ></textarea>
</div>
<div class="span3" style="margin-left: 0px;">
<div class="field-box">
<label>Priority:</label>
<select ng-model="updatePriority" ng-options="p.name for p in priorities" ng-change='updateP(updatePriority)'></select>
</div>
<div class="field-box">
<label>Status:</label>
<select ng-model="updateState" ng-options="s.name for s in statusList" ng-change="updateS(updateState)"></select>
</div>
</div>
</div>
<div id="alertmap-buttons" class="span2 no-margin">
<button id="alert-add-location" class="btn btn-default pull-left" ng-click="displayMap = !displayMap"><span ng-if="!displayMap">Add Location</span><span ng-if="displayMap">Done</span></button>
<button id="alert-cancel-location" class="btn btn-danger" ng-if="displayMap">Cancel</button>
</div>
<div id="latlng-label" class='span3 pull-right no-margin'>
<div class="pull-left"><label class="latlng-label">lat: {{alert.latitude}}</label></div>
<div class="pull-right"><label class="latlng-label">long: {{alert.longitude}}</label></div>
</div>
<!--Select Coords from map-->
<!--Google Map Directive-->
<div ng-init="displayMap = false" ng-if="displayMap">
<google-map class="create-alert-map angular-google-map-container" center="map.center" zoom="map.zoom"
draggable='true'
events="mapEvents">
<markers models="themarkers"
coords="'self'"
>
</markers>
</google-map>
</div>
<!--Lat and Long
<input placeholder="Latitude" class="span2" id='updateLat' ng-model="alert.latitude" />
<input style="float: right" placeholder="Longitude" class="span2" id='updateLong' ng-model="alert.longitude" /-->
</form>
</div>
<div ng-if="!displayMap" class="modal-footer">
<button type="button" class="btn btn-default" ng-click="submit()" ng-disabled="alertForm.$invalid">Save</button>
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
</div>
</div>
</div>
This file is given to me by client and he want some CSS changes etc in that. But when I try to edit the file nothing is happening to the modal dialog box, for example if I change button text from Save to Submit it's not applying in the file. How come this???
If this information is not enough I can give controller JS file also. Thanks..