I fetched record from mysql database when i enter any keyword in search box.
up to this everything run properly and also shows result of that particular keyword. My query is the fetched result will shows just below the search box instead of that i should show results on popup and the popup should be responsive also.
plz suggest me,
Below is the code
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="pt" dir="ltr"><head><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<!-- JQUERY FROM GOOGLE API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script></head> <body>
<div style="text-align:center;">
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
<div id="search_results"></div>
</div></body></html>
db_query.php
<?php $con=mysqli_connect("localhost","root", "","u871197953_shope") or die("Error connecting to database: ".mysql_error()); mysqli_select_db($con,"u871197953_shope") or die(mysql_error()); $query = mysqli_query($con,"select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$_POST['value']."%' LIMIT 20"); if(mysqli_num_rows($query) > 0)
{
?>
<div class="input-group col-sm-10 modal-box" id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
<table class="table table-hover" style="text-align:center;">
<thead>
<tr bgcolor="#1E90FF" >
<th>Products</th>
<th style="text-align:center;">Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<?php
while($results = mysqli_fetch_array($query))
{ ?>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:60px;width:80px;" /></td>
<td><?php echo "<p style='font-size:12px;'>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:30px;width:100px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
else
{ // if there is no matching rows do following
echo "No results found...";
} ?>
By default bootstrap popup/modal window is responsive. Dont worry about that.
Add modal window html codes in yor page.
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
After loading the result as add the result in model body
$('#myModal .modal-body').html(data);
Then trigger model using:
$('#myModal').modal(options);
- Use standard bootstrap options in the modal function.
Related
I got some problem using jquery for displaying existing data when crud edit button is click. The bootstrap popup windows is shown if I remove $('#catid).val(data[0]); and $('#catname).val(data[1]); from the code.If add back the code, the bootstrap popup windows not showing without error. Not sure it is the script problem or the form problem. Anyone can help! Thanks.
enter code here
<!-- Edit Model -->
<div class="modal fade" id="editcatmodel" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="catid" id="catid">
<div class="form-group">
<label>Category Name</label>
<input type="text" name="catname" id="catname" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">save</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<!-- Main screen display the crud data with edit button -->
<div class="container">
<table class="table">
<thead>
<th>ID</th>
<th>Category</th>
<th>Action</th>
</thead>
<tbody>
<?php
require_once 'source/db_connect.php';
$sql = "SELECT * FROM category";
$result = mysqli_query($link, $sql);
if ($result->num_rows > 0) {
//output data of each row
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row['catid']; ?></td>
<td><?php echo $row['catname']; ?> </td>
<td> <button type="button" class="btn btn-primary editcatbtn">edit</button> </td>
</tr>
<?php }
}
?>
<!-- script display the modal -->
<script>
$(document).ready(function () {
$(' .editcatbtn').on('click', function() {
$('#editcatmodel').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#catid).val(data[0]);
$('#catname).val(data[1]);
});
});
</script>
I am trying to display values from SQL Database onto a textbox using PHP and JQuery. The values are getting retrieved but does not display onto the textbox. What am I doing wrong?
<?php
require 'UpdateTimerSQL.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LiveData</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h2>Ajax</h2>
<p>Update Timer</p>
<table class="table">
<?php
$table = mysqli_query($connection, 'SELECT * FROM Timers');
while($row = mysqli_fetch_array($table)){
?>
<tr id="<?php echo $row['ID']; ?>">
<th>Timer_1</th>
<td data-target="Timer_1"><?php echo $row['Timer_1']; ?></td>
<th>
Update
</th>
</tr>
<?php
}
?>
</table>
<div class="container">
<div class="text-center"></div>
</div>
<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Neutral Timer 1</label>
<input type="hidden" id="ids" class="form-control">
<input type="text" id="Timer_1" class="form-control">
</div>
<div class="modal-footer">
Update
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(document).on('click', 'a[data-role=update]', function() {
var id = $(this).data('id');
//this(a tag)->tr(id)->td(data attr)->text
var Timer_1= $(this).closest('tr[id=' + id + ']').find("td[data-target='Timer_1']").text();
//putting value in input box
$('#Timer_1').val(Timer_1);
$('#myModal').modal('toggle');
});
EDIT:
I am able to show the values on the text field, thanks to the user who answered it here. But I am not able to update mySQL table when I change the textbox values after clicking on "#save". What am I doing wrong here?
//onclick of update button
$(document).on('click', '#save', function() {
//getting value of input box
var ids = $(this).closest(".modal-body").find("#ids").val();
var Timer_1= $(this).closest(".modal-body").find("#Timer_1").val();
$.ajax({
url : 'UpdateTimerSQL.php',
method : 'POST' ,
data : {Timer_1: Timer_1, ids: ids},
success : function(response){
$("table").find("tr[id='" + ids + "']").find("td[data-target='Timer_1']").text(Timer_1);
}
});
});
UpdateTimerSQL.php
<?php
$connection = mysqli_connect(...........);
if(isset($_POST['ID'])){
$Timer_1= $_POST['Timer_1'];
$ids = $_POST['ID'];
$result = mysqli_query($connection,"UPDATE Timers SET
Timer_1='$Timer_1' WHERE ID ='$ids'");
if($result){
echo 'data updated';
}
}
?>
Your table structure is invalid .Also, your Timer_1 was not able to find the text needed thats the reason it was not working .
Your php code should look like below :
<table class="table">
<?php
$table = mysqli_query($connection, 'SELECT * FROM Timers');
while($row = mysqli_fetch_array($table)){
?>
<tr id="<?php echo $row['ID']; ?>">
<th>Timer 1</th>
<td data-target="Timer_1">
<?php echo $row['Timer_1']; ?>
</td>
<th>
Update
</th>
</tr>
<?php
}
?>
</table>
Here is demo code :
$(document).ready(function() {
$(document).on('click', 'a[data-role=update]', function() {
var id = $(this).data('id');
//this(a tag)->tr(id)->td(data attr)->text
var Timer_1 = $(this).closest('tr[id=' + id + ']').find("td[data-target='Timer_1']").text();
//putting value in input box
$("#ids").val(id)
$('#Timer_1').val(Timer_1);
$('#myModal').modal('toggle');
});
//onclick of update button
$(document).on('click', '#save', function() {
//getting value of input box
var input_val = $(this).closest(".modal-body").find("#Timer_1").val();
//getting hidden id
var ids = $(this).closest(".modal-body").find("#ids").val();
//finding tr with same id and then update the td
$("table").find("tr[id='" + ids + "']").find("td[data-target='Timer_1']").text(input_val);
$('#myModal').modal('toggle');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Ajax</h2>
<p>Update Timer</p>
<table class="table">
<tr id="1">
<th>Timer 1</th>
<td data-target="Timer_1"> Something</td>
<th>
Update
</th>
</tr>
<tr id="2">
<th>Timer 1</th>
<td data-target="Timer_1"> Something123</td>
<th>
Update
</th>
</tr>
</table>
<div class="text-center"></div>
</div>
<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Timer 1</label>
<input type="hidden" id="ids" class="form-control">
<input type="text" id="Timer_1" class="form-control">
</div>
<div class="modal-footer">
Update
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm have a page where I can view the purchase history of sales
When I click on view full details this is what I get
The problem is when I click print full details this is what I get, I only want to print the window that pops up when I click on view full details
How do I print only the View Full Details window part?
Here's my code:
<!-- History -->
<div class="modal fade" id="detail<?php echo $hrow['salesid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<center><h4 class="modal-title" id="myModalLabel">Purchase Full Details</h4></center>
</div>
<div class="modal-body">
<?php
$sales=mysqli_query($conn,"select * from sales where salesid='".$hrow['salesid']."'");
$srow=mysqli_fetch_array($sales);
?>
<div class="container-fluid">
<div class="row">x
<div class="col-lg-12">
<p class="pull-right">Date: <?php echo date("F d, Y", strtotime($srow['sales_date'])); ?></p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label>
<button onclick="printsales()">Print Full details</button>
<script>
function printsales() {
window.print();
}
</script>
</label>
<table width="100%" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Purchase Qty</th>
<th>SubTotal</th>
</tr>
</thead>
<tbody>
<?php
$total=0;
$pd=mysqli_query($conn,"select * from sales_detail left join product on product.productid=sales_detail.productid where salesid='".$hrow['salesid']."'");
while($pdrow=mysqli_fetch_array($pd)){
?>
<tr>
<td><?php echo ucwords($pdrow['product_name']); ?></td>
<td align="right"><?php echo number_format($pdrow['product_price'],2); ?></td>
<td><?php echo $pdrow['sales_qty']; ?></td>
<td align="right">
<?php
$subtotal=$pdrow['product_price']*$pdrow['sales_qty'];
echo number_format($subtotal,2);
$total+=$subtotal;
?>
</td>
</tr>
<?php
}
?>
<tr>
<td align="right" colspan="3"><strong>Total</strong></td>
<td align="right"><strong><?php echo number_format($total,2); ?></strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
You just need to insert simple javascript code to print whole page. And by clicking on Click here to Print you can get print window.
<script type="text/javascript">
function PrintElem(elem,title)
{
Popup($(elem).html(),title);
}
function Popup(data,title)
{
var mywindow = window.open('', '_blank','width=1000,height=700');
mywindow.document.write('<html><head><title>'+title+'</title></head>');
mywindow.document.write('<body onload="window.print()">');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
return true;
}
</script>
Click here to Print
Add an ID to elements you want to hide, for example:
<div id="dontprint"> This will be hidden on print mode </div>
<div> This will be shown on print mode </div>
Then, using CSS hide those elements you don't want to print. Adding a code like this at the end of your code.
<style>
#media print {
div#dontprint{
display: none;
}
}
</style>
As you can see below, I have a php-generated table with a td that contains both edit and delete anchors. I put the $data['id'] inside the data-id attribute of the anchor and I pass it to the modal via jquery. However, the ID of the article is not being displayed on the modal. Can someone tell what is wrong with my codes? Is it the php, the html, or the jquery? Thanks!
<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center">EditDelete</div></td>';
echo '</tr>';
}
?>
PHP-GENERATED TABLE
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
HTML MODAL
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var myArticleId=$(opener).attr('data-id');
//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);
});
JQUERY
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Summary</th>
<th>Content</th>
<th><div align="center">Date Published</div></th>
<th><div align="center">Date Last Edited</div></th>
<th><div align="center">Action</div></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
</tbody>
</table>
INSPECTED PAGE - TABLE
$('#articleEditModal').on('show.bs.modal', function (e) {
An error shows on this line above:
Uncaught ReferenceError: $ is not defined
at cms.php:162
var opener = $(e.relatedTarget); instead of var opener=e.relatedTarget;
Reference Bootstrap Modal
Hope this helps!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<table>
<tr>
<th scope="row">2</th>
<td>
Edit
Delete
</td>
</tr>
</table>
<!-- Modal-->
<div id="articleEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#articleEditModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var article_id = button.attr('data-article-id')
// take advantage of data attribute
// var article_id = button.data('article-id');
var modal = $(this)
modal.find('.modal-title').text('Article ' + article_id)
modal.find('.modal-body input').val(article_id)
})
</script>
// Sample php data
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center">EditDelete</div></td>';
echo '</tr>';
}
?>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=$(e.relatedTarget);//this holds the element who called the modal
//we get details from attributes
var myArticleId=$(opener).attr('data-id');
//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);
});
</script>
I have a link that when the user clicks it, a modal will show containing the following:
<?php
include ('dbcontroller.php');
if(isset($_GET['view_id']))
{
$id=$_GET['view_id'];
$sql = mysqli_query($conn, "SELECT * from press where id='$id'");
$row = mysqli_fetch_array($sql);
?>
<input type="hidden" value="<?php echo $row['id']; ?>" />
<?php echo $row['reason']; ?>
GO BACK
<?php
}
$conn->close();
?>
The code above is what I did so that when the user click the link, it will redirect him to that page. But i want it to be in modal dialog instead since it's not much content.
This is the link that the user clicks. How will I open this link into a modal dialog?
Click to view
I've seen some on this site and elsewhere but all they have is a link without an ID to view modal dialog. I didn't find an issue same with mine so I decided to ask for help.
hey you can use following code to get row value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<br><br><br><br>
<table id="prab" border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Jackson"><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>50</td>
<td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="smith" ><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
</tr>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>clicked value </p>
<input type="text" id="valueof" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#prab').click(function(e){
// alert($(e.target).val());
document.getElementById("valueof").value = $(e.target).val();
})
</script>
</body>
</html>