Populate modal with a mysql query reult data - javascript

i have an html page that shows data populated from mysql database.
I give to user choice to edit records. I would like to use a modal form that, when pressed edit, it open up and display data result from mysql db and realated to a certain "id".
Can you help me to achieve this?
Reading on web i've understood that i have to use jquery, but i cannot find a way.
For now i tried as following:
<form method="post">
<div class="modal fade" id="edit_grp" tabindex="-1" role="dialog" aria-labelledby="edit_grpLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit_grpLabel">Modifica Interno</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Sequenza Chiamata</label>
<input type="text" class="form-control" name="edit_grp_pos" id="edit_grp_pos" value="<?php echo $row[0]['grp_pos']; ?>">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="email" class="form-control" name="edit_grp_name" id="edit_grp_name" value="<?php echo $row[0]['grp_name']; ?>">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" name="edit_grp_phone" id="edit_grp_phone" value="<?php echo $row[0]['grp_phone']; ?>">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" name="submit" value="submit" id="submit_edit_grp" class="btn btn-primary" onClick="closeAll()">Modifica</button>
</div>
</div>
</div>
</div>
</form>
EDIT 1:
I'am having some tests.
For now 've changed code like this:
`
<form method="post">
<div class="modal fade" id="edit_grp" tabindex="-1" role="dialog" aria-labelledby="edit_grpLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit_grpLabel">Modifica Interno</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="phone_details">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" name="submit" value="submit" id="submit_edit_grp" class="btn btn-primary" onClick="closeAll()">Modifica</button>
</div>
</div>
</div>
</div>
</form>
`
`
$(document).on('click', '.view_phone_data', function(){
var data_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"POST",
data:{data_id:data_id},
success:function(data){
$('#phone_details').html(data);
$('#edit_grp').modal('show');
}
});
});
`
and select.php
`
<?php
if(isset($_POST["data_id"]))
{
$output = '';
$connect = mysqli_connect("localhost","administrator","psw","db");
$query = "SELECT * FROM gruppioxe WHERE id = '".$_POST["data_id"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Ordine Chiamata</label>
<input type="tel" class="form-control" id="'.$row["grp_pos"].'" name="'.$row["grp_pos"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="text" class="form-control" id="'.$row["grp_name"].'" name="'.$row["grp_name"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" id="'.$row["grp_phone"].'" name="'.$row["grp_phone"].'">
</div>
</form>
';
}
echo $output;
}
?>
`
But still no result..

Solved!!!
i've changed select.php as following:
`
$output .= '
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Ordine Chiamata</label>
<input type="tel" class="form-control" id="grp_pos" name="grp_pos" value="'.$row["grp_pos"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="text" class="form-control" id="grp_name" name="grp_name" value="'.$row["grp_name"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" id="grp_phone name="grp_phone" value="'.$row["grp_phone"].'">
</div>
</form>
';
}
echo $output;
`

Related

How to insert value in table by ID?

