How to pass parameter in bootstrap Modal
Bootstrap is
one of the best CSS Framework widely used by developers who don’t like spend
days of week for CSS coding (Most boring and difficult to maintain redundant
code). Its is quite simple and flexible framework. Now developers can design
light weight websites in couple of days instead of spending weeks to design
website. It also provides plugins Ex, Dropdowns, Button Groups, Alerts, Process
Bars and Modals.
Here Mostly developers face problem with Extensive components.
Sometimes developer faces problem to pass variables in Model and save modal
element values to mysql table.
Create MYSQL table as below which will be used to save
modal element’s value.
CREATE TABLE IF NOT EXISTS `inward` (
`ent_no`
int(11) NOT NULL AUTO_INCREMENT,
`inw_no`
int(11) DEFAULT NULL,
`item_code` int(11) DEFAULT NULL,
`item_name` varchar(30) DEFAULT NULL,
`item_rate` double DEFAULT NULL,
`item_qty`
double DEFAULT NULL,
`item_unit` varchar(5) DEFAULT NULL,
`item_vat`
double DEFAULT NULL,
`item_addvat` double DEFAULT NULL,
`total`
double DEFAULT NULL,
`created_by` varchar(15) DEFAULT NULL,
`created_date` date DEFAULT NULL,
`edit_count` int(4) DEFAULT NULL,
PRIMARY
KEY (`ent_no`)
) ENGINE=InnoDB
DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;
STEP
- 1
Create
webpage named index.php and import
bootstrap css & JS files in header. Download Bootstrap from here.
Create Button to call modal on `onclick` event. It is
formatted by bootstrap style.
<button data-id='" . $var. "'
type='button' data-toggle='modal' id='edititem' class='btn btn-outline
btn-warning btn-xs'>
Launch
Modal
</button>
 |
| Output |
`$var` is variable that we will pass to modal. `edititem`
id added to button.
Step-2
Create Modal with form and form fields
item_code,rate,unit,vat,additional vat..
<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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Inward
Items</h4>
</div>
<form class="inwarditem">
<fieldset>
<div
class="modal-body">
<input
type="hidden" id="ent_no" name="ent_no"
value="<?php echo $ent_no; ?>" />
<div
class="form-group">
<label
class="form-label">Item Name</label>
<input
class="form-control"
name="item_code" type="text" value="<?php
echo $item_code; ?>"/>
</div>
<div
class="form-group">
<label
class="form-label">Rate</label>
<input
class="form-control"
name="item_rate" type="text" value="<?php
echo $item_rate; ?>"/>
</div>
<div
class="form-group">
<label
class="form-label">Qty</label>
<input
class="form-control"
name="item_qty" type="text" value="<?php
echo $item_qty; ?>"/>
</div>
<div
class="form-group">
<label
class="form-label">Unit</label>
<input
class="form-control"
name="item_unit" type="text" value="<?php
echo $item_unit; ?>"/>
</div>
<div
class="form-group">
<label
class="form-label">Vat</label>
<input
class="form-control" name="item_vat"
type="text" value="<?php echo $item_vat; ?>"/>
</div>
<div
class="form-group">
<label
class="form-label">Additional Vat</label>
<input class="form-control" name="item_addvat"
type="text" value="<?php echo $item_addvat; ?>"/>
</div>
</div>
</fieldset>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button type="button" id="submit-detail"
class="btn btn-primary">Save changes</button>
</div>
</div>
<!--
/.modal-content -->
</div>
<!--
/.modal-dialog -->
</div>
Now modal will look as
STEP-3
Insert
JS code at bottom of page. It will set parameter value of variable and pass it
to modal. At last it will call modal .
<script>
$(function() {
//twitter bootstrap script
$("button#submit-detail").click(function(){
$.ajax({
type:
"POST",
url:
"process.php",
data:
$('form.inwarditem').serialize(),
success: function(msg){
$("#thanks").html(msg)
},
error:
function(){
alert("failure");
}
});
});
});
</script>
Above Code will call on `onclick` event of button and run
code of `process.php`.
`data:
$('form.inwarditem').serialize(), ` pass
form element’s value to page with `POST` request.
STEP-4
Now, Create webpage `process.php` and past below code in
it.
<?php
$con =
mysql_connect('localhost','root','');
mysql_select_db('account',$con) or
die(mysql_error());
if($_POST['inw_no']){
$item_code = strip_tags($_POST['item_code']);
$item_rate = strip_tags($_POST['item_rate']);
$item_unit = strip_tags($_POST['item_unit']);
$item_qty = strip_tags($_POST['item_qty']);
$item_vat = strip_tags($_POST['item_vat']);
$item_addvat = strip_tags($_POST['item_addvat']);
$q = "update inward set
item_code=$item_code, item_rate=$item_rate, item_unit=$item_unit,
item_qty=$item_qty, item_vat=$item_vat, item_addvat=$item_addvat where ent_no = $ent_no";
mysql_query($q,$con);
}
?>
Finally it save data to mysql table.
That’s it you data is successfully save to mysql table.
