I need a help to adding a table row after inserting with PHP/MySQL. I don't know what else to do.
FYI i'm able to insert with $.ajax and my select are working correctly. I need a help on how to retrieve this information to the table row.
agenda.php
<form class="form-inline" id="form-agenda">
<input type="text" name="data" class="input-big datepicker" placeholder="Data">
<input type="text" name="local" class="input-big" placeholder="Local">
<input type="text" name="cidade" class="input-big" placeholder="Cidade">
<button type="submit" name="submit" class="btn btn-primary">Gravar</button>
</form>
<table class="table table-hover">
<thead>
<tr>
<th>Data</th>
<th>Local</th>
<th>Cidade</th>
</tr>
</thead>
<tbody id="teste">
<?php
$agendaDAO = new AgendaDAO();
foreach($agendaDAO->select() as $row){
echo '<tr>'.
'<td>'.$row['data'].'</td>'.
'<td>'.utf8_encode($row['local']).'</td>'.
'<td>'.$row['cidade'].'</td>'.
'<td><i class=icon-edit></i> <i class=icon-remove></td>'.
'</tr>';
}
?>
</tbody>
</table>
agenda.js
$('#form-agenda').submit(function(){
var fields = $(this).serialize();
$.ajax({
url: 'ajax-agenda.php',
type: 'POST',
data: fields,
dataType: 'text',
beforeSend: function(){
$('#loading-indicator').css({display: 'block'});
},
complete: function(){
$('#loading-indicator').css({display: 'none'});
},
success: function(data) {
$('#teste').prepend(data);
$('#teste tr:first').slideDown('slow');
}
});
$(this).trigger('reset');
return false;
});
ajax-agenda.php
<?php
include('util/config.php');
$data = $_POST['data_submit'];
$local = utf8_decode($_POST['local']);
$cidade = utf8_decode($_POST['cidade']);
$agenda = new Agenda($data, $local, $cidade);
$agendaDAO = new AgendaDAO();
$agendaDAO->add($agenda);
foreach($agendaDAO->select("SELECT * FROM agenda ORDER BY id DESC LIMIT 1") as $rowA){
echo '<tr><td>'.$rowA['data'].'</td><td>'.utf8_encode($rowA['local']).'</td><td>'.$rowA['cidade'].'</td><td><i class=icon-edit></i> <i class=icon-remove></td></tr>';
}
?>
Try changing the dataType: 'text' to dataType: 'html'.
Related
<script>
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
uid = $("input[name='user_id']:checked").map(function() {
return this.id;
}).get().join(",");
$.ajax({
type:"POST",
data:{"uid":uid},
url:"<?php echo base_url(); ?>hr/shortlist",
success:function(data){
setTimeout(function(){
location.reload();
}, 1000);
}
});
});
});
</script>
<table>
<thead>
<tr class="info">
<th>Check</th>
<th>Recruiter Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="user_id" id="uid1211120937" class="user_id">
</td>
<td>20181123091338</td>
</tr>
<tr>
<td>
<input type="checkbox" name="user_id" id="uid1211092847" class="user_id">
</td>
<td>20181123091338</td>
</tr>
</tbody>
</table>
<input type="submit" name="submit" id="submit" value="short"/>
shortlist.php
$uid = explode(",",$this->input->post('uid'));
foreach($uid as $user_id)
{
$data = array('shortlist'=>'1');
$this->db->where('uid',$user_id);
$query = $this->db->update('personal_detail',$data);
}
In this question, I have multiple checkboxes. Now, What I want when if I selected all checkbox then shortlist must be 1 for all will be updated and if I unchecked some checkbox then uncheck checkbox value will be 0. So, How can I do this? Please help me.
Thank You
You need to find all checkbox state respect to userid.
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
var uids = [];
$("input[name='user_id']").map(function() {
uids.push({id: this.id, value: this.checked ? 1 : 0});
});
$.ajax({
type:"POST",
data:{"uid":uids},
url:"<?php echo base_url(); ?>hr/shortlist",
success:function(data){
setTimeout(function(){
location.reload();
}, 1000);
}
});
});
});
Now in shortlist.php
$uid = $this->input->post('uid');
foreach($uid as $user)
{
$data = array('shortlist'=> $user['value']);
$this->db->where('uid',$user['id']);
$query = $this->db->update('personal_detail',$data);
}
I have two same name multiple input fields. I want to send all fields value from another page using jquery ajax post method but i am not getting all rows input fields value. Please review my code.
Javascript code
<script type="text/javascript">
function getValue()
{
$.post("paidamt.php",
{
paidamt : $('#paidamt').val(),
uid : $('#uid').val()
},
function( data){
/*alert(data);*/
$("#divShow").html(data);
});
}
</script>
Html Code
<div>
<form method="post">
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Paid Amount</th>
<th>Check</th>
</tr>
<?php
$sql = mysql_query("SELECT * FROM `tbldemo`");
while ($result = mysql_fetch_array($sql)) {
?>
<tr>
<td><?php echo $result['pname']; ?> </td>
<td><?php echo $result['price']; ?></td>
<td><input type="text" name="paidamt[]" id="paidamt"></td>
<td><input type="checkbox" name="uid[]" id="uid"
value="<?php echo $result['id']; ?>"></td>
</tr>
<?php }
?>
</table><br>
<input type="button" name="submit" id="submit"
onclick="getValue(1)" value="Save Amt.">
</form>
</div>
<div id="divShow">
</div>
Try this one
var paidamt = $("input[name=paidamt]").map(function(){
return $(this).val();
}).get().join(",");
var uid = $("input[name=uid]").map(function(){
return $(this).val();
}).get().join(",");
$.ajax(
{
type: "POST",
url: 'paidamt.php',
data:
{
paidamt:paidamt,
uid:uid
}
});
Firstly you have given the input elements the same id which is repeated in the loop. This will end up in your HTML being invalid, you should change the id to class:
<form method="post">
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Paid Amount</th>
<th>Check</th>
</tr>
<?php
$sql = mysql_query("SELECT * FROM `tbldemo`");
while ($result = mysql_fetch_array($sql)) { ?>
<tr>
<td><?php echo $result['pname']; ?> </td>
<td><?php echo $result['price']; ?></td>
<td><input type="text" name="paidamt[]" class="paidamt"></td>
<td><input type="checkbox" name="uid[]" class="uid" value="<?php echo $result['id']; ?>"></td>
</tr>
<?php }
?>
</table><br>
<button type="submit" name="submit" id="submit">Save Amt.</button>
</form>
To actually send the input values in the AJAX request you can simply serialize() the containing form when the form is submit:
$(function() {
$('form').submit(function(e) {
$.ajax({
url: "paidamt.php",
type: 'POST',
data: $(this).serialize(),
success: function(data) {
$("#divShow").html(data);
});
});
});
});
I suggest to add class instead of id, since identically class can be repeated but id should not.
<script type="text/javascript">
function getValue()
{
var paidamtval = [];
$('#paidamt').each(function(){
paidamtval.push($(this).val());
});
$.post("paidamt.php",
{
paidamt : paidamtval,
uid : $('#uid').val()
},
function( data){
/*alert(data);*/
$("#divShow").html(data);
});
}
</script>
Since you will have many of these, id - needs to be unique, which in your case isn't, so remove "id="paidamt"
<td><input type="text" name="paidamt[]" id="paidamt"></td>
That's your first mistake. And secondly don't use $.post, to submit this form. Either remove AJAX submit, or bind form using something like jQuery Form plugin.
You try this code
$('document').ready(function(){
$('#submit').click(function(){
jQuery.ajax({
type: "POST",
url: "paidamt.php",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(html){
try{
$("#divShow").html(data);
}catch (e){
alert(JSON.stringify(e));
}
},
error : function(e){alert("error "+JSON.stringify(e)); }
});
});
});
in you paidamt.php file
$paidamt=$_POST['paidamt'];// its can array values
print_r($paidamt);// result display
I'm trying to edit the form that created dynamically. but when I checked the checkbox(s), fill the form and click Edit button, only edited contents show up. The rests are all gone.
The table:
<table class="table" id="list">
<thead>
<tr>
<th>Product</th>
<th>Qty</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Inputs, Add and Edit buttons:
<input type="text" name="product" id="p" />
<input type="text" name="qty" id="q" />
<button type="button" id="add">Add</button>
<button type="button" id="edit">edit</button>
Script:
<script>
$(document).ready(function(){
$('#add').click(function(){
var product = $('#p').val();
var qty = $('#q').val();
data = 'product='+product+'&qty='+qty+'&action=add';
$.ajax({
url:'add.php',
type:'POST',
data:data,
success:function(data){
$('#list tbody').prepend(data);
}
});
});
$('#edit').click(function(){
var product = $('#p').val();
var qty = $('#q').val();
data = 'product='+product+'&qty='+qty+'&action=edit';
$.ajax({
url:'edit.php',
type:'POST',
data:data,
success:function(data){
$('#list tbody').html(data);
}
});
});
});
</script>
add.php
if($_POST['action']=='add'){
$p=$_POST["product"];
$q=$_POST["qty"];
echo '<tr>';
echo '<td>'.$p.'</td>';
echo '<td>'.$q.'</td>';
echo '<td><input type="checkbox" name="" value="" /></td>';
echo '</tr>';
}
edit.php
if($_POST['action']=='edit'){
$p=$_POST["product"];
$q=$_POST["qty"];
echo '<tr>';
echo '<td>'.$p.'</td>';
echo '<td>'.$q.'</td>';
echo '<td><input type="checkbox" name="" value="" /></td>';
echo '</tr>';
}
I think I should assign an id to echo '<tr id="x">' but I don't know how.
Any advice would be greatly appreciated.
John
I have 3 buttons in my page.
they are new buttons, delete, and edit.
if I click the new button will display a add_new form , and if I click to change the edit_form will appear.
My question is why the new_form does not appear after I click submit in my edit_form or
click delete button to delete data.
My code is like this
<div id="list_address">
<table>
<tr valign="top">
<th>Name</th>
<th>Address</th>
<th>Action</th>
</tr>
<tr valign="top">
<td>Name 1</td>
<td>Adress 1</td>
<td>
<span><a href="#" onclick="javascript:show_editform(<?php echo $id_address;?>);">
Edit|</a></span><span><a href="#"
onclick="javascript:deleteAddress(<?php echo $id_address;?>);">Delete</a></span>
</td>
</tr>
<tr>
<td colspan="3"><span>
<button id="btn_add">Add New</button></span>
</td>
</tr>
</table>
<div>
<div id="boxform">
<div id="edit" style="display:none">
<form id="fm_edit" class="fm_address">
<input type="hidden" value="1" name="submitted" id="submitted"/>
<input type="hidden" id="id_address" name="id_address"/>
<fieldset>
<h3>Edit</h3>
<p>
<label>Address</label>
<input type="text" name="address1" id="address1" >
<sup>*</sup>
</p>
<p>
<label>Address (2)</label>
<input type="text" name="address2" id="address2" >
</p>
<p><input type="submit" value="Save"/></p>
</fieldset>
</form>
</div>
</div>
<div id="add" style="display:none">
<form id="fm_add" class="fm_address">
<input type="hidden" value="2" name="submitted" id="submitted"/>
<fieldset>
<h3>Edit</h3>
<p>
<label>Address</label>
<input type="text" name="address1" id="address1" >
<sup>*</sup>
</p>
<p>
<label>Address (2)</label>
<input type="text" name="address2" id="address2" >
<sup>*</sup>
</p>
<p><input type="submit" value="Save"/></p>
</fieldset>
</form>
</div>
</div>
</div>
<script>
function getAddress(){
$.ajax({
type: "POST",
url: "getAddress.php",
success: function(response){
$("#list_address").html(response);
}
});
}
function clear_form() {
$(".fm_address").find(':input').each(function() {
switch(this.type) {
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
function show_editform(id){
$("#add").hide();
$("#edit").show();
$("#id_address").val(id);
}
function show_insertform(){
$("#edit").hide();
$("#add").show();
}
$(document).ready(function() {
$("#btn_add").bind('click',function(){
clear_form();
show_insertform();
});
$("form#fm_edit").submit(function() {
var data = $("form#fm_edit").serialize();
$.ajax({
type: "POST",
url: "address.php",
data: data,
success: function(response){
alert(response);
getAddress();
}
});
return false;
});
$("form#fm_add").submit(function() {
var data = $("form#fm_add").serialize();
alert(data);
$.ajax({
type: "POST",
url: "address.php",
data: data,
success: function(response){
alert(response);
getAddress();
}
});
return false;
});
});
</script>
Please help me..
Thanks.
You add below script in your both ajax pages like getAddress.php and address.php
after the try it. i am sure it will be working.
one more thing you have over write list_address div. after ajax response all list_address div data replace on ajax response data.
$("#list_address").html(response);
<script>
function getAddress(){
$.ajax({
type: "POST",
url: "getAddress.php",
success: function(response){
$("#list_address").html(response);
}
});
}
function clear_form() {
$(".fm_address").find(':input').each(function() {
switch(this.type) {
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
function show_editform(id){
$("#add").hide();
$("#edit").show();
$("#id_address").val(id);
}
function show_insertform(){
$("#edit").hide();
$("#add").show();
}
$(document).ready(function() {
$("#btn_add").bind('click',function(){
clear_form();
show_insertform();
});
$("form#fm_edit").submit(function() {
var data = $("form#fm_edit").serialize();
$.ajax({
type: "POST",
url: "address.php",
data: data,
success: function(response){
alert(response);
getAddress();
}
});
return false;
});
$("form#fm_add").submit(function() {
var data = $("form#fm_add").serialize();
alert(data);
$.ajax({
type: "POST",
url: "address.php",
data: data,
success: function(response){
alert(response);
getAddress();
}
});
return false;
});
});
</script>
I would like to know why my following code piece displays nothing in the browser (http://localhost/display.php). I would like to generate a template for my table to display all employees in my database (id, firstname, lastname) and use HTTP verb DELETE via jquery ajax method to delete a user if I click the delete button on the display table.
Here is my display.php
<table id="employees" border="1">
</table>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$document.ready(function()
{
var $employees = $("#employees");
$.ajax({
url: "delete.php",
contentType: "json",
success: function(data){
$.each(data, function(index, item){
var $row = $("#templates").find(".row-template").clone();
$row.find(".firstName").html(item.FirstName);
$row.find(".lastName").html(item.LastName);
$row.find(".delete").click(function() {
$.ajax({
url: "delaction.php" + item.Id,
type: "DELETE",
success: function()
{
$row.remove();
}
});
});
$employees.append($row);
});
}
});
});
</script>
<div id="templates" style="display: none">
<table>
<tr class="row-template">
<td class="firstName" style="width: 100px;"></td>
<td class="lastName" style="width: 100px;"></td>
<td>
<input type="button" value="X" class="delete" />
</td>
</tr>
</table>
</div>
and my delete.php looks like this
<?php
define('DB_HOST','localhost');
define('DB_ROOT','root');
define('DB_PASS','');
define('DB_NAME','employees');
$conn=mysqli_connect(DB_HOST,DB_ROOT,DB_PASS) or die("Unable to connect to your selected db.Error ".mysqli_error());
if(null!=$conn)
{
mysqli_select_db($conn,DB_NAME);
$query=("SELECT * FROM empl");
$result=mysqli_query($query);
foreach($result as $res)
{
}
mysqli_close($conn);
}
?>
Thank you a lot.
What's in 'delaction.php'?
Anyway, to pass itemId to delaction.php with the item to delete, change:
url: "delaction.php" + item.Id,
to:
url: "delaction.php?itemId=" + item.Id,