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']
Related
I have a bootstrap datetimepicker in my form. But when i select datetime, input box size keeps changing. After input it, i can't change the datetime with datetimepicker. I think, it's because datatble.min.js conflict with datetimepicker.js. But, but i still haven't solved it. Any help would be appreciated.
Before
Before add datetimepicker
Add
Add Date
Add Time
After
Input box size changed
Modal
<div id="modal_form" class="modal fade" role="dialog" aria-hidden="true" aria labelledby="formModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="formModalLabel"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" role="form" action="<?= base_url("catalog/insert") ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="col-md-3 control-label">Start Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="start">
<span class=" input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">End Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="end">
<span class="input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Descirption</label>
<div class="col-md-9">
<textarea class="form-control" rows="3" name="desc" id="desc" val=""></textarea>
<span class="help-block"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn grey-salsa btn-outline" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn green btn-primary" data-dismiss="modal" type="submit" id="btnsave">Save</button>
</div>
</div>
</div>
</div>
I suggest you use some special libraries which are made for this. https://www.daterangepicker.com/
https://flatlogic.com/blog/best-javascript-datepicker-libraries/
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 am trying to submit my modal title as post data, however it isn't being sent.
I have given the element a name attribute. Elements in the modal body are submitting as I would expect. Trying to submit the element whose name is "editModalTitle" below
HTML:
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
Form data here
Edit 1: Added full html for modal.
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<!-- hidden value for modal title to post -->
<input type="hidden" id="Modal_title_to_post" name="Modal_title_to_post" value="eModalTitle">
<!-- hidden value for modal title to post -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</div>
</form>
</div>
</div>
Updated code with hidden value for the modal title :)
Bootstrap Modal code
<!-- Signup Modal -->
<div class="modal fade" id="signUpForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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>
<h3 class="modal-title" id="myModalLabel">Please Sing Up</h3>
</div>
<div class="modal-body">
<?php echo form_open('Registration')?>
<div class="form-group">
<label for="login-email" class="control-label">Email:</label>
<input type="text" class="form-control" name="login-email" id="login-email">
</div>
<div class="form-group">
<label for="username" class="control-label">Username:</label>
<input type="text" class="form-control" name="username" id="username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password:</label>
<input type="password" class="form-control" name="password" id="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Signup</button>
</div>
<?php echo form_close()?>
</div>
</div>
</div>
And I have controller named Registration. when I click on button to launch the modal nothing happens. Button code that launches the modal.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signUpForm">Signup
</button>
You should add jQuery bootstrap "REQUEST"
More info here http://getbootstrap.com/2.3.2/javascript.html#modals
Add reference to jquery and bootstrap.min.js files in header and also add links for bootstrap css files.
I'm using angular-strap aside with Bootstrap3. My aside html template is given below -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
This works so far-
But if I change the code -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
Then it captures the whole window -
How can I make it to remain same size?
You can just add a max-width tag on your content class in aside template that you are loading.
Assume