I have a table in my page which displays data about a certain request.
When I click the 'Add Cedula Number', which is a button, it shows a bootstrap modal. And inside it, has a form.
The value in the ID which is 14 is the ID of that row and it came from this code:
<td class=" ">
<button class="btn btn-primary btn-xs" id="<?php echo $data['idPerson'];?>" data-toggle="modal" data-target="#myModal"> Add Cedula Number </button>
</td>
Now, in order to pass the value in the modal, I used this code:
<script>
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').html(' <div class="form-group"><label class="col-sm-3 control-label">ID</label><div class="col-sm-9"><input type="text" value = ' + e.relatedTarget.id +' class="form-control" id="person_id" name="person_id" readonly="readonly"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Date</label><div class="col-sm-9"><input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Cedula Number</label><div class="col-sm-9"><input type="number" class="form-control" id="cedula_number" name="cedula_number"/></div></div>' );
})
</script>
This is my modal code:
<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">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form id="addCedula" action="paid_cedula.php" class="form-horizontal calender" name = "addCedula" enctype="multipart/form-data" method="post" role="form">
<div class="modal-body"></div>
<div class="modal-footer" style="margin:0;">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button id="send" type="submit" class="btn btn-success" name="addCedula">Save Record</button>
</div>
</form>
</div>
</div>
</div>
And my php code is this:
<?php
include 'config.php';
if(isset($_POST['addCedula'])){
$id = $_POST['person_id'];
$date = $_POST['cedula_date'];
$number = $_POST['cedula_number'];
$sql = mysqli_query($conn, "UPDATE person SET dateOfCedulaPayment='$date' AND cedulaNumber='$number' WHERE idPerson='$id';");
mysqli_close($conn);
}
?>
I've been trying to look for the error for hours now. I really can't seem to find where. The value doesn't update in the database. Where did I go wrong? Your help will be much appreciated. Thank you.
#Fred's answer solved the problem (error in Update Query), Here is my 2 cent
This script is overkill to pass the data to modal.
<script>
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').html(' <div class="form-group"><label class="col-sm-3 control-label">ID</label><div class="col-sm-9"><input type="text" value = ' + e.relatedTarget.id +' class="form-control" id="person_id" name="person_id" readonly="readonly"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Date</label><div class="col-sm-9"><input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Cedula Number</label><div class="col-sm-9"><input type="number" class="form-control" id="cedula_number" name="cedula_number"/></div></div>' );
})
All you need is change id="<?php echo $data['idPerson'];?>" to data-id="<?php echo $data['idPerson'];?>" and following 3 to 4 lines of script do the same job.
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$("#person_id").val(id);
});
});
Modal HTML
<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">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form id="addCedula" action="paid_cedula.php" class="form-horizontal calender" name = "addCedula" enctype="multipart/form-data" method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-sm-3 control-label">ID</label>
<div class="col-sm-9">
<input type="text" value = "" class="form-control" id="person_id" name="person_id" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Date</label>
<div class="col-sm-9">
<input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Cedula Number</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="cedula_number" name="cedula_number"/>
</div>
</div>
</div>
<div class="modal-footer" style="margin:0;">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="send" type="submit" class="btn btn-success" name="addCedula">Save Record</button>
</div>
</form>
</div>
</div>
</div>
Your query is incorrect. That isn't how UPDATE works. You need to use a comma and not the AND logical operator http://dev.mysql.com/doc/en/logical-operators.html
UPDATE person SET dateOfCedulaPayment='$date', cedulaNumber='$number' WHERE idPerson='$id';
Reference:
http://dev.mysql.com/doc/en/update.html
Checking for errors on your query would have triggered a syntax error:
http://php.net/manual/en/mysqli.error.php
Sidenote: To see if your query (UPDATE) was truly successful, use mysqli_affected_rows().
http://php.net/manual/en/mysqli.affected-rows.php
In not doing so, you may get a false positive.
Nota:
Your present code is open to SQL injection. Use prepared statements, or PDO with prepared statements.
Related
I have some kind of trouble, actually my code should be working just fine, but there is some bug here...
eventhough I already set the value of my dropdown select, it's appearance still not changed, in my case here, the value of second dropdown-select showing the first option eventhough I set it to be the second option.. why is this happening? My first dropdown select show the value just fine though...
I use bootstrap-select 1.13.15 in my codeigniter and my browser is google chrome
here is my view
<!-- modal edit -->
<div class="modal fade" id="MoEditCP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h3 class="modal-title" id="exampleModalLabel">Edit Catatan</h3></center>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<?php echo site_url('server/updatePI');?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-form-label">Nama Pelanggar :</label><br>
<select id="anggota1" class="selectpicker" data-show-subtext="true" data-live-search="true">
<?php foreach ($daftaranggota as $dafang) { ?>
<option value="<?php echo $dafang['nim'] ?>"><?php echo $dafang['namaLengkap'] ?> - <?php echo $dafang['nim'] ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label class="col-form-label">Tanggal Pelanggaran :</label><br>
<input type="date" name="tgl1" class="form-control" id="tgl1">
</div>
<div class="form-group">
<label class="col-form-label">Sanksi Kedisiplinan :</label><br>
<select id="sd1" class="selectpicker">
<option value="Ringan">Ringan</option>
<option value="Sedang">Sedang</option>
<option value="Berat">Berat</option>
</select>
</div>
<div class="form-group">
<label class="col-form-label">Catatan Pelanggaran :</label>
<input type="text" name="cp1" class="form-control" id="cp1">
</div>
<div class="modal-footer">
<input type="hidden" name="nimPenulis1" value="<?php echo $this->session->userdata('nim') ?>" class="form-control" id="nimPenulis1">
<button type="submit" class="btn btn-success" id="btn_update">Buat</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.modal edit -->
here is my script:
<script>
...
$('#tabelCP tbody').on('click', 'button.edit_cp', function() {
let tr = $(this).closest('tr');
let row = tabel_cp.row(tr);
let data = row.data();
$('#MoEditCP').modal('show');
$('#anggota1').val(data.nimPelanggar);
$('#tgl1').val(data.tgltrue);
$('#sd1').val(data.tingkat);
$('#nimPenulis1').val("<?php echo $this->session->userdata('nim') ?>");
});
...
</script>
I'm trying to get a value from the database: SenderDriver->total_trips.
And all great, but I want to get a specific id so I have to put it into onClick(), then it set the value from the database variable: SenderDriver->total_trips.
This is the code
<span onclick="readd( amounts{{$referral_detail->SenderDriver->total_trips}});"
data-target="#addMoneyModel" data-toggle="modal" id="{{$referral_detail->GetterDriver->id }}">
<a data-original-title="Add Money" data-toggle="tooltip" id="{{ $referral_detail->GetterDriver->id }}" data-placement="top" class="btn text-white btn-sm btn-success menu-icon btn_detail action_btn">
<i class="fa fa-money-bill"></i>
</a>
</span>
Now I want the val to change a specific text when it's clicked using the above code. Btw all this is in .blade.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
function readd(){
$("input:text").val(amounts);
}
</script>
I tried a lot nothing working any help?
The input
<div class="modal fade text-left" id="addMoneyModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title text-text-bold-600" id="myModalLabel33">#lang('admin.message200')</label>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('merchant.AddMoney') }}" method="post">
#csrf
<div class="modal-body">
<label>#lang('admin.message203'): </label>
<div class="form-group">
<select class="form-control" name="payment_method" id="payment_method" required>
<option value="1">#lang('admin.message201')</option>
<option value="2">#lang('admin.message202')</option>
</select>
</div>
<label>#lang('admin.message204'): </label>
<div class="form-group">
<input type="text" name="receipt_number" value="0"
class="form-control" required>
</div>
<label>#lang('admin.message205'): </label>
<div class="form-group">
<input type="text" id="amount" name="amount"
class="form-control" required>
<input type="hidden" name="add_money_driver_id" id="add_money_driver_id">
</div>
<label>#lang('admin.message206'): </label>
<div class="form-group">
<input class="form-control" id="title1" rows="3" name="description"
value="Refer Gift">
</div>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Add">
</div>
</form>
</div>
</div>
</div>
Not 100% sure what you're trying to accomplish, but here are my thoughts anyway.
In your onclick implementation you provide an argument to the function readd, which you're not using/defining in your javascript code at the bottom.
It appears that you try to push the value into the input text field of your bootstrap modal with the id="amount"
Here is the improved JavaScript section:
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
}
</script>
I'm not sure if the bootstrap toggle possibly overrides the onclick event of the span element. If that's the case you need to approach that issue a bit different
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
// Do something with the id
const some_important_id = $(this).attr('data-id');
console.log(some_important_id);
$('#addMoneyModel').modal('show');
}
</script>
and remove the modal stuff from your Span element.
<span onclick="readd( {{$referral_detail->SenderDriver->total_trips}});" data-id="{{$referral_detail->GetterDriver->id }}">
I have a form from where the user imput data to the database and a php file with the function to do so.
I'd like to show an alert message on the same form page using javascript without refresing the page.
I don't know much about JS and I have tried every possible solution I came across but I cannot find the solution yet, what am I doing wrong? I hope someone could help me.
Edit: I decided to use modals to do this but modal is not showing and PHP file gets opened
Edit 2: I got it to show the modal on screen, but It has no message, not even the title specified in the h4 tags
What I'd like the user to see as message is the echo in the PHP file.
this is what I tried:
form code:
<form role="form" id="frmUsuario">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> ID Usuario:</label>
<input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Nombre Comercial:</label>
<input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Nombre del Representante:</label>
<input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Expediente:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Observaciones:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar →</button>
</div>
<div class="col-sm-12 form-group">
</div>
</form>
Modal:
<!-- Modal -->
<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="font-weight: bold;" id="exampleModalLabel">Usuario</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MSJ">
</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 changes</button>
</div>
</div>
</div>
</div>
JS function in the form page:
<script type="text/javascript">
$("#frmUsuario").submit(function(e){
e.preventDefault();
var btnEnvUsuario="EnviarUsuario"; //name
$.ajax({
type : 'POST',
data: $("#frmUsuario").serialize()+"&btnEnviarUsuario="+btnEnvUsuario,
url : 'Logica/Usuario.php',
success : function(data){
$("#MSJ").html(data);
$("#ModalMSJ").modal("show");
}
});
return false;
});
</script>
PHP file:
$IDUsuario=$_POST["txtIDUsuario"];
$NombreRepresentante=$_POST["txtNombreRepresentante"];
$NombreComercial=$_POST["txtNombreComercial"];
$Expediente=$_POST["txtExpediente"];
$Observacion=$_POST["txtObservaciones"];
if(isset($_POST["btnEnviarUsuario"]))
{
$Conexion = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($Conexion->connect_error)
{
die("Connection failed: " . $Conexion->connect_error);
}
$sql = "insert into usuario
(NombreRepresentante,NombreComercial,Expediente,Observacion)
values
('$NombreRepresentante','$NombreComercial','$Expediente','$Observacion');";
if($Conexion->query($sql) === TRUE) {
/*Message I'd like to show to user*/
echo "Usuario guardado exitosamente";
}
Just remove the form tag and it won't fully refresh the page.
Then remove your alert from the php file and put it as shown below
<script>
$(document).ready(function(){
$("#EnviarUsuario").click(function(){
$.ajax({
url: "Logica/Usuario.php",
type: 'post',
data: {"btnEnviarUsuario":document.getElementByName("EnviarUsuario").value},
success: function(result){
//You put here your alert
alert("Usuario guardado exitosamente");
}
});
});
});
</script>
seems you having problem for using bootstrap. I wrap it using jsfiddle and fake JSON API. You could try it. I Hope it help. It's just simple problem that you have there. , your code is wrong on the ajax data.
see this.
https://jsfiddle.net/hp9jzfmo/1/
$(function(){
$("#frmUsuario").submit(function(e){
e.preventDefault();
var btnEnvUsuario=$('#EnviarUsuario').val();
$.ajax({
type : 'POST',
data: $("#frmUsuario").serialize(), // This is the right one
url : 'https://jsonplaceholder.typicode.com/posts',
success : function(data){
$("#MSJ").html(JSON.stringify(data));
$("#ModalMSJ").modal('show');
}
});
return false;
});
});
the body should be
<form role="form" id="frmUsuario">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> ID Usuario:</label>
<input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Nombre Comercial:</label>
<input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Nombre del Representante:</label>
<input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Expediente:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Observaciones:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar →</button>
</div>
</div>
</form>
<!-- Modal -->
<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="font-weight: bold;" id="exampleModalLabel">Usuario</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MSJ">
</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 changes</button>
</div>
</div>
</div>
</div>
The PHP Part I think you could do your self, as far as the data passed to server. I hope it helps :)
This is the final solution:
Form Code:
<form role="form" id="frmUsuario">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> ID Usuario:</label>
<input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Nombre Comercial:</label>
<input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Nombre del Representante:</label>
<input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Expediente:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Observaciones:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar →</button>
</div>
<div class="col-sm-12 form-group">
</div>
</form>
Modal Code
<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Usuario</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:red;" id="MSJ">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS Code:
<script type="text/javascript">
$("#frmUsuario").submit(function(e){
e.preventDefault();
var btnEnvUsuario="EnviarUsuario"; //variable to check if user clicked the button
$.ajax({
type : 'POST',
data: $("#frmUsuario").serialize()+"&btnEnviarUsuario="+btnEnvUsuario,
url : 'Logica/Usuario.php',
success : function(data){
$("#MSJ").html(data);
$("#ModalMSJ").modal("show");
}
});
return false;
});
</script>
PHP File Code:
$IDUsuario=$_POST["txtIDUsuario"];
$NombreRepresentante=$_POST["txtNombreRepresentante"];
$NombreComercial=$_POST["txtNombreComercial"];
$Expediente=$_POST["txtExpediente"];
$Observacion=$_POST["txtObservaciones"];
if(isset($_POST["btnEnviarUsuario"]))
{
$Conexion = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($Conexion->connect_error)
{
die("Connection failed: " . $Conexion->connect_error);
}
$sql = "insert into usuario
(NombreRepresentante,NombreComercial,Expediente,Observacion)
values
('$NombreRepresentante','$NombreComercial','$Expediente','$Observacion');";
if($Conexion->query($sql) === TRUE) {
/*Message I'd like to show to user*/
echo "Usuario guardado exitosamente";
}
I have a form in a modal. When I press the submit button the php file runs with the following errors:
Notice: Undefined index: phone1 in C:\xampp\htdocs\site\bank.php on line 2
Notice: Undefined index: charge1 in C:\xampp\htdocs\site\bank.php on line 4
Here is the PHP code in bank.php:
<?php
echo $_POST["phone"];
echo "</br>";
echo $_POST["charge"];
?>
Here is the modal contents:
<!-- Modal content-->
<div class="modal fade" id="register" 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">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phone" type="text" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="charge" type="text" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
I would be thankful if some one help me figure out what;s wrong with this
Not relevant anymore, OP edited his question. see edit for relevant answer!
the name of the post variable is defined by the nameattribute of the input, not the id.
therefore in your bank.php you will have $_POST['phone1'] and $_POST['charge1']available.
you can always just var_dump($_POST); to see all available post variables.
Edit: Also, disabled inputs are not being sent on submit. You can work around that fact by just adding a second hidden input for each disabled one like that:
<!-- Modal content-->
<div class="modal fade" id="register" 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">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phoneDisabled" type="text" class="form-control" name="phoneDisabled" value="pre filled value" disabled/>
<input id="phone" type="hidden" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="chargeDisabled" type="text" class="form-control" name="chargeDisabled" value="some other prefilled value" disabled/>
<input style="font-size:17px; font-weight:bold;" id="charge" type="hidden" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
Edit2: Or, just change disabled attribute to readonly
The name in your $_POST variable and the html input name are both different. Please try to make them the same and hopefully, your code will work.
Change name=phone1 to name=phone or whatever.
You have set both of those inputs as disabled. Forms by default won't post those. You probably need to grab the vars with JavaScript, or remove the disabled attributes, again, with JavaScript.
I am trying to pass data from a table to edit a form, using JavaScript. The problem is that I am a complete newbie at JavaScript. Can someone at least help me by giving me an example of what the code should be?
I am not doing AJAX, just simple load data with JavaScript
my model :
function edit($a)
{
$d = $this->db->get_where('crud', array('idcrud' => $a))->row();
return $d;
}
my controller :
function edit()
{
$kd = $this->uri->segment(3);
if ($kd == NULL) {
redirect('Chome');
}
$dt = $this->Mcrud->edit($kd);
$data['fn'] = $dt->firstname;
$data['ln'] = $dt->lastname;
$data['ag'] = $dt->age;
$data['ad'] = $dt->address;
$data['id'] = $kd;
$this->load->view('Vhome', $data);
}
And this is the button in the view, "Vhome", that I use as edit button :
<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
That button will call JavaScript edit function that should call the data by "idcrud" :
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// I dont know what must i do here to call my data in table crud by "idcrud"
}
And this is the form where the data gets passed to :
<div class="modal fade" id="modal_form" role="dialog">
<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>
<h3 class="modal-title">Surat Keluar</h3>
</div>
<div class="modal-body form">
<form action="Chome/edit" method="post" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label for="fn" class="control-label col-md-3">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="fn" name="fn" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ln" class="control-label col-md-3">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ag" class="control-label col-md-3">Age</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ag" name="ag" placeholder="age">
</div>
</div>
<div class="form-group">
<label for="ad" class="control-label col-md-3">Address</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ad" name="ad" placeholder="Address">
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="mit" class="btn btn-primary" value="Submit">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Can someone give me an example of what must I write in the JavaScript function edit?
edit :
This is full code of my view Vhome.php
Ok, it's quite easy. First put some identifiers on this section:
foreach(...){
...
<tr id="idcrud<?php echo $row->idcrud;?>">
<td class="idcrud"><?php echo $row->idcrud; ?></td>
<td class="fn"><?php echo $row->firstname; ?></td>
<td class="ln"><?php echo $row->lastname; ?></td>
<td class="age"><?php echo $row->age; ?></td>
<td class="addr"><?php echo $row->address; ?></td>
...
</tr>
And in your edit() function:
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// MY EDIT:
$("input #fn").val($("td #idcrud"+idcrud + " .fn").html());
$("input #ln").val($("td #idcrud"+idcrud + " .ln").html());
//and so on
}
Some observation: Inside your form <input type="hidden" value="" name="id"/> will also need an id attribute : <input id="id" type="hidden" value="" name="id"/>. Then you can update it's value with: $("input #id").val(idcrud); in the edit() function.