i have php code and mysql database and i have one problem, for example i have item with name Subaru with ID 1 and also Ford with ID 2 when i try to add event for Subaru it's not adding value to ID 1 its adding to ID 2(to last ID it can be other.) i want to make like this, when i press button with ID 1 its inserting value to ID 1 and when i select for example ID 5 its adding value to ID 5. There is my php code also my database sql. i think you understand me, My English is not so good...
there is my code and database here
<a href="#out<?php echo $id;?>" data-toggle="modal">
<button type='button' class='btn btn-default btn-sm'><span class='glyphicon glyphicon-minus' aria-hidden='true'></span></button>
</a>
<a href="#add<?php echo $id;?>" data-toggle="modal">
<button type='button' class='btn btn-success btn-sm'><span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button>
</a>
<a href="#edit<?php echo $id;?>" data-toggle="modal">
<button type='button' class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-edit' aria-hidden='true'></span></button>
</a>
<a href="#delete<?php echo $id;?>" data-toggle="modal">
<button type='button' class='btn btn-danger btn-sm'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>
</a>
</td>
<!--In Stock/s Modal -->
<div id="add<?php echo $id; ?>" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<form method="post" class="form-horizontal" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stocks</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-2" for="item_name">Item Name:</label>
<div class="col-sm-3">
<input type="hidden" name="add_stocks_id" value="<?php echo $id; ?>">
<input type="text" class="form-control" id="item_name" name="item_name" placeholder="Item Name" required readonly value="<?php echo $item_name; ?>"> </div>
<label class="control-label col-sm-2" for="item_code">Item Code:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="item_code" name="item_code" placeholder="Item Code" required readonly value="<?php echo $item_code; ?>" autocomplete="off"> </div>
<label class="control-label col-sm-1" for="dr_no">DR #:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="dr_no" name="dr_no" placeholder="DR #" autocomplete="off">
</div>
</div>
<br>
<br>
<div class="form-group">
<label class="control-label col-sm-2" for="item_name">Quantity:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" autocomplete="off" required min="1"> </div>
<label class="control-label col-sm-2" for="item_name">Remarks:</label>
<div class="col-sm-4">
<textarea class="form-control" id="remarks" name="remarks" placeholder="Remarks"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="event">Event:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="item_name" name="event" placeholder="Event">
</div>
</div>
<br>
<br>
<br>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="add_inventory"><span class="glyphicon glyphicon-plus"></span> Add</button>
<button type="button" class="btn btn-warning" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>
</div>
</form>
</div>
</div>
</div>
<div id="out<?php echo $id; ?>" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<form method="post" class="form-horizontal" role="form">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Out Stocks</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-2" for="item_name">Item Name:</label>
<div class="col-sm-2">
<input type="hidden" name="minus_stocks_id" value="<?php echo $id; ?>">
<input type="text" class="form-control" id="item_name" name="item_name" placeholder="Item Name" required readonly value="<?php echo $item_name; ?>"> </div>
<label class="control-label col-sm-2" for="item_code">Item Code:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="item_code" name="item_code" placeholder="Item Code" required readonly value="<?php echo $item_code; ?>"> </div>
<label class="control-label col-sm-2" for="dr_no">DR No.:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="dr_no" name="dr_no" placeholder="DR No." autocomplete="off" required autofocus> </div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="item_name">Quantity:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" autocomplete="off" required max="<?php echo $qty; ?>" min="1"> </div>
<label class="control-label col-sm-2" for="received_by" data-toggle="tooltip" title="Unit of Measurement">Receive By:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="received_by" name="received_by" autocomplete="off" required> </div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="item_name">Remarks:</label>
<div class="col-sm-10">
<textarea class="form-control" id="remarks" name="remarks" placeholder="Remarks"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="minus_inventory"><span class="glyphicon glyphicon-plus"></span> Out</button>
<button type="button" class="btn btn-warning" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="changepass" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form action="" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Change Password</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Current:</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="current_password" required placeholder="Current Password" autofocus autocomplete="off"> </div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="name">New:</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="new_password" required placeholder="New Password" autocomplete="off"> </div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="name">Repeat:</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="repeat_password" required placeholder="Repeat Password" autocomplete="off"> </div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="change_pass">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="edit<?php echo $id; ?>" class="modal fade" role="dialog">
<form method="post" class="form-horizontal" role="form">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Item</h4>
</div>
<div class="modal-body">
<input type="hidden" name="edit_item_id" value="<?php echo $id; ?>">
<div class="form-group">
<label class="control-label col-sm-2" for="item_name">Item Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="item_name" name="item_name" value="<?php echo $item_name; ?>" placeholder="Item Name" required autofocus> </div>
<label class="control-label col-sm-2" for="item_code">Item Code:</label>
<div class="col-sm-4">
<input type="text" readonly class="form-control" id="item_code" name="item_code" value="<?php echo $item_code; ?>" placeholder="Item Code" required> </div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="item_description">Description:</label>
<div class="col-sm-4">
<textarea cclass="form-control" id="item_description" name="item_description" placeholder="Description" required style="width: 100%;">
<?php echo $item_description; ?>
</textarea>
</div>
<label class="control-label col-sm-2" for="item_category">Category:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="item_category" name="item_category" value="<?php echo $item_category; ?>" placeholder="Category" required> </div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="update_item"><span class="glyphicon glyphicon-edit"></span> Edit</button>
<button type="button" class="btn btn-warning" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>
</div>
</div>
</div>
</form>
</div>
<!--Delete Modal -->
<div id="delete<?php echo $id; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<form method="post">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete</h4>
</div>
<div class="modal-body">
<input type="hidden" name="delete_id" value="<?php echo $id; ?>">
<div class="alert alert-danger">Are you Sure you want Delete <strong>
<?php echo $item_name; ?>?</strong> </div>
<div class="modal-footer">
<button type="submit" name="delete" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> YES</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> NO</button>
</div>
</div>
</div>
</form>
</div>
</div>
</tr>
<?php
}
if(isset($_POST['change_pass'])){
$sql = "SELECT password FROM tbl_user WHERE username='$session_username'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
if($row['password'] != $current_password){
echo "<script>window.alert('Invalid Password');</script>";
$passwordErr = '<div class="alert alert-warning"><strong>Password!</strong> Invalid.</div>';
} elseif($new_password != $repeat_password) {
echo "<script>window.alert('Password Not Match!');</script>";
$passwordErr = '<div class="alert alert-warning"><strong>Password!</strong> Not Match.</div>';
} else{
$sql = "UPDATE tbl_user SET password='$new_password' WHERE username='$session_username'";
if ($conn->query($sql) === TRUE) {
echo "<script>window.alert('Password Successfully Updated');</script>";
} else {
echo "Error updating record: " . $conn->error;
}
}
}
} else {
$usernameErr = '<div class="alert alert-danger"><strong>Username</strong> Not Found.</div>';
$username = "";
}
}
//Update Items
if(isset($_POST['update_item'])){
$edit_item_id = $_POST['edit_item_id'];
$item_name = $_POST['item_name'];
$item_code = $_POST['item_code'];
$item_category = $_POST['item_category'];
$item_description = $_POST['item_description'];
$sql = "UPDATE tbl_garage SET
item_name='$item_name',
item_code='$item_code',
item_category='$item_category',
item_description='$item_description'
WHERE id='$edit_item_id' ";
if ($conn->query($sql) === TRUE) {
echo '<script>window.location.href="inventory.php"</script>';
} else {
echo "Error updating record: " . $conn->error;
}
}
if(isset($_POST['delete'])){
// sql to delete a record
$delete_id = $_POST['delete_id'];
$sql = "DELETE FROM tbl_garage WHERE id='$delete_id' ";
if ($conn->query($sql) === TRUE) {
$sql = "DELETE FROM tbl_inventory WHERE id='$delete_id' ";
if ($conn->query($sql) === TRUE) {
$sql = "DELETE FROM tbl_inventory WHERE id='$delete_id' ";
echo '<script>window.location.href="inventory.php"</script>';
} else {
echo "Error deleting record: " . $conn->error;
}
} else {
echo "Error deleting record: " . $conn->error;
}
}
}
//Add Item
if(isset($_POST['add_item'])){
$item_name = $_POST['item_name'];
$item_code = $_POST['item_code'];
$item_category = $_POST['item_category'];
$item_description = $_POST['item_description'];
$sql = "INSERT INTO tbl_garage (item_name,item_code,item_description,item_category,item_critical_lvl,item_date)VALUES ('$item_name','$item_code','$item_description','$item_category','$item_critical_lvl','$date')";
if ($conn->query($sql) === TRUE) {
$add_inventory_query = "INSERT INTO tbl_inventory(item_name,item_code,date,qty)VALUES ('$item_name','$item_code','$date','0')";
if ($conn->query($add_inventory_query) === TRUE) {
echo '<script>window.location.href="inventory.php"</script>';
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
if(isset($_POST['add_inventory'])){
$add_stocks_id = clean($_POST['add_stocks_id']);
$remarks = clean($_POST["remarks"]);
$quantity = clean($_POST['quantity']);
$event = clean($_POST['event']);
$sql = "INSERT INTO tbl_events(date,item_name,item_code,qty,remarks,event)VALUES ('$date_time','$item_name','$item_code','$quantity','$remarks','$event')";
if ($conn->query($sql) === TRUE) {
$add_inv = "UPDATE tbl_inventory SET qty=(qty + '$quantity') WHERE id='$add_stocks_id' ";
if ($conn->query($add_inv) === TRUE) {
echo '<script>window.location.href="inventory.php"</script>';
} else {
echo "Error updating record: " . $conn->error;
}
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
if(isset($_POST['minus_inventory'])) {
$minus_stocks_id = clean($_POST['minus_stocks_id']);
$remarks = clean($_POST["remarks"]);
$quantity = clean($_POST['quantity']);
$sql = "INSERT INTO tbl_events(date,item_name,item_code,qty, sender_receiver,in_out, remarks)VALUES ('$date_time','$item_name','$item_code','$quantity','$received_by','out','$remarks')";
if ($conn->query($sql) === TRUE) {
$add_inv = "UPDATE tbl_inventory SET qty=(qty - '$quantity') WHERE id='$minus_stocks_id' ";
if ($conn->query($add_inv) === TRUE) {
echo '<script>window.location.href="inventory.php"</script>';
} else {
echo "Error updating record: " . $conn->error;
}
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
?>
</tbody>
</table>
</div>
<!--Add Item Modal -->
<div id="add" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<form method="post" class="form-horizontal" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Item</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-2" for="item_name">Item Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="item_name" name="item_name" placeholder="Item Name" autocomplete="off" autofocus required> </div>
<label class="control-label col-sm-2" for="item_code">Item Code:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="item_code" name="item_code" placeholder="Item Code" autocomplete="off" required> </div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="item_category">Category:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="item_category" name="item_category" placeholder="Item Category" autocomplete="off" required> </div>
<label class="control-label col-sm-2" for="item_critical_lvl">Critical Level:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="item_critical_lvl" name="item_critical_lvl" autocomplete="off" required> </div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="item_sub_category">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" id="item_description" name="item_description" autocomplete="off" required></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="add_item"><span class="glyphicon glyphicon-plus"></span> Add</button>
<button type="button" class="btn btn-warning" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>
</div>
</form>
</div>
</div>
</div>

PHP Code Igniter cannot show data in modal bootstrap

I'm using codeigniter franmework. I try to appear the data into a modal. but i have a problem with my datas. They don't appear in modal. I followed the tutorial on the internet but it doesn't work. Here is my button click code which purposed to show data :
<a href="javascript:;"
data-id="<?php echo $row->id ?>"
data-kode="<?php echo $row->kode ?>"
data-subkode="<?php echo $row->subkode ?>"
data-nama_kegiatan="<?php echo $row->nama_kegiatan ?>"
data-toggle="modal" data-target="#edit-data">
<button data-target="#ubah-data" data-toggle="modal" class="btn btn-info">Ubah</button>
</a>
This is my modal code
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="edit-data" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Ubah Data</h4>
</div>
<form class="form-horizontal" action="<?php echo base_url('dashboard/rka2/ubah')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Kode</label>
<div class="col-lg-10">
<input type="hidden" id="id" name="id">
<input type="text" class="form-control" id="kode" name="kode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Subkode</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="subkode" name="subkode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Nama Kegiatan</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="nama_kegiatan" name="nama_kegiatan">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" type="submit"> Simpan </button>
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
</div>
</form>
</div>
</div>
And this is the script for getting datas
<script>
$(document).ready(function() {
// Untuk sunting
$('#edit-data').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#id').attr("value",div.data('id'));
modal.find('#kode').attr("value",div.data('kode'));
modal.find('#subkode').attr("value",div.data('subkode'));
modal.find('#nama_kegiatan').attr("value",div.data('nama_kegiatan'));
});
});
</script>

How to get data from modal window?

I've a modal dialog.
<div id="myLoginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Войти в учетную запись</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-md-4 control-label" for="login">Логин</label>
<div class="col-md-4">
<input id="login" name="login" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="password">Пароль</label>
<div class="col-md-4">
<input id="password" name="password" type="password" class="form-control input-md" required="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="loginBttn" class="btn btn-success" data-dismiss="modal">Войти</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
</div>
</div>
</div>
...and have menu.php file.
<?php
$login = $_POST['login'];
$password = $_POST['password'];
echo $login.$password;
How can I get and load in div element user's login and password from modal dialog when he is pressing submit button?
I've tried to write that, but it's not working - exception "undefined index $login and $password".
$(document).ready(function() {
$("#loginBttn").click(function() {
$("#content").load('menu.php');
});
});
You can submit the form and use the success callback:
$(document).ready(function() {
$("#loginBttn").click(function() {
$.post('menu.php', $("#myLoginModal form").serialize(), function(html){
$('#content').html(html);
}, 'html')
});
});
EDIT: Also you can check https://api.jquery.com/jquery.post/
I've just used PHP Tools for VS and I did it!
The problem was the default settings for the php interpreter v7.1 !

How to get data on button click in Bootstrap modal

I'm trying to get the distance from departure and destination using Google Map API. Its working nicely! But the problem is, I have departure field and Destination field. After filling those fields, if I click on "Get the Distance" button then I wanted it to show the distance value in Bootstrap modal. But, its not showing. That means, I'm not getting distance value in Modal.
Form
<form action="" method="get">
<div class="InP">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
<input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<?php if($moorgiz['customize-style']=='black') { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
<?php } else { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
<?php } ?>
<div class="InP" style="margin-top:4%;">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
<input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<div class="form-group">
<label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
<select class="form-control pull-left CustomControl-NoP" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-sm-12">
<input type="submit" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>
Modal HTML
<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">
<?php
$addressFrom = $_GET['departure'];
$addressTo = $_GET['desti'];
$distance = getDistance($addressFrom, $addressTo, "K");
echo $distance;
?>
</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>
Can you guys please suggest me something?
What you need is modal event and ajax method
Couple of changes required in form
change method from get to post or no need at all
assign id='myForm' to form
change type="submit" to type="button"
The form will be
<form action="" method="POST" id="myForm">
<div class="InP">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
<input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<?php if($moorgiz['customize-style']=='black') { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
<?php } else { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
<?php } ?>
<div class="InP" style="margin-top:4%;">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
<input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<div class="form-group">
<label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
<select class="form-control pull-left CustomControl-NoP" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-sm-12">
<input type="button" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>
Modal HTML (added <div class="getdistance"></div> to display the data via ajax method)
<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 class="getdistance"></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>
</div>
</div>
</div>
Modal event listener with Ajax method
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function () {
var form = $('#myForm'); //Get Form
$.ajax( {
type: "POST",
url: caculatedistance.php, //Create this file to handle the form post data
data: form.serialize(), //Post the form
success: function(response) {
$('.getdistance').html(response); //show the distance in modal
}
});
});
});
last create caculatedistance.php where you handle the form posted values, calculate the distance and echo the output to display in modal
<?php
//include getDistance() function
if(isset($_POST['departure'])) {
$addressFrom = $_POST['departure'];
$addressTo = $_POST['desti'];
$distance = getDistance($addressFrom, $addressTo, "K");
echo $distance; //this value will show in modal
}
?>

Jquery .html wont load the css

Says, i write this code :
<div class="modal fade" id="addnewevent">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">
New Event
</h4>
</div>
<div class="modal-body">
<form name="newevent" id="newevent" action="" method="post">
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=date("d-m-Y",$now)?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option value="1">Normal</option>
<option value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" type="button">Add</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">close</button>
</div>
</div>
</div>
</div>
This will gave me result like this picture :
http://imageshack.com/a/img542/7466/okj7.png
Then, i use :
function change(id) {
$.post('ajax/change.php', {
data: id,
rand: Math.random()
},
function (html) {
$('#changeform').html(html);
$("#modalchange").modal('show');
});
}
triggered from this button :
<a class="table-actions" href="#" onClick="change('<?=$tm['id']?>');return false;"><i class="icon-pencil"></i></a>
The code for html (from change.php) is like this :
<?php
if(isset($_POST['data'])) {
$id = $_POST['data'];
$evt = mysql_query("select * from cal_event where id = '$id'");
$evt = mysql_fetch_array($evt);
$dt = explode(",",$evt['date']);
?>
<input type="hidden" value="<?=$id?>" name="uid" />
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text" value="<?=$evt['title']?>">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=$dt[2]."-".($dt[1]+1)."-".$dt[0]?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option <?=($evt['level']==1)?"selected":""?> value="1">Normal</option>
<option <?=($evt['level']==2)?"selected":""?> value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"><?=$evt['deskripsi']?></textarea>
</div>
<?php
}
?>
this is modal change
<div class="modal fade" id="modalchange">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Change Event</h4>
</div>
<div class="modal-body" >
<form name="changeform" id="changeform" action="" method="post">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="change" type="button">Change</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
but the result is different, it's give me like this :
http://imageshack.com/a/img89/3892/tpo5.png
So, how can i solve this problem?
and sorry for my bad in english.
From the picture you posted, the select element should not be just styled with css, there should be some javascript magic (which transform the select element to something else and hide the select element).
So you have to apply the javascript to the new html content again.

Categories

Resources