I'm trying to pass some user entered data from a bootstrap form and push the values to a modal in an MVC4 project in visual studio 2013, tried reading a few topics but I'm struggling to find a simple answer.
How do i get a value from my boostrap form elements and return within the modal. Ive tried adding the JQuery into the modal myself from the documentation but I'm doing something wrong here, can anyone help with this ?
Form Elements :
<div class="form-group">
<label class="control-label col-xs-2" for="iMei">IMEI:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="imei" name="imei" placeholder="IMEI">
</div>
</div>
<div class="form-group">
<label for="platform" class="control-label col-xs-2">Platform:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Android</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">IOS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Windows Phone</a> </li>
</ul>
</div>
</div>
</div>
My Modal :
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<a href="#" class="btn btn-success"
data-toggle="modal"
data-target="#basicModal">Create New Request</a>
<button type="submit" class="btn btn-primary">Back to List</button>
</div>
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Summary</h4>
</div>
<div class="modal-body">
<script>
$('#basicModel').on('show.bs.model', function (e) {
var imei =
$(e.relatedTarget).data('imei');
});
</script>
</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>
</div>
</div>
</div>
In the end i used the following solution:
Jquery to send form data
$("#SendRequest").click(function () {
var imei = ("IMEI: " + $("#imei").val());
$('#printImei').html(imei);
var phonenumber = ("Phone Number: " + $("#phoneNumber").val());
$('#printPhoneNumber').html(phonenumber);
var policynumber = ("Policy Number: " + $("#policyNumber").val());
$('#printPolicyNumber').html(policynumber);
});
And in the Modal Body
<div class="modal-body">
<span id="printImei"></span><br />
<span id="printPhoneNumber"></span><br />
<span id="printPolicyNumber"></span>
</div>
Related
I want to make an approve and reject button in foreach loop.
Approve button use only item's ID. So I have no problem.
<button type="button" class="btn btn-success" onclick="location.href='#Url.Action("Approve", "Home", new {page = "leave/st/approve/", id = #item.ID, actionName ="LeaveRequests"})'">Approve</button>
But in reject button, I have to take explanation from text area to send web service.
So I added a bootstrap modal;
<button type="button" id="btnReject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop-#item.ID">Rejet</button>
And this is my modal ;
<!-- Modal --><div class="modal fade" id="staticBackdrop-#item.ID" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Red İşlemi</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">
<label for="input" class="col-sm-12 col-form-label">Explanation .. </label>
<div class="col-sm-12">
#*I want to get this explanation*#
<textarea id="explanation" class="form-control" style="height: 100px"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
#*THIS URL ACTION*#
<a class="btn btn-success" href="#Url.Action("Reject", "Home", new {page="leave/st/reject/",id=#item.ID,
actionName = "LeaveRequests", exp= ? })" id="lnk">OK</a>
</div>
</div>
</div>
</div>
I have to get value from explanation text area and add to url action in modal.
How can I get textarea value in url action ?
My view form is here ;
<form method="post">
<section class="section">
<div class="row">
<div class="col-lg-12">
#foreach (var item in Model)
{
<div class="card">
<div class="card-body">
<h5 class="card-title">#item.NameSurname - #item.Section</h5>
<h6 class="card-subtitle mb-2 text-muted">#item.StartDate / #item.EndDate</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Days gün #item.Hours saat</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Type #item.PriceState</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Expression</h6>
<p class="card-text">#item.CompExplain</p>
<button type="button" class="btn btn-success" onclick="location.href='#Url.Action("Approve", "Home", new {page = "leave/st/approve/", id = #item.ID, actionName ="LeaveRequests"})'">Approve</button>
<button type="button" id="btnReject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop-#item.ID">Reject</button>
</div>
</div>
<!-- Modal --><div class="modal fade" id="staticBackdrop-#item.ID" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Red İşlemi</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">
<label for="input" class="col-sm-12 col-form-label">Explanation..</label>
<div class="col-sm-12">
#*I want to get this explanation*#
<textarea id="explanation" class="form-control" style="height: 100px"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
#*THIS URL ACTION*#
<a class="btn btn-success" href="#Url.Action("Reject", "Home", new {page="leave/st/reject/",id=#item.ID,
actionName = "LeaveRequests", exp= ? })" id="lnk">OK</a>
</div>
</div>
</div>
</div>
}
</div>
</div>
</section>
</form>
First, you should post your question with "actual" code. if you are using jQuery you can use JS to pull the value from the textarea or any input by using its id:
<script>
$('#btnReject').click(function() {
$.ajax({
url: #Url.Action("Reject", "Home", {page="leave/st/reject/", id=#item.ID, actionName = "LeaveRequests"}) + '?exp=' + $("#explanation").val()
type: 'POST',
// ... other ajax options ...
});
});
</script>
otherwise you can use form element and use "submit" buttons to submit values to form action. You may have to adapt this code to your project.
<form method="get" action="#Url.Action("MyAction", "MyController")" >
#Html.Textbox("toPay")
<input type="submit" value="Pay"/>
</form>
I would suggest using JS to pull this off.
I have a panel with buttons
<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left">
<button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button>
<div class="btn-group btn" style="padding:0;">
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Line</li>
<li>Bar</li>
</ul>
</div>
<button class="btn btn-default">Show</button>
</div>
</div>
and for the dropdown, when the user selects an option, it should change the name of the button
$(function () {
$(".dropdown-menu li a").click(function () {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
#*<button type="button" class="btn btn-danger" style="float:left;" data-dismiss="modal">Cancel</button>*#
<button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
but it also changes the name of the Edit button. I don't know what am I doing wrong :( It is possible to group a dropdown in left and a Show button to the right, change the left button name according to the selection without affecting the rest of the buttons and also, to display one popup based on the selection when the user presses Show (each selection has it's own popup)?
I'm pretty new in JavaScript programming so please be gentle :)
You code was not working because you CSS selector .btn:first-child is selecting multiple btn elements thus updating multiple buttons text.
If you want to update the toggle button you can do this as follows.
You can select the toggle button using this selector .btn.dropdown-toggle
in you jquery.
I would suggest you to add an id to the button and select it using an id.
SNIPPET
$(function() {
$(".dropdown-menu li a").click(function() {
//$('.btn.dropdown-toggle').text($(this).text());
$('#toggle').text($(this).text());
});
$('#show').click(function(){
var show = $('#toggle').text();
alert(show);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left">
<button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button>
<div class="btn-group btn" style="padding:0;">
<button id="toggle" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Line</li>
<li>Bar</li>
</ul>
<button id ="show" class="btn btn-default">SHOW</button>
</div>
</div>
I've created two form in different php files one is Login form and other is Register form, Then there is two Login and Register buttons in the menu
How can i make these buttons shows their forms in modal?
You can do it with an ajax query so I gonna give you an example that how you can do it:
The HTML and JS:
<body>
<div id="my_modal" class="modal"></div>
<button onclick="showLoginModal()">Login</button>
<button onclick="showRegisterModal()">Register</button>
</body>
<script>
function showLoginModal(){
$.ajax({
url:'php/login_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
function showRegisterModal(){
$.ajax({
url:'php/register_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
</script>
The login_content.php file:
<?php ?><div class="modal-content">
<form action="" method="post">
User
<input name="user_name" id="user_name" type="text"> Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login">Login</button>
</form>
The register_content.php file:
<?php ?>
<div class="modal-content">
<form action="" method="post">
Username
<input name="user_name" id="user_name" type="text">
Password
<input name="user_pass" id="user_pass" type="password">
Confirm Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login"> Register</button>
</form></div>
Greetings!
I'll flesh out my comment on Darwin's answer a little more so you can see what I am talking about.
Now, I warn you about having a fallback way to get the user to the login page just in case javascript doesn't work for whatever reason (and there are many reasons why it wouldn't), but that being said.
The code here is not entirely correct as it involves multiple files, for a full working demo please go to This Plunkr
// Code goes here
$(function() {
$('.modal-btn').on('click', function(e) {
e.preventDefault();
var id = this.id;
$('#login-register-modal').load(id + '_content.html', function(response, status) {
if (status == 'success')
$('#login-register-modal').modal();
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link <span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="btn-group">
<button id="login" class="btn btn-default modal-btn">Login</button>
<button id="register" class="btn btn-default modal-btn">Register</button>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="login-register-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Register_content.html
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
Login_content.html
<div class="modal-content">
<div class="modal-header">
Login
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
THis is my html code with the modal function
<div class="modal fade" id="listSensorModal" tabindex="-1" role="dialog" aria-labelledby="listSensorModal">
<div class="modal-dialog" role="document">
<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" id="deviceModal">Followers List</h4>
</div>
<div class="modal-body">
<br>
<div class="row form-group has-feedback" ng-repeat="sensors in listedSensors">
<div class="col-md-6">
{{sensors.id}}
</div>
<div class="col-md-3">
<!-- <input type="checkbox" ng-model="devices.deviceActive" bootstrap-switch class="make-switch" data-on="success" data-off="warning" ng-change="changeStatus(devices)"> -->
</div>
<!-- <div class="col-md-3">
<button type="button" class="btn btn-primary" ng-click="editSensors(sensors)"><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-primary" ng-click="removeSensor(sensors.id)"><i class="fa fa-trash"></i></button>
<button type="button" class="btn btn-primary" ng-show="!sensors.deviceId" ng-click="linkToDevice(sensors)"><i class="fa fa-plus"></i></button>
<button type="button" class="btn btn-primary" ng-show="sensors.deviceId" ng-click="UnlinkDevice(sensors)"><i class="fa fa-minus"></i></button>
</div> -->
</div>
<div class="row form-group has-feedback" ng-show="listedSensors.length==0">
<h3 align="center">No Sensors here</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary" ng-click="showAddSensorModal()">Add a New Sensor</button> -->
</div>
</div>
</div>
</div>
</div>
This is my Js code which shows the modal.Am getting data here but not the modal.
$scope.launchSensorModal = function(){
// $rootScope.showLoadingMessage('Please Wait');
API.followers().
then(function(responseData){
if(typeof responseData === 'object'){
// $rootScope.hideLoadingMessage('Please Wait');
$scope.listedSensors = responseData.data[0];
console.log("Sensor",responseData.data);
console.log("Sensor",responseData.data[0].full_name);
$('#listSensorModal').modal('show');
console.log("Sensor",responseData.data);
console.log("Sensor",responseData.data[0].full_name);
}
else{
console.log("Failed to get Listed Sensor. Please try again",responseData);
}
},function(responseData){
console.log("Failed to get Listed Sensor. Please try again",responseData);
})}
my console looks like this:
Sensor [Object]0: Objectfull_name: "Skater Gal"id: "2351640229"profile_picture: "https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xft1/t51.2885-19/11906329_960233084022564_1448528159_a.jpg"username: "_skaterg1rl"__proto__: Objectlength: 1__proto__: Array[0]
navbar.js:45 Sensor Skater Gal
navbar.js:47 Sensor [Object]
navbar.js:48 Sensor Skater Gal
Am not getting the data to the list in my modal.
can anyone help me??
I have a Twitter Bootstrap list whose items have badged to show the amount of each item. I want to open a modal dialog to edit that amounts. But since it is going to be a long dynamic list, I can't write a function for each badge, but an only function which is able to determine who called the modal and:
Get the actual amount of the caller badge to be shown at the modal
Store the new amount when user changes the modal
HTML:
<div class="panel panel-primary">
<div class="panel-heading">Shopping cart</div>
<div class="panel-body">
<ul id="cart-list" class="list-group">
<li href="#" class="list-group-item" data-type="banana">Bananas
<div class="pull-right"> <span id="badge" class="badge">5</span>
</div>
</li>
<li href="#" class="list-group-item" data-type="pear">Pears
<div class="pull-right"> <span id="badge" class="badge">2</span>
</div>
</li>
</ul>
</div>
</div>
<!-- Input-spinner modal dialog -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<button class="btn btn-default"><i class="fa fa-caret-up"></i>
</button>
<button class="btn btn-default"><i class="fa fa-caret-down"></i>
</button>
</div>
</div> <span class="help-block">Set the number of items</span>
</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>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
JS:
// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
group: {
name: "fruit_group",
pull: true,
put: true
},
});
// Configure click action over the badges
jQuery(".badge").click(function() {
console.log('Clicked badge, showing modal');
$("#myModal").modal('show');
});
// Input-spinner function
(function ($) {
$('.spinner .btn:first-of-type').on('click', function () {
$('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function () {
$('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);
This is a jsfiddle with my attempt. I don't know why the modal does not show up, it works localy. I suppose I made some mistake writting the example, o maybe jsfiddle just don't like modals. Anyway I think it shows what am I trying to achieve.
Any help?
something like this? http://jsfiddle.net/upjy4s5b/
using jquery and formatting your html structure with classes allows you to find different things in relation to other things. calling the bootstrap modal via jquery call instead of the inline call allows for easy transfer of the information you want.
$(document).ready(function() {
$('.edit').on('click', function() {
var name = $(this).closest('.item').find('.name').html();
var count = $(this).closest('.item').find('.count').html();
$('#myModal').find('.modal-body').find('.itemName').html(name);
$('#myModal').find('.modal-body').find('.itemCount').html(count);
$('#myModal').modal('show');
});
});
<ul class="list">
<li class="item">
<span class="name">Item 1</span>
<span class="count">Count 1</span>
Edit
</li>
<li class="item">
<span class="name">Item 2</span>
<span class="count">Count 2</span>
Edit
</li>
<li class="item">
<span class="name">Item 3</span>
<span class="count">Count 3</span>
Edit
</li>
</ul>
<div class="modal fade" id="myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
Name: <span class="itemName"></span>
Count: <span class="itemCount"></span>
</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>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->