even if i cancel my confirmation the form is still submitted
what is the problem? i think my jquery is wrong pls help
my button outside the form
<li><a id="recieve_btn" href="javascript:void(0)" class="btn animated infinite pulse" onclick="if(!confirm('Are you sure?')) return false;"><span class="glyphicon glyphicon-transfer"></span> Recieve</a></li>
my form
<form id="frm-list" action="<?php echo base_url('home/recieve') ?>">
<table class="table table-condensed display dataTable dt-checkboxes-select" id="list" style="width: 100%;">
<thead>
<tr>
<th>No</th>
<th>Family Name</th>
<th>Given Name</th>
<th>Middle Initial</th>
<th>Birthdate</th>
<th>Module Enrolled</th>
<th>Action</th>
</tr>
</thead>
<tbody class="datatable">
<?php foreach ($result as $trainee): ?>
<tr>
<td><?php echo $trainee->no ?></td>
<td><?php echo $trainee->lname ?></td>
<td><?php echo $trainee->fname ?></td>
<td><?php echo $trainee->mi ?></td>
<td><?php echo $trainee->bdate ?></td>
<td><?php echo $trainee->module ?></td>
<td>
Update
</td>
</tr>
<?php endforeach ?>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Family Name</th>
<th>Given Name</th>
<th>Middle Initial</th>
<th>Birthdate</th>
<th>Module Enrolled</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</form>
my jquery for submitting the form
$(document).on('click', '#recieve_btn', function(){
$('#frm-list').trigger('submit');
});
Don't mix inline Java Script code with jQuery, try below instead:
$(document).on('click', '#recieve_btn', function() {
//$('#frm-list').trigger('submit');
if (confirm('Are you sure?')) {
console.log('confirmed');
return true;
} else {
console.log('unconfirmed');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a id="recieve_btn" href="javascript:void(0)" class="btn animated infinite pulse"><span class="glyphicon glyphicon-transfer"></span> Recieve</a></li>
Please try this code. it may help you.
$(document).on('click', '#recieve_btn', function() {
if (confirm('Are you sure?')) {
$('#frm-list').trigger('submit');
} else {
return false;
}
});
Related
I have a table like below:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nazwa</th>
<th scope="col">Cena</th>
<th scope="col">Kupujący</th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key => $value): ?>
<tr>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['name']; ?></td>
<td><?php echo $value['price']; ?></td>
<td><?php echo $value['buyer']; ?></td>
<td><button type="button" name="button2" >Usuń</button></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
how to delete item from this list via clicking on the button in last column of the table?
my php:
$jsonData = file_get_contents("data.json");
$data = json_decode($jsonData, true);
thanks for any help, I don't know how to get value by button clicking :/
It seems that your data is gotten from a file, so to get it done you need to go over all these steps in the same php script:
Get data from this file
Parse data with json_decode
Remove an item using unset($data['id'])
Save new data in the same file
Here is an example:
$jsonData = file_get_contents("data.json");
$data = json_decode($jsonData, true);
// here we go
if(isset($_POST['item_key']) && !empty($_POST['item_key'])) {
$data = array_values($data);
$i=0;
foreach($data as $element) {
//check if it's the right item
if(intval($_POST['item_key']) == $element['id']){ // intval only if you are sure id passed in POST[item_key] always integer
unset($data[$i]);
}
$i++;
}
file_put_contents('data.json', json_encode(array_values($data)));
}
$_POST['item_key'] will come after submiting the form in the html, see below.
In your html code, you will need to add the following:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nazwa</th>
<th scope="col">Cena</th>
<th scope="col">Kupujący</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key =>
$value): ?>
<tr>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['name']; ?></td>
<td><?php echo $value['price']; ?></td>
<td><?php echo $value['buyer']; ?></td>
<td>
<!-- action="#" means you will stay in the same script after submit -->
<form action="#" method="POST">
<input
hidden
type="text"
name="item_key"
value="<?php echo $value['id'];?>"
/>
<input type="submit" value="Remove" />
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
UPDATE
Used unset with array_values after json_decode
Removed header(refre..) since the refresh will be done by form submit to same script
hello i created a datatabe to to load my datas sort them and using the search functionality but it dose not work i tried it been 5 days and i am stuck here i do not know what i am missing or what i done wrong this is my codes if any one can help me i would be thankful
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tbody>
<?php
endwhile;
}
?>
</div>
</table>
these are my bootstrap and scripts that i use
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
also this is my data table code
<script type="text/javascript">
$(document).ready(function() {
$('#datas').dataTable( { "ordering": true } );
} );
</script>
the datatable is created but it does not work like the search or the sorting this is picture of what it likes
i am using bootstrap 4
You are missing <tr> both on your <thead> and <tbody>
<thead style="color:black;">
<th>Product</th>
</thead>
should be:
<thead style="color:black;">
<tr>
<th>Product</th>
<tr>
</thead>
and inside you tbody while:
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td>...</td>
</tr>
<?php endwhile; ?>
You're also closing your </tbody> on every while loop:
</tbody>
<?php
endwhile;
?>
</div> //where are you opening this div? Seems it should not be here
</table>
change to:
<?php endwhile; ?>
</tbody>
</table>
This changes should make your DataTable work as expected.
Malformed html, loops wrong, missing tr tag, etc. Should be something like this.
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tr>
?>
<?php endwhile; ?>
<?php } ?>
</tbody>
</table>
</div>
I have a table with multiple columns (index.php). One column is a checkbox. Whenever the checkbox is checked, it displays another column where you can select a quantity.
I want to be able to hit a button called "Add to Order" and have it use AJAX to add any selected rows to the index-order.php page. After all selections have been made, I want to be able to click the "Checkout" button and have it take me to the index-order.php page where it should be displaying all of the added selections in a table.
I know how to navigate to the index-order.php page so my main question is how can I add the selected rows to the index-order.php page by using ajax when pressing the button?
Index.php code:
<form name="form1" action="index-order.php">
<section id="checkout-btn">
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</form>
<form name="form2" method="POST" action="index-order.php">
<section id="addToOrder">
<button type="submit" class="order" id="order" name="order" value="AddToOrder">Add to Order</button>
</section>
<br>
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
<td name="rows[0][0][loc]" class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
</tr>
<?php } ?>
</tbody>
</table>
</form>
<div id="log"></div>
Index-order.php:
<?php if(isset($_POST['rows'])): ?>
<table cellspacing="20">
<tr align="center">
<th>Loc</th>
<th>Report Code</th>
<th>SKU</th>
<th>Special ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit</th>
<th>Quantity #</th>
</tr>
<?php
foreach($_POST['rows'][0] as $row):
?>
<tr align="center">
<td><?php echo $row['loc']; ?></td>
<td><?php echo $row['rp-code']; ?></td>
<td><?php echo $row['sku']; ?></td>
<td><?php echo $row['special-id']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['quantity']; ?></td>
<td><?php echo $row['unit']; ?></td>
<td><?php echo $row['quant']; ?></td>
</tr>
<?php
endforeach;
?>
</table>
<?php endif; ?>
JavaScript:
$(function () {
$("#order").click(function() {
//reset the logger
$('#log').empty();
$('#merchTable input:checkbox:checked').each(function() {
//for each checked checkbox, iterate through its parent's siblings
var array = $(this).parent().siblings().map(function() {
return $(this).text().trim();
}).get();
console.log(array);
//to print the value of array
$('#log').append(JSON.stringify(array))
var request = $.ajax({
type: 'post',
url: 'index-order.php',
data: array,
success: function(){
alert('success');
},
error: function(){
alert('failure');
}
});
})
});
});
To pass data from one page to another using php you will have to use a session.
So in your ajax call just save your data into the session like so:
add-to-cart.php
session_start();
if (!isset($_SESSION['shopping_cart'])) {
$_SESSION['shopping_cart'] = [];
} else {
$_SESSION['shopping_cart'][] = [
'id' => $_POST['item_id'],
'amount' => $_POST['amount']
];
}
If you then click your checkout button and navigate via a page reload to your index-order.php, you could then access the data via the same session index.
session_start();
if (isset($_SESSION['shopping_cart'])) {
// display your data
} else {
echo "Your shopping cart is empty.";
}
i have one view candidates page in my application..in that page i display all the candidate details..in that page i gave one button called SCHEDULE INTERVIEW..when user click on the button i want to display that particular row candidates values in another page..i want to get only name and email of the particular candidate like:
Name:******
email:*******
like this i want to display that particular candidate details..
View page:
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>experience</th>
<th>CTC</th>
<th>Expected Ctc</th>
<th>role</th>
<th>Current Location</th>
<th>Desired Location</th>
<th>Notice Period</th>
<th>Resume</th>
<th>Actions</th>
</tr>
</thead>
<?php foreach ($view_candidates as $idata) { ?>
<tbody>
<tr id="domain<?php echo $idata->user_id;?>">
<td class="cell checkbox">
<input type="checkbox" class="selectedId" name="selectedId" />
</td>
<td><?php echo $idata->first_name;?></td>
<td><?php echo $idata->last_name;?></td>
<td><?php echo $idata->email;?></td>
<td><?php echo $idata->mobile_number;?></td>
<td><?php echo $idata->experience;?></td>
<td><?php echo $idata->ctc;?></td>
<td><?php echo $idata->expectedctc;?></td>
<td><?php echo $idata->role_name;?></td>
<td><?php echo $idata->current_location;?></td>
<td><?php echo $idata->desired_location;?></td>
<td><?php echo $idata->notice_period;?></td>
<td><?php echo $idata->resume;?></td>
<td>
Schedule interview
</td>
</tr>
</tbody>
Can anyone help me..
How to do this..
Thanks in Advance..
Something like below:
<?php
// controller
function candidate_detail($candidateid)
{
$data = $this->model_name->get_candidate_detail($candidateid);
$viewData['getCandidate'] = $data;
$this->load->view('candidate_view',$viewData);
}
// model
function get_candidate_detail($candidateid)
{
$q = $this->db->query("SELECT * FROM tbl_name WHERE candidate_id = $candidateid");
if($q->num_rows() > 0) {
return $q->row_array();
} else {
return '';
}
}
?>
// view candidate_view
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>experience</th>
<th>CTC</th>
<th>Expected Ctc</th>
<th>role</th>
<th>Current Location</th>
<th>Desired Location</th>
<th>Notice Period</th>
<th>Resume</th>
</tr>
</thead>
<tbody>
<tr id="domain<?php echo $getCandidate['user_id'];?>">
<td class="cell checkbox">
<input type="checkbox" class="selectedId" name="selectedId" />
</td>
<td><?php echo $getCandidate['first_name'];?></td>
<td><?php echo $getCandidate['last_name'];?></td>
<td><?php echo $getCandidate['email'];?></td>
<td><?php echo $getCandidate['mobile_number'];?></td>
<td><?php echo $getCandidate['experience'];?></td>
<td><?php echo $getCandidate['ctc'];?></td>
<td><?php echo $getCandidate['expectedctc'];?></td>
<td><?php echo $getCandidate['role_name'];?></td>
<td><?php echo $getCandidate['current_location'];?></td>
<td><?php echo $getCandidate['desired_location'];?></td>
<td><?php echo $getCandidate['notice_period'];?></td>
<td><?php echo $getCandidate['resume'];?></td>
</tr>
</tbody>
here i want to pass data-id to the modal and i want to access all other student data to be accessed from the modal when clicking on the edit button. how to access these data in bootstrap modal by passing a single value 'data-id' to it? i can use the jquery too.
my code is
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Roll No</th>
<th>Photo</th>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Father Name</th>
<th>Mother Name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<? $count=1; ?>
<?php foreach($students as $student): ?>
<tr>
<td><?php echo $count; ?></td>
<td><?php echo $student['roll']; ?></td>
<td><img src="<?php echo $student['photo']; ?>" width="100px" height="100px"/></td>
<td><?php echo $student['name']; ?></td>
<td><?php echo $student['sex']; ?></td>
<td><?php echo $student['email']; ?></td>
<td><?php echo $student['address']; ?></td>
<td><?php echo $student['phone']; ?></td>
<td><?php echo $student['father_name']; ?></td>
<td><?php echo $student['mother_name']; ?></td>
<td><button data-id="<? echo $student['name']; ?>" class="btn btn-success edit" data-toggle="modal" data-target="#edit_modal">Edit</button>
<button data-id="<? echo $student['id']; ?>" class="btn btn-danger" data-toggle="modal" data-target="#delete_modal">Delete</button>
</td>
</tr>
<? $count++; ?>
</tbody>
<?php endforeach; ?>
</table>
You want your php variables in modal to display data related to the id clicked. For this you want your modal to fetch data dynamically. So set a $_SESSION['modal']['student'] variable and set it to null on page load.
In modal, check if $_SESSION['modal']['student'] is null or not, if not null, fill the modal with data to display.
Now to get data in this variable, use ajax, so when clicked on user, fetch ID using jQuery, make an ajax call and on the set your $_SESSION['modal']['student'] variable with required data running your db queries. On success function of AJAX, toggle modal on, which will now display your set data. And in modal php isset clause, in the end after displaying, unset your $_SESSION['modal']['student'] variable.
Alternately, use JSON to return data to your success function in AJAX and set your displayable innerHTML's using jQuery/JS and this response data. Now toggle your modal to show.
Keep in mind to check if variables are set before displaying, to avoid errors on first time page load.
You can use a bit different way of loading modals.
Right now you're triggering it on click (automatically), but if you want to pass the ID to the modal then you would like to trigger modal programatically.
PHP:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Roll No</th>
<th>Photo</th>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Father Name</th>
<th>Mother Name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<? $count=1; ?>
<?php foreach($students as $student): ?>
<tr>
<td><?php echo $count; ?></td>
<td><?php echo $student['roll']; ?></td>
<td><img src="<?php echo $student['photo']; ?>" width="100px" height="100px"/></td>
<td><?php echo $student['name']; ?></td>
<td><?php echo $student['sex']; ?></td>
<td><?php echo $student['email']; ?></td>
<td><?php echo $student['address']; ?></td>
<td><?php echo $student['phone']; ?></td>
<td><?php echo $student['father_name']; ?></td>
<td><?php echo $student['mother_name']; ?></td>
<td><button data-id="<? echo $student['name']; ?>" class="btn btn-success btn_modal edit" data-target-modal="#edit_modal">Edit</button>
<button data-id="<? echo $student['id']; ?>" class="btn btn-danger btn_modal" data-target-modal="#delete_modal">Delete</button>
</td>
</tr>
<? $count++; ?>
</tbody>
<?php endforeach; ?>
</table>
Now it depends how you want to pass the data-id to the modal. If you're using an iframe i suggest pass it in the URL params like url.com/data-id or if you're fetching somethings via ajax then just include the ajax in the below click trigger code, it will work fine.
JS:
$('.btn_modal').on('click', function(e)
{
var dataId = $(e.currentTarget).attr('data-id');
var modalId = $(e.currentTarget).attr('data-target-modal');
// Ajax Function to load up the details or html for modal to render -- pass the dataId as params
$.ajax({
url: 'someurl.php?student_id='+dataId,
type: "GET",
success: function(data)
{
// Here either you replace the html of the called modal or just replace values depends on what you've thought of.
},
error: function(e)
{
console.log(e);
}
});
$('#'+modalId).modal('show');
});