I am using a while loop to create a table and I am trying to pass a unique value stored in a php variable called $i to a jquery ajax call but all I get returned it 'undefined'.
The portion of the html table (whole table is wrapped in a div called audit_content which is not part of the while loop)
<tr>
<td colspan="3">
<input type="button" class="delete_submit delete_from_audit" name="image_delete" value=""
onClick="delete_image('<? echo $image_id; ?>','<? echo $audit_id; ?>')" />
<input type="button" class="reset_grade control_submit ie7_reset"
onclick="reset_image('<? echo $image_id; ?>','<? echo $audit_id; ?>')" value="" >
<input type="hidden" class="form_id" value="<? echo $i; ?>" >
<input type="button" name="audit_submit"
class="audit_submit audit_submit_btn ie7_submit" value=""; />
</td>
</tr>
the Jquery
<script>
$(document).ready(function(){
$('#audit_content').on("click", ".audit_submit", function(){
var form_id = $(this).next('.form_id').val();
alert(form_id);
//$.ajax({
//type: "POST",
//url: "ajax/image_audit.php",
//data: $('#audit_form').serialize()
//});
});
});
</script>
The .form_id element is before the .audit_submit button... Try prev() instead of next():
var form_id = $(this).prev('.form_id').val();
You could also use siblings():
var form_id = $(this).siblings('.form_id').val();
<script>
$(document).ready(function(){
$(document).on("click", ".audit_submit", function(){
var form_id = $(this).next('.form_id').val();
alert(form_id);
//$.ajax({
//type: "POST",
//url: "ajax/image_audit.php",
//data: $('#audit_form').serialize()
//});
});
});
</script>
<input type="button" name="audit_submit"
class="audit_submit audit_submit_btn ie7_submit" value=""**---> ; <----** />
Why is there a semi colon ??
Php will consider it as the end of the statement.
Related
I am trying hard to find the problem, here is my ajax code
$(document).ready(function(){
$(document).on("click", "#addItem", function(e){
e.preventDefault();
var form = $(this).closest(".form-submit");
var id = form.find(".pid").val();
var name = form.find(".pname").val();
var price = form.find(".pprice").val();
var image = form.find(".pimage").val();
var code = form.find(".pcode").val();
$.ajax({
url: "action.php",
method: "post",
data: {pid:id, pname:name, pprice:price, pimage:image, pcode:code},
success:function(response){
$(".alert-message").html(response);
window.scrollTo(20,2);
load_cart_item_number();
}
});
});
load_cart_item_number();
function load_cart_item_number() {
$.ajax({
url: "action.php",
method: "get",
data: {cartItem: "cart_item"},
success:function(response){
$("#cart-item").html(response);
}
});
}
});
and HTML form :
<form>
<input type="hidden" class="pid" value="<?php echo $row['product_id'] ?>">
<input type="hidden" class="pname" value="<?php echo $row['product_name'] ?>">
<input type="hidden" class="pprice" value="<?php echo $row['product_price'] ?>">
<input type="hidden" class="pimage" value="<?php echo $row['product_image'] ?>">
<input type="hidden" class="pcode" value="<?php echo $row['product_code'] ?>">
<button id="addItem" class="btn add-to-cart">Add To Cart</button>
</form>
the only problem is add to cart button is not working and there is no error in console showing.
I want to be able to dynamically add text fields whenever the button
is clicked
I want to be able to get the data from the text fields and insert it
into the database.
As of now everything else works and I just need this, maybe I can
also add a remove button to remove the last text field dynamically
also
the reason why I need this to be dynamic is because I don't want to
refresh the page cause all the data will be lost
I have found a code that would help me dynamically add text fields
but I don't know how to make it so that I would need to go to another
page just to access data
<html>
<form action="checklist3.php" method="post">
<button type='submit' name='submit' id='buttonParent'>Submit</button>
<button type="submit" name="back">Back</button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<?php
session_start();
require_once('../mysql_connect.php');
$rowarray = $_SESSION['rowarray'];
$dishname = $_SESSION['dishname'];
echo '<br>';
echo "Add Procedures";
echo ' <form name="addproc" id="addproc">
<table class="proctable" id="proctable">
<tr>
<td><input type="text" name="procedure[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
</form>';
echo "<input type='button' value='Remove Button' id='removeButton'>";
echo "<body>";
echo "</body>";
if (isset($_POST['home'])) {
header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/chefmenu.php");
}
if (isset($_POST['back'])) {
header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/checklist2.php");
}
?>
</form>
<script>
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#proctable').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter Procedure" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr('id');
$('#row' + button_id + '').remove();
});
$('#submit').click(function () {
$.ajax({
url: 'name.php',
method: 'POST',
data: $('#addproc').serialize(),
success: function (data) {
alert(data);
$('#addproc')[0].reset();
}
});
});
});
</script>
</html>
It's easy to do with a little of jquery and AJAX :
Create and append a field to your form using jquery, something like
Capture your form sumission with jquery event listeners : $("form").live("submit", function (e){e.preventDefault()...}
Serialize all your form (with the newly added fields) and send them via AJAX
An example of code :
$("form").live("submit", function (event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: form.attr('action'), // Get the action URL to send AJAX to
type: "POST",
data: form.serialize(), // get all form variables
success: function(result){
// ... do your AJAX post result
}
});
});
I am trying to hide row from while loop. I want to hide full row when delete query success. Delete query is working fine need help to hide row. Thanks in advance.
While loop Code :
While Loop is working fine. Should i add any class to row for deleting. $chcrsid is unique.
while ($rowslctd=mysql_fetch_array($resultslctd))
{
$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];
echo"<tbody><tr>
<td>$chcrs</td>
<td>$chcrsid</td>
<td><form name='cancel_selection' class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr><tbody>
Delete Function Code:
Function is running fine but it do not hide row which is deleted from database.
<script>
$(function(){
$('.btn.btn-cancel').click(function(e) {
e.preventDefault();
var $form = $(this).closest(".cancel_selection");
var formData = $form.serializeArray();
var userId = $form.find(".user_id").val();
var URL = "cancelselection.php";
$.post(URL, formData).done(function(data) {
});
fail(function(jqXHR, textStatus, errorThrown) {
});
});
});
</script>
Give unique id to row that you want to delete or hide. And using jQuery you can achieve that with that unique id.
Something like below:
HTML code
<table id="listData">
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)) {
$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];
echo"<tr id='row_selection_" .$chcrs. "'>
<td>". $chcrs ."</td>
<td>". $chcrsid ."</td>
<td><form name='cancel_selection_" .$chcrs. "'
id = 'cancel_selection_" .$chcrs. "'
class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr>";
<?php } ?>
<tbody>
</table>
On AJAX success
$(function(){
$('.btn.btn-cancel').click(function(e) {
e.preventDefault();
var $form = $(this).closest(".cancel_selection");
var formData = $form.serializeArray();
var userId = $form.find(".user_id").val();
var URL = "cancelselection.php";
$.post(URL, formData).done(function(data) {
var hideId = 'table#listData tr#row_selection_' + userId;
$(hideId).remove(); // delete
$(hideId).hide(); // hide
});
fail(function(jqXHR, textStatus, errorThrown) {
});
});
});
TRY THIS
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)):?>
<tr id="row_to_hide">
<td><?php echo $rowslctd['chcrs'];?></td>
<td><?php echo $rowslctd['chcrsid'];?></td>
<td>
<form>
<input name="id" type="hidden" value="<?php echo $rowslctd['chcrsid'];?>">
<button onclick="process_form($(this).closest('form'))">Cancel</button>
</form>
</td>
</tr>
<?php endwhile;?>
</tbody>
<script>
function process_form(form) {
form.on('submit', function(e) {
e.preventDefault();
$.ajax('cancelselection.php',{
data: $(form).serialize(),
type: 'POST',
success: function (data) {
$(form).closest('#row_to_hide').remove();
}
});
});
}
</script>
This is my Form
<form method="post" id="BargainForm">
<input type="hidden" name="pro_id" class="pro_id" id="pro_id" value="<?php echo $pro_id; ?>">
<input type="hidden" name="customer_id" class="customer_id" id="customer_id" value="<?php echo $customer_id; ?>">
<input type="text" name="bargain_qty" class="bargain_qty" id="bargain_qty" placeholder="Qty" required/></br></br>
<?php if($productType = 'Configurable'): ?>
<?php foreach($attributes as $attribute): ?>
<input type="text" name="<?php echo strtolower($attribute['store_label']); ?>"
class="<?php echo strtolower($attribute['store_label']); ?>"
id="<?php echo strtolower($attribute['store_label']); ?>"
placeholder="<?php echo $attribute['store_label'] ?>"></br></br>
<?php endforeach; ?>
<?php else: ?>
<?php endif; ?>
<input type="text" name="bargain_price" class="bargain_price" id="bargain_price" placeholder="Total Price" required/></br></br>
<input type="submit" name="bargain_btn" class="bargain_btn">
</form>
Here is my javascript code
<script type="text/javascript">
$(function () {
$('.bargain_btn').click(function(e) {
var qty = $( "#bargain_qty" ).val();
var price = $( "#bargain_price" ).val();
var pro_id = $( "#pro_id" ).val();
var customer_id = $( "#customer_id" ).val();
var att_lable = $( "#<?php echo strtolower($attribute['store_label']); ?>" ).val();
alert(att_lable);
e.preventDefault();
$.ajax({
url: "<?php echo Mage::getUrl('bargain/Ajax/index'); ?>",
type: "POST",
data: {qty,price,pro_id,customer_id},
success: function(data) {
if(data.success) {
}
}
});
});
});
In form i am using foreach. If i have 2 data so it will display 2 input tags, i just don't know how to save values of that 2 input and pass it to data: {qty,price,pro_id,customer_id},
Thank you in advance!
Provide a common class to all textbox that are generated using loop like:
foreach(...)
{
echo '<input class="myTxt" value="" id="" />';
}
Jquery:
var arr = [];
$('.myTxt').each(function(){
arr.push($(this).val());
});
pass this array i.e. arr to ajax call in data{} section using serialize or on an index.
Replace
data: {qty,price,pro_id,customer_id},
By
data: "qty="+qty+"&price="+price+"&pro_id="+pro_id+"&customer_id="+customer_id+"&att_lable="+att_lable,
Do not use:
data: { qty, price, pro_id, customer_id },
Instead use:
data: $("#BargainForm").serialize(),
It will work only if your $attribute['store_label'] name is unique.
The code below is a attempt to create a comment system using ajax and php here php part works well comment is inserted into table but seems I didn't get my hands on ajax yet. Ajax does not work comment is not shown unless I reload page. On reloading page comment appears perfectly where it should be so help me on fixing my ajax code.
<?php
if(isset($_POST['content'])) {
$comment=strip_tags($_POST['content']);
$com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
$com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));
}
?>
<div class='db'>
<table>
<tr>
<td>
<img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
</td>
<td>
<a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
<p><?php echo $tar['comment']; ?></p>
</td>
<td>
<a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var dataString = 'content=' + test;
if (test == '') {
alert("Please Enter Some Text");
} else {
$.ajax({
type: "POST",
url: "",
data: dataString,
cache: false,
success: function(html) {
$(".db").show(html);
}
});
}
return false;
});
});
</script>
<form method='post' name='form' action='' class='commentbox'>
<textarea cols='30' rows='2' name='content' id='content'></textarea><br />
<input type='submit' value='Comment' name='submit'class='comment_button'/>
</form>
You dont need to use the variable dataString and you need to change the $.ajax() function for this:
var test = $("#content").val();
$.ajax({
type: "POST",
url: "",
data: {
content: test;
},
success: function(response) {
$(".db").append(response);
}
});
change the following line to avoid page refreshes:
$(".comment_button").click(function(event) {
event.preventDefault();
or change the attrubute type="submit" of your button for type="button", like this:
<button type='button' name='submit' class='comment_button'>Comment</button>
I hope it helps you...
Try this.
And make sure jQuery library is also included in your page.
HTML PAGE
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var comment = test;
if (test == '') {
alert("Please Enter Some Text");
} else {
$.ajax({
type: "POST",
url: "process.php",
data: {content : comment},
cache: false,
success: function(html) {
$("#db").append(html);
}
});
}
return false;
});
});
</script>
<div id="db">
<!--Returned comment will appear here -->
</div>
<form method='post' name='form' action='process.php' class='commentbox'>
<textarea cols='30' rows='2' name='content' id='content'></textarea><br />
<input type='submit' value='Comment' name='submit'class='comment_button'/>
</form>
PHP PAGE
process.php
<?php
if(isset($_POST['content'])) {
$comment=strip_tags($_POST['content']);
$com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
$com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));
}
?>
<table>
<tr>
<td>
<img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
</td>
<td>
<a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
<p><?php echo $tar['comment']; ?></p>
</td>
<td>
<a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
</td>
</tr>
</table>
Use
$(".db").append(html);
if you already have existing comments like:
<div class = "db">
Comment 1
Comment 2
...
</div>
.append will add more HTML to existing tag.