ng-disabled not working as expected - javascript

In my modal popup code , I am trying to disable a button if a text box is empty or nothing is entered in it .
<div id="add_account_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ModalForAddAccount" aria-hidden="true">
<div class="modal-body">
<h3>Add a new Account</h3>
<form class=" " name="addAccountForm">
<div class="control-group">
<div class="controls">
<label class="control-label" style="display: inline">
Account Name
<span class="controls" style="display: inline;color:red;">*</span>
</label>
<div class="controls" style="display: inline">
<input type="text" class="input-large" ng-model="vm.addedAccount" style="margin-top: 5px;margin-left:7px;">
</div>
</div>
</div>
<div class="control-group">
<div class="btn-group">
<button class="btn btn-primary " ng-class="{'disabled':vm.addedAccount === ''}" ng-click="vm.submitAddAccount()">Submit</button>
<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</form>
</div>
</div>
But the submit button on modal popup load is not disabled.
I also tried :
<button class="btn btn-primary " ng-disabled="vm.addedAccount === ''" ng-click="vm.submitAddAccount()">Submit</button>
But that also did not work.
What am I doing wrong ?


ng-click fires even if ng-disabled is true
use ng-submit with ng-disabled instead.
<form class=" " name="addAccountForm" ng-submit="vm.submitAddAccount()">
<div class="control-group">
<div class="controls">
<label class="control-label" style="display: inline">
Account Name
<span class="controls" style="display: inline;color:red;">*</span>
</label>
<div class="controls" style="display: inline">
<input type="text" class="input-large" ng-model="vm.addedAccount" style="margin-top: 5px;margin-left:7px;">
</div>
</div>
</div>
<div class="control-group">
<div class="btn-group">
<button type="submit" class="btn btn-primary " ng-disabled="vm.addedAccount === ''">Submit</button>
<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</form>


You could use this way:
<button class="btn btn-primary " ng-disabled="!vm.addedAccount.length" ng-click="vm.submitAddAccount()">Submit</button>


ng-disabled works well: http://codepen.io/DaniloPolani/pen/wgOpPa
Maybe vm.addedAccount is not an empty string? Try with a console log to print vm.addedaccount === '' or inside the angular brackets.

Related

Bootstrap Datepicker not Working on Server but works locally

My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?

Pass form data using Serialize() throwing empty values

I have a form when I click add button, it should pass the form data values to AJAX data. When I tried to use console.log the values are empty. I have tried both the Serialize() and FormData() methods. both showing empty values.
<div class="modal-content">
<div class="modal-header clearfix ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h4 class="modal-title p-b-5"><span class="semi-bold">Add Invoice Period</span></h4>
</div>
<br />
<div class="modal-body">
<form role="form" id="invoiceForm" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>
<script>
function addPeriod() {
var form = document.querySelector('form');
//console.log($('form').serialize());
var formData = new FormData(form);
console.log(formData);
}
</script>

