Here am I updating the data through modal and its working but the thing is, I want to show the selected data as selected. The update function is working but not getting idea for the value to be selected.
Here is my view
<td><a class="btn btn-primary vehicle_user" data-toggle="modal" data-target="#myModaledit" id="<?php echo $row->id;?>" vehicle="<?php echo $row->vehicle_id; ?>">Edit</a></td>
This is my modal
<div class="modal fade" id="myModaledit" 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">Edit Vehicle</h4>
</div>
<form action="<?php echo base_url();?>vehicle/vehicle_control/edit_vehicle_user" method="post">
<div class="modal-body">
<div class="form-group">
<label for="vehicle" class="control-label">Vehicle:</label>
<select name="vehicle" class="form-control">
<?php foreach($vehicles as $res){?>
<option <?php if($res->id==$row->vehicle_id)echo 'selected' ?> value="<?php echo $res->id;?>"><?php echo $res->name;?></option>
<?php }?>
</select>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" value="" id="vehicle_user_id">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Here is my jQuery script
$(document).ready(function() {
$(".vehicle_user").click(function() {
var id = $(this).attr('id');
//alert(id);
$("#vehicle_user_id").val(id);
$("#vehicle").val($(this).attr('vehicle'));
});
});
As you not specified the ID attribute. You need to use Attribute Selector to target the vehicle drop-down element.
$("[name='vehicle']").val($(this).attr('vehicle'));
OR, Set the ID attribute of vehicle drop-down element.
<select id="vehicle" name="vehicle" class="form-control">
</select>
Related
I have a function where I add shops. In this function, I can select whether the shop is OPEN or CLOSE. My target is, on my other modal,
when I create a user and selected the shop I created, The status of
the shop whether OPEN or CLOSE will appear on my textbox.
I provided my codes below and my screenshot. Any help will be appreciated
HTML:
<div class="col-md-3 float-left mb-2" >
<button type="button" class=" btn-block btn bbutton text-bold btn-lg" data-toggle="modal" data-target="#accountModal"
data-id="<?php echo $_SESSION['uid']?>" data-user="<?php echo $_SESSION['username']?>"
Edit <?php echo $_SESSION['uid']?>>
Add User
</button>
<div class="modal fade" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-image: linear-gradient(90deg, #00e6ac, #1f9388);">
<h5 class="modal-title text-bold" id="exampleModalLabel">Add Users For shop</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body bg-white">
<form id="createAccount">
<div class="form-group" >
<label>Company</label>
<select class="form-control" name="nameofshop" required>
<option value="">No Selected</option>
<?php
foreach($category as $row):?>
<option value="<?php echo $row->shopName;?>"><?php echo $row->shopName;?></option>
<?php endforeach;?>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail1">status:</label>
<label class="container">Open
<input type="radio" name="status" value="open">
</label>
<label class="container">Close
<input type="radio" name="status" value="close">
</label>
</div>
</div>
<button type="submit" class="btn btn btn-dark btn-flat float-right" value="">Submit</button>
</form>
</div>
</div>
</div>
</div>
I would listen to any change in the shop input field using javascript. Whenever an option is selected, I would take that option's value (let's say "icecreamshop" for instance), and get the status of that shop from the model. When you finally get that "close" status, you can then insert it manually into the second input field.
An example using jQuery:
let shopField = $('#shop-field');
let statusField = $('#status-field');
shopField.change(() => {
let status = findShopStatus($(this).val());
statusField.val(status);
});
where findShopStatus is a function that gets the status of a shop by its name from the model.
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;
`
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>
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
}
?>
I'm trying to pass the user_id contained in my database to a form that's displayed within a Bootstrap Modal upon clicking a button.
The button:
<td id="fired">
<button class="btn btn-default btn-danger btn-xs fired" data-id="<?php echo $row['user_id']; ?>">
Fired
</button>
</td>
JQuery:
$(document).ready(function(){
$(".fired").click(function(){
$("#user_id").val($(this).attr('data-id'));
$('#firedModal').modal('show');
});
});
Modal:
<div class="modal fade" id="firedModal" tabindex="-1" role="dialog" aria-labelledby="firedModal" 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="firedModal">Fire Habbo</h4>
</div>
<form class="form-signin" role="form" action="" method="post">
<div class="modal-body">
<input type="text" class="form-control" placeholder="Firing Reason" name="fired_reason" required autofocus />
<input type="text" class="form-control" placeholder="Firing Tag" name="fired_tag" required />
<input type="text" class="form-control" placeholder="Date" name="fired_date" required />
<input type="text" class="form-control" placeholder="Status (MAY JOIN AS RECRUIT/PARDONED/NEVER REHIRE)" name="fired_status" />
<input type="hidden" class="form-control" name="user_id" value="" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Fire</button>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</form>
</div>
</div>
</div>
However, on clicking the button the modal shows but the value of the user_id input is not filled by the row's user_id. What am I doing wrong? Thanks.
Modify your code , with this one.
<input type="hidden" class="form-control" id="user_id" name="user_id" value="" />
$(document).ready(function(){
$("#fired").click(function(){
$("#user_id").val($(this).attr('data-id'));
$('#firedModal').modal('show');
});
});