I have a small issue with a required field in a body of a bootstrap modal, ideally i want to validate the field before submitting but for some reason required is working , Can you please have a look
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="$dismiss()" >
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title"><b>Additional Information:</b> ( This info will be added to all incident selected )</h5>
</div>
<div class="modal-body">
<p>Additional Comments :</p>
<form name="modalForm">
<div class="form-group">
<textarea class="form-control" rows="2" cols="68" id="comment" placeholder="Additional parent Info" required></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" ng-click="$close()" >Create</button>
</div>
</body>
Thanks
Change your submit button from type="button" to type="submit".
required attribute only works when there's a submit event listener.
Check out:
Form inputs in modal not showing as required
Try including the buttons inside the form tag:
<div class="modal-body">
<p>Additional Comments :</p>
<form name="modalForm">
<div class="form-group">
<textarea class="form-control" rows="2" cols="68" id="comment" placeholder="Additional parent Info" required></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<input type="submit" class="btn btn-primary" ng-click="$close()" ng-disabled="inputForm.$invalid" value="Create" />
</div>
</form>
</div>
Let me know if this helps
Related
When i push button open popup window, but this window work not correctly. I cant fill all lines and page footer climbs on the window popup
how fix it?
i use only bootstrap and i dont see any z-index
i have PartialView but i think that is view broke
this is view
#{
ViewData[index: "Title"] = "Create";
}
<h3>Create Employee</h3>
<hr/>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEmployeeLabel">Add Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Create">
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()"/>
<div class="form-group">
<label asp-for="FistName"></label>
<input asp-for="FistName" class="form-control"/>
<span asp-validation-for="FistName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="LastName"></label>
<input asp-for="LastName" class="form-control"/>
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Position" class="control-label"></label>
#Html.DropDownList("PositionId", (IEnumerable<SelectListItem>) ViewData["PositionId"], "- Select -", new {id = "PositionId"})
<span asp-validation-for="Position" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Salary"></label>
<input asp-for="Salary" class="form-control"/>
<span asp-validation-for="Salary" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DateStart"></label>
<input asp-for="DateStart" class="form-control"/>
<span asp-validation-for="DateStart" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DateEnd"></label>
<input asp-for="DateEnd" class="form-control"/>
<span asp-validation-for="DateEnd" class="text-danger"></span>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="save-employee">Save</button>
</div>
</div>
</div>
if need i can uploaded this progect to google disk.
That is because you create a modal in a separate razor view,it would use Layout by default.
Add the following code to your bootstrap modal and no need to add html outside the modal:
#{
Layout = null;
}
#*<h3>Create Employee</h3>
<hr />*#
its simple fix html bootstrapping. i transferred next code before </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="save-employee">Save</button>
</div>```
I need to show the values given in modal at outside the modal using AngularJS. Plunker attached here which clearly explains. Can anyone help me out........I have already checked Angular, Ui-Bootstrap site, but couldn't find the solution to the problem
HTML
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" ng-click="$ctrl.cancel()">×</button><a>
<h3 class="modal-title" id="modal-title" style="color:red">Please Provide the Details Here</h3>
</a>
</div>
<form name="modalForm" novalidate>
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.name.$invalid }"> <!--modalForm.name.$touched &&-->
<a>*Name: </a><input name="name" ng-minlength="3"
ng-maxlength="8" ng-model="name" type="text" placeholder="Name" class="form-control" size="10" style="width: 50%" required />
</div>
<div class="form-group" ng-controller="ButtonsCtrl">
<a>*Gender: </a><pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Male'" uncheckable>Male</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Female'" uncheckable>Female</label>
</div>
</div>
<div class="input-group" ng-controller="DatepickerPopupDemoCtrl">
<a>*Birth Date: Selected date is: <em>{{dt | date:'fullDate' }}</em></a><select class="form-control" ng-model="format" ng-options="f for f in formats" style="width: 50%"><option></option></select><input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" alt-input-formats="altInputFormats" style="width: 50%" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<p ng-show="modalForm.modalPlace.$error.required">Select service</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="$ctrl.ok()" ng-disabled="modalForm.$invalid">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</form>
</script>
<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
<div ng-show="$ctrl.selected">Name from the modal: {{ $ctrl.name }}</div>
<div ng-show="$ctrl.selected">Gender from the modal: {{ radioModel || 'null'}}</div>
<div ng-show="$ctrl.selected">DOB from the modal: {{ dt | date:'fullDate' }}</div>
What you are looking for is the modalInstance.result property, it a promise which is resolved with a value when you close your modal (or rejects when you dismiss it).
The docs already provide you with a simple example
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
Inside your modal controller you can close/dismiss the modal using these methods
var selectedItem = ...
$uibModalInstance.close(selectedItem)
// or
$uibModalInstance.dismiss(selectedItem)
With selectedItem being passes to the controller that launched the modal.
Because you code is incomplete I can't really help you much more then that, the docs hold all you need to know really.
I'm trying to align two buttons to ad input field but I end up messing everything every single time.
I've already aligned an input field to a single button, but I'm not able to add a second button.
This is the html (I'm using some angularjs):
<div class="row">
<div class="col-lg-12">
<form class="form" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="input-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit"
tooltip="Espandi filtri di ricerca" tooltip-placement="bottom"
ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</div>
</form>
</div>
</div>
This is a screenshot of the result:
As you can see the two button are not in the same line as the input field and they are also uneven (speaking about dimensions)...
Any help?!
UPDATE: updated the code (thanks to Mukesh Ram) but the buttons still have two different sizes..
You can have multiple buttons inside a single .input-group-btn. Like this:
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with multiple buttons">
<div class="input-group-btn"> <!-- add button in this div -->
<button type="button" class="btn btn-default" aria-label="Help">
<span class="glyphicon glyphicon-question-sign"></span>
</button>
<button type="button" class="btn btn-default">Action</button>
</div>
</div>
</div>
One other way :
form-inline and form-group
Bootply : http://www.bootply.com/uHEpGIOLwY
<div class="row">
<div class="col-lg-12">
<form class="form-inline" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="form-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit" tooltip="Espandi filtri di ricerca" tooltip-placement="bottom" ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</form>
</div>
</div>
I am using the twitter bootstrap, specifically the forms and modals. My main form is inside the modal-body, but the submit buttons need to be in the modal-footer. This would mean I have to close a div and open a new one inside the form, as shown below.
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</form>
</div>
For reference, this is what the modal looks like:
I am curious as to whether this is correct practice, or there is another way this should be approached (all I could think of is having the form tags Outside the modal-body tags).
Move the <form> tag so it encompasses the entire modal-body div.
Do not use incorrect nesting of tags.
<form>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
Just move the <div class="modal-body"> inside and the </form> outside your form:
<form>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
I have got the following HTML code. I have no idea why the POST is sent with no parameters (I checked the parameters are not being sent with the firefox debugger):
<div class="modal fade"id="myModal"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">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title"id="myModalLabel">Add opinion</h4>
</div>
<form role="form" action="api/sendEntry" method="post">
<div class="modal-body">
<div class="form-group">
<label for="user_message">The following: </label>
<input type="text" class="form-control" id="user_message" placeholder="In next...">
<label for="user_date">Until: </label>
<input type="date" class="form-control" id="user_date">
</div>
</div>
<div class="modal-footer">
<button type="submit"class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</form>
</div>
</div>
</div>
I suspect the nested input fields may have something to do with it, but I need to have them nested to have proper formatting.
You need to assign a name to your input fields. For example:
<input type="text" class="form-control"
id="user_message" name="user_message" placeholder="In next..." />
Form data is posted as name/value pairs. If you don't provide name attributes, nothing will be posted.
As a side note, I would also recommend you to correctly close your input tags.
<div class="modal fade"id="myModal"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">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title"id="myModalLabel">Add opinion</h4>
</div>
<form role="form" action="api/sendEntry" method="post">
<div class="modal-body">
<div class="form-group">
<label for="user_message">The following: </label>
<input type="text" class="form-control" id="user_message" placeholder="In next..." name="user_message">
<label for="user_date">Until: </label>
<input type="date" class="form-control" id="user_date" name="user_date">
</div>
</div>
<div class="modal-footer">
<button type="submit"class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</form>
</div>
</div>
Receive your data with $_POST['user_date'] and $_POST['user_message']