Your form fields should have a name attribute if you want them to show in the .serialize() method result, like :
<input id="startDate" type="date" class="form-control" name="start_date">
<input id="endDate" type="date" class="form-control" name="end_date">
function addPeriod() {
var form = document.querySelector('form');
console.log($('form').serialize());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-content">
<div class="modal-body">
<form role="form" id="invoiceForm" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control" name="start_date">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control" name="end_date">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>

Your codes lacks of form action, input names and Ajax request.
function addPeriod() {
//It could be better to get form by id because there might be multiple forms in the page
var form = $('#invoiceForm');
var formData = form.serialize();
$.ajax({
type: "POST",
url: form.attr('action'),//Or you can define the action endpoint manually
data: formData,
success: function( response ) {
console.log( response );
}
});
console.log(formData);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="modal-content">
<div class="modal-header clearfix ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h4 class="modal-title p-b-5"><span class="semi-bold">Add Invoice Period</span></h4>
</div>
<br />
<div class="modal-body">
<form role="form" id="invoiceForm" action="sample/sampleform" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control" name="startDate">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control" name="endDate">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>

Disable/Enable a textbox in bootstrap modal form based on radio button click

I have a bootsrap modal form.In that if i click on the radio button,'For All Subjects','Subject' textbox should be in disabled state.Similarly,if I click on radio button 'Specific Subject', 'Subject' textbox should be enabled.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="adminContent">
<div class="row">
<div class="col s12 m12 l12" style="float: right">
<button type="button" class="btn btn-lg"
data-toggle="modal" data-target="#addMasterData" >Add Master</button>
</div>
</div> </div>
<div class="modal fade vertical-align-center" id="addMasterData"
role="dialog" style="width: 500px"; role="dialog"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog ">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">
<b><font class="font">Add Master</font></b>
</h4>
</div>
<form id="mastercreate" action="addConfig" method="post">
<div class="modal-content ">
<div class="modal-body ">
<div class="form-group">
<label for="text">Subjects:</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="forAllSubjects"
value="Yes" >For All Subjects
</label> <label class="radio-inline"> <input type="radio"
name="roleSubjectRadio" id="specificFlights"
value="Specific" checked>Specific Subject
</label> <input type="hidden" class="form-control" id="specs" name="specs"
value="">
</div>
<div class="form-group" id="subName">
<label for="createorigin" class="form-control-label"><font >Subject
Name:</font></label> <input type="text" class="form-control" id="subNo"
name="subNo" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
onclick="addMaster()">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
Please suggest how to do it from javascript.

Using javascript you can do this. Give onclick="disableSubjectField()" to the radio buttons:
<div class="form-group">
<label for="text">Subjects:</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="forAllSubjects" value="Yes" onclick="disableSubjectField()" >For All Subjects
</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="specificFlights" value="Specific" onclick="disableSubjectField()" checked>Specific Subject
</label> <input type="hidden" class="form-control" id="specs" name="specs" value="">
</div>
Then write this javascript to disable the Subject input field.
function disableSubjectField() {
if(document.getElementById('forAllSubjects').checked) {
document.getElementById('subNo').disabled = true;
}else if(document.getElementById('specificFlights').checked) {
document.getElementById('subNo').disabled = false;
}
}

For that you need to use event handling for radio buttons, you can try below snippet for that. I have written that in jQuery, you can also use JavaScript for the same.
$('input[type=radio]').click(function(){
if($(this).prop("id")==="forAllSubjects"){
$("#subNo").prop("disabled","remove");
} else {
$("#subNo").removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="adminContent">
<div class="row">
<div class="col s12 m12 l12" style="float: right">
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#addMasterData" >Add Master</button>
</div>
</div>
</div>
<div class="modal fade vertical-align-center" id="addMasterData" role="dialog" style="width: 500px"; role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog ">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<b><font class="font">Add Master</font></b>
</h4>
</div>
<form id="mastercreate" action="addConfig" method="post">
<div class="modal-content ">
<div class="modal-body ">
<div class="form-group">
<label for="text">Subjects:</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="forAllSubjects" value="Yes" >For All Subjects
</label>
<label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="specificFlights" value="Specific" checked>Specific Subject
</label>
<input type="hidden" class="form-control" id="specs" name="specs" value="">
</div>
<div class="form-group" id="subName">
<label for="createorigin" class="form-control-label">
<font >Subject Name:</font>
</label>
<input type="text" class="form-control" id="subNo" name="subNo" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addMaster()">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>

you should add a click function depends on your library
lets get from a point you don`t use any library
you should do this : (you can copy past and it will work)
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<div class="container" id="adminContent">
<div class="row">
<div class="col s12 m12 l12" style="float: right">
<button type="button" class="btn btn-lg"
data-toggle="modal" data-target="#addMasterData" >Add Master</button>
</div>
</div> </div>
<div id="addMasterData"
role="dialog" style="width: 500px"; role="dialog"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog ">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">
<b><font class="font">Add Master</font></b>
</h4>
</div>
<form id="mastercreate" action="addConfig" method="post">
<div class="modal-content ">
<div class="modal-body ">
<div class="form-group">
<label for="text">Subjects:</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="forAllSubjects"
value="true" onclick="radioClicked(this.id)" >For All Subjects
</label>
<label class="radio-inline">
<input type="radio"
name="roleSubjectRadio" id="specificFlights"
value="Specific" onclick="radioClicked(this.id)" checked>
Specific Subject
</label> <input type="hidden" class="form-control" id="specs" name="specs"
value="">
</div>
<div class="form-group" id="subName">
<label for="createorigin" class="form-control-label"><font >Subject
Name:</font></label> <input type="text" class="form-control" id="subNo"
name="subNo" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
onclick="addMaster()">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
function radioClicked (me){
//specificFlights
//forAllSubjects
if(me === "forAllSubjects" && document.getElementById("subNo").classList.contains('disabled') === false){
document.getElementById("subNo").setAttribute("disabled",'disabled');
}else{
document.getElementById("subNo").removeAttribute("disabled",'disabled');
}
}
</script>

Show modal bootstrap with optional value from javascript with single quote

Modal can't be displayed because there is value single quote (') javascript:edit in variable three. please resolve this problem...
I've been using htmlspecial character in javascript function, but still no effect in single quotes.
thanks before -_-.
<div class="modal fade" id="mEditComment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit comment</h4>
</div>
<br>
<form name="editCmmt" class="form-horizontal" method="POST">
<fieldset>
<div class="control-group">
<!-- nama -->
<label class="control-label">Email</label>
<div class="controls">
<input type="text" name="email" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- nama -->
<label class="control-label">Name</label>
<div class="controls">
<input type="text" name="email" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- asal-->
<label class="control-label">Komentar</label>
<div class="controls">
<input type="text" name="comment" class="input-xlarge">
</div>
</div>
</fieldset>
<div class="modal-footer">
<input type="submit" name="edit" class="btn btn-success" value="Update">
<input type="reset" name="reset" class="btn btn-danger" value="reset">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
//open modal dialog for edit
function edit(satu, dua, tiga) {
document.editCmmt.email.value = satu;
document.editCmmt.name.value = dua;
document.editCmmt.komentar.value = tiga;
$('#mEditComment').modal('show');
</script>
Edit comment

Simply escape the single quote with \
<a href="#"
onclick="javascript:edit('bagus#domain.com','Bagus Wicaksono','the prob\'lem was here')"
data-toggle="modal"
class="btn btn-success btn-lg">
Edit comment</a>
and it'll work. This tells the parser that you want a literal ' to be inserted into the string.

ngSubmit not working inside modal?

It seems that my submit button is not activating the ng-click angular directive and I cannot figure out why. It seems that every other person that had this problem didn't include their submit button inside of their form, and I'm 99% sure I did that.
<div class="modal fade" id="subModal" ng-controller="SubscriberController" ng-controller-as="subCtrl">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">× </span><span class="sr-only">Close</span></button>
<h2 class="modal-title">Subscribe</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form ng-submit="console.log('submit')">
<div class="form-group">
<label for="subscriber-name" class="control-label"><strong>Name:</strong></label>
<input type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="subscriber-email" class="control-label"><strong>Email:</strong></label>
<input type="email" class="form-control" ng-model="subCtrl.subData.email" placeholder="johndoe#example.com" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block"><i class='fa fa-envelope'></i> Subscribe</button>
</div>
<div re-captcha ng-model="subCtrl.subData.captcha"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You need to put something like
<input ng-model="myForm.email" type="email" class="form-control" id="subCtrl.subData.email" placeholder="johndoe#example.com" required>
and
<input ng-model="myForm.name" type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
into your inputs, and give your form a name attribute
<form name="myForm" ng-submit="submit()">
plnkr: http://plnkr.co/edit/KRmZkPS6t4ANmAHwTevQ

Categories

Resources