My code is getting the data from PHP, then generating modals according to the number of items I have in the db. I have tried several solution of SO, how to get button ids according to the button clicked but don't find any solution.
When I click the any button generated, it sends only the first item of the modal form instead of the item clicked. I think the problem is the buttons not having unique id's. How to ensure that they have unique id's. Below is the code:
<div id="feedback">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#feedback-modal-<?php echo $item['payment_id']; ?>">Add Payment</button>
</div>
<div id="feedback-modal-<?php echo $item['payment_id']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Add Payment</h3>
</div>
<div class="modal-body">
<form class="feedback" name="feedback" method="POST">
<strong>Full Name</strong>
<br>
<input type="text" name="fullName" id="fullName" class="input-xlarge" value="<?php echo $item['full_name'] ?? 'Unknown';?>">
<br><br>
<strong>Subtotal</strong>
<br>
<input type="text" name="subtotal" id="subtotal" class="input-xlarge" value="<?php echo $item['subtotal'] ?? '0';?>">
<br><br>
<strong>Payment Method</strong>
<br>
<select name="paymentMethod" id="paymentMethod">
<option value="Cash1">Cash1</option>
<option value="Cash2">Cash2</option>
<option value="Cash3">Cash3</option>
</select>
<br><br>
<strong>Received by</strong>
<br>
<input type="text" name="receivedBy" id="receivedBy" class="input-xlarge" value="<?php echo $item['received_by'] ?? 'Unknown';?>">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="payment-btn" name="payment-btn">Send</button>
Close
</div>
</div>
</div>
</div>
The problem is that the button for sending the data have the same id, and ajax only accepts one id as shown below:
$(document).ready(function () {
$("button#payment-btn").click(function () {
$.ajax({
type: "POST",
url: "admin-server.php",
// url: "../Database/Payment.php",
data: 'contactFrmSubmit=1&fullName=' + $('#fullName').val() + '&subtotal=' + $('#subtotal').val() + '&paymentMethod=' + $('#paymentMethod').val() + '&receivedBy=' + $('#receivedBy').val(),
success: function (message) {
$("#feedback").html(message)
$("#feedback-modal").modal('hide');
},
error: function () {
alert("Error");
}
});
});
});
How can I have different id's?
Related
Can someone help, I cant seem to get the data colleted from the form to be sent to the mysql database.
I am very new to coding and I cant seem to figure out why the form data is not being sent to the mysql database table.
Please any help would be muchly appricated.
once I press submit the page closes than refreshs without any errors, but the data has not been sent to the database table.
Please see code below.
<?php include'inc/header.php'; ?>
<div class="container">
<center>
<h2 style="color: #odc16f">Shipped</h2>
<hr>
</center>
<center>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addEmpModal">
Add Order
</button>
</center>
<!-- Modal -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="" method="post">
<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">Add New Order</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Enter Name</label>
<input class="form-control" type="text" name="customer" id="customer" placeholder="Enter Name">
<label id="lbcustomer" style="color:red"></label>
</div>
<div class="form-group">
<label>Enter Date</label>
<input class="form-control" type="date" name="date" id="date" placeholder="Enter Date">
<label id="lbdate" style="color:red"></label>
</div>
<div class="form-group">
<label>Enter Invoice</label>
<input class="form-control" type="number" name="invoice" id="invoice" placeholder="Enter Invoice">
<label id="lbinvoice" style="color:red"></label>
</div>
<div class="form-group">
<label>Enter eBay</label>
<input class="form-control" type="number" name="ebay" id="ebay" placeholder="Enter eBay">
<label id="lbebay" style="color:red"></label>
</div>
<div class="form-group">
<label>Enter Shipped</label>
<input class="form-control" type="text" name="shipper" id="shipper" placeholder="Enter Shipped">
<label id="lbshipper" style="color:red"></label>
</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" id="save">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div><!-- /.container ends here -->
<?php
include'inc/footer.php';
?>
<script>
$(document).ready(function() {
$(document).on('click', '#save', function() {
var customer = $("#customer").val();
var date = $("#date").val();
var invoice = $("#invoice").val();
var ebay = $("#ebay").val();
var shipper = $("#shipper").val();
if (customer == "") {
$("#lbcustomer").html("Enter Name");
} else if (date == "") {
$("#lbdate").html("Enter Date");
} else if (invoice == "") {
$("#lbinvoice").html("Enter Invoice");
} else if (ebay == "") {
$("#lbebay").html("Enter eBay");
} else if (shipper == "") {
$("#lbshipper").html("Enter Shipper");
} else {
$.ajax({
url: "save_data.php",
type: "post",
data: {
customer: customer,
date: date,
invoice: invoice,
ebay: ebay,
shipper: shipper
},
success: function(data) {
alert("Order Has Been Successful");
$("#addEmpModal").modal('hide');
location.reload();
}
});
}
});
});
</script>
Please see below the save_data.php code
<$php
include 'config/config.php';
global $con;
$customer = $_POST['customer'];
$date = $_POST['date'];
$invoice = $_POST['invoice'];
$ebay = $_POST['ebay'];
$shipper = $_POST['shipper'];
$save_data = "INSERT INTO orders(customer, date, invoice, ebay, shipper)VALUES('$customer','$date','$invoice','$ebay','$shipper')";
$result = mysqli_query($con, $save_data);
and below is the config.php code.
<?php
$con = mysqli_connect("localhost","root","Password","shippedorders");
if (!$con) {
echo "Failed to connect to MySQL: ".mysqli_connect_error($con);
}
you are missing
action in :
<form action="save_data.php" method="post">
or are you running your php in same page as html ? or you
I have an edit jQuery modal that gets values passed to it via jquery and data attributes passed through a button. When the jQuery modal is displayed, all the other values show apart from the select's option (with name and id measure). I can't seem to figure out the problem. Here is my code:
HTML code
<button id="editButton" class="btn btn-default" data-toggle="modal" data-target="#edit" data-id="<?php echo $r->ingredientId;?>"
data-ing="<?php echo $r->ingredientName;?>" data-brand="<?php echo $r->brand;?>" data-measure="<?php echo $r->measureName;?>"
data-measureId="<?php echo $r->measure;?>" data-quantity="<?php echo $r->quantity;?>" data-price="<?php echo $r->price;?>">
<span class="glyphicon glyphicon-pencil"></span>Edit</button>
<div class="modal fade" id="edit" 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">Modify Ingredient</h4>
</div>
<div class="modal-body">
<form method="post" action="<?php echo base_url();>index.php/MainController/ingredients/edit">
<div class="form-group">
<input class="form-control" type="hidden"name="uid" id="uid"/>
<label for="ingredient">Ingredient Name:</label>
<input type="text" class="form-control" id="ingredient" name="ingredient" required/>
<label for="brand">Brand Name:</label>
<input name="brand" id="brand" class="form-control" type="text" required/>
<label for="quantity">Quantity:</label>
<input name="quantity" id="quantity"class="form-control" type="text" required/>
<label for="measure">Measure:</label>
<select name="measure" id="measure" class="form-control" required>
<?php foreach ($measure as $m) {?>
<option value="<?php echo $m->measureId;?>"><?php echo $m->measureName;?></option><?php }?>
</select>
<label for="price">Price:</label>
<input name="price" id="price" class="form-control" type="text" required/>
</div>
....
Jquery Code:
<script type="text/javascript">
$(document).on("click", '#editButton',function(e)
{
var id = $(this).data('id');
var ingredient = $(this).data('ing');
var brand = $(this).data('brand');
var quantity = $(this).data('quantity');
var measure = $(this).data('measure');
var measureId = $(this).data('measureId');
var price = $(this).data('price');
$("#uid").val(id);
$("#ingredient").val(ingredient);
$("#brand").val(brand);
$("#quantity").val(quantity);
$("#measure").val(measureId);
$("#price").val(price);
$("#measure").val(measureId);
});
</script>
The real issue is with your data's name,
data can not count Capital cases. "measureId" is only one having "I" as capital latter.
Try making it small, like "measureid".
You can see my example code.
$(document).ready(function(){
alert($('#test123').data('measerId'));
alert($('#test123').data('measerid'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" data-measerId="sdbhfj" id="test123" />
Due to this error your variable is not getting value it should have and further thing would not be done.
instead of
$("#uid").val(id);
try this
$('#uid').val('"'+id+'"');
[jQuery.val] checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.
you can try this .
$("select#measure").val(measureId).change();
I am a noob in web development so I am stuck at getting data from a modal and saving it to database.
I have made model with bootstrap. Below is the code of the modal
code of modal
<form name="form" action="post" method="">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
</form>
<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">Add parts</h4>
</div>
<div class="modal-body">
<input type="text" name="field1" placeholder="Part Name" id="pName" />
<br>
<br>
<input type="text" name="field2" placeholder="Piece Code" />
<br>
<br>
<input type="text" name="field3" placeholder="Piece Price" />
<br>
<br>
<input type="text" name="field4" placeholder="Quatity" />
<br>
<br>
<input type="text" name="field5" placeholder="Total" />
<br>
<br>
<input type="text" name="field6" placeholder="Comments" />
<br>
<br>
<input type="text" name="field7" placeholder="Shipped" />
<br>
<br>
</div>
<div class="modal-footer">
<button onclick="saveit()" type="button" name="saveBtn" class="btn btn-default" data-dismiss="modal">save</button>
</div>
</div>
</div>
</div>
What I am trying to accomplish is get the data entered in this popup modal save it in database by pressing save button in the modal and clear the pop so that user can enter data again. I want to save the data by using PHP Query .Kindly suggest me a way to get it done . I have seen a lot of tutorials and almost every question on stack overflow as well but I am unable to get it done.
You can use ajax to do that; Try this
Your contact page
<div id="contact">
<h3>Contact Us For Any Query</h3>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(function(){
$(document).on("click", ".button", function(e) {
e.preventDefault();
var info = $("#form").serialize();
$.ajax({
type: "POST",
url: "add.php",
data: info,
success: function(result){
//$("#form")[0].reset();
$('#notification').html(result);
}
});
e.preventDefault();
});
});
</script>
<!--div for notification -->
<div id="notification"></div>
<div id="form" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add parts</h4>
</div>
<div class="modal-body">
<input type="text" name="field1" placeholder="Part Name" id="pName" />
<br>
<br>
<input type="text" name="field2" placeholder="Piece Code" />
<br>
<br>
<input type="text" name="field3" placeholder="Piece Price" />
<br>
<br>
<input type="text" name="field4" placeholder="Quatity" />
<br>
<br>
<input type="text" name="field5" placeholder="Total" />
<br>
<br>
<input type="text" name="field6" placeholder="Comments" />
<br>
<br>
<input type="text" name="field7" placeholder="Shipped" />
<br>
<br>
</div>
<div class="modal-footer">
<button type="button" name="saveBtn" class="btn btn-default button" data-dismiss="modal">save</button>
</div>
</div>
</div>
</div>
</div>
And the PHP page i.e. add.php for adding the data
<?php
//connection to your database
//remember to change the host, dbname, and password to yours,
$db = new PDO('mysql:host=localhost;dbname=databasename;charset=UTF-8',
'root',
'',
array(PDO::ATTR_EMULATE_PREPARES => false,
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
?>
<?php
if (isset($_POST['field1'])) {
$field1 = $_POST['field1'];
$field2 = $_POST['field2'];
$field3 = $_POST['field3'];
$field4 = $_POST['field4'];
$field5 = $_POST['field5'];
$field6 = $_POST['field6'];
$field7 = $_POST['field7'];
$stmt = $conn->prepare("INSERT INTO `table` (field1,field2,field3,field4,field5,field6,field7)
VALUES (:field1, :field2, :field3, :field4, :field4, :field5, :field6, :field7)");
$stmt->bindParam(':field1', $field1);
$stmt->bindParam(':field2', $field2);
$stmt->bindParam(':field3', $field3);
$stmt->bindParam(':field4', $field4);
$stmt->bindParam(':field5', $field5);
$stmt->bindParam(':field6', $field6);
$stmt->bindParam(':field7', $field7);
$stmt->execute();
echo 'added';
}
?>
Hope my answer would be of some help to you:
Keep form inside modal, and give a php file(ex: test.php) as action.
Here is the code I would suggest you to try:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<form action="test.php" method="POST">
<!-- Modal content-->
</form>
</div>
</div>
Write a test.php file and retrieve values using $_POST method.
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.
hi how to keep bootstrap modal active after clicking submit button. In my case after clicking submit button it refresh the page so it close the modal. In my modal form i have a textboxes that when you click submit it will save the data in database. Now i have a php code that check the textboxes if their empty it will show/say the error and if not empty it will says success.
Thanks in advance who will help.
This is my code
<div class="modal fade" id="addtopic" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Add Topic</h4>
</div>
<form method="POST" action="index.php" role="form" id="saveform">
<div class="modal-body">
<div class="form-group">
<label for="cCategory">Category</label>
<input type="text" class="form-control" id="cCategory" name="category" value="<?php if (!empty($categ)) { echo $categ; } ?>">
</div>
<div class="form-group">
<label for="cTitle">Title</label>
<input type="text" class="form-control" id="cTitle" name="topicTitle" value="<?php if (!empty($topicTitle)) { echo $topicTitle; } ?>">
</div>
<div class="form-group">
<label for="cDesc">Description</label>
<textarea class="form-control custom-control" rows="3" style="resize:none" name="desc" value="<?php if (!empty($desc)) { echo $desc; } ?>"> </textarea>
</div>
<div class="form-group">
<label for="cDesc">Created By</label>
<input type="text" class="form-control" id="cDesc" name="createdby" value="<?php if (!empty($created)) { echo $created; } ?>">
</div>
</div>
<div class="modal-footer">
if($insert = $db->query("
INSERT INTO pncontent (category, title, description, createdby, dateadded)
VALUES ('$categ', '$topicTitle', '$desc', '$created', NOW() )
")) {
echo "<p class='pull-left'> Topic Save! </p>";
}else {
echo "<p class='pull-left'>Failed to Save</p>";
die($db->error);
}
}else {
echo "<p class='pull-left'>All Fields are required</p>";
$desc = $_POST['desc'];
$categ = $_POST['category'];
$topicTitle = $_POST['topicTitle'];
$created = $_POST['createdby'];
}
}
?>
<button type="submit" name="Sbt" class="btn btn-primary" >Save changes</button>
<button data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</form>
</div>
</div>
</div>
Where you return
echo "<p class='pull-left'>All Fields are required</p>";
Add this bit of code to open the modal on page load.
<script type="text/javascript">
$(window).load(function(){
$('#addtopic').modal('show');
});
</script>