I have two input fields with same class name and the same data.
Here is my while loop generated input field
<tr>
<td>
<input onchange="mySubmit(this.form)" class="ot_value" name="ot_value" type="text" value="10">
<input type="hidden" name="ot_id" class="ot_id" value="1">
</td>
</tr>
<tr>
<td>
<input onchange="mySubmit(this.form)" class="ot_value" name="ot_value" type="text" value="11">
<input type="hidden" name="ot_id" class="ot_id" value="2">
</td>
</tr>
I was trying to send data from ajax to php when user change any value.
Here is my jquery
function mySubmit(theForm) {
var ot_value= $(".ot_value").val();
var ot_id= $(".ot_id").val();
$.ajax({
type:"post",
url:"../apis/update_ot.php",
data: "ot_value=" + ot_value+ "&ot_id=" + ot_id,
success:function(data){
alert(data);
}
});
}
I was able to send data when user is changing any input field data. But the problem is that, it's taking only the 1st row data.
How can I get the exact data, that what user are changing in input field.
You have jQuery, use it
remove onchange="mySubmit(this.form)" from the field and do
$(function() {
$(".ot_value").on("change", function() {
const ot_value = $(this).val();
const ot_id = $(this).next(".ot_id").val();
console.log("about to submit",ot_value,ot_id)
$.ajax({
type: "post",
url: "../apis/update_ot.php",
data: "ot_value=" + ot_value + "&ot_id=" + ot_id,
success: function(data) {
alert(data);
}
});
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input class="ot_value" name="ot_value" type="text" value="10">
<input type="hidden" name="ot_id" class="ot_id" value="1">
</td>
</tr>
<tr>
<td>
<input class="ot_value" name="ot_value" type="text" value="11">
<input type="hidden" name="ot_id" class="ot_id" value="2">
</td>
</tr>
</tbody>
</table>
Related
I have a HTML table which is editable/dynamic. Please see table below:
<table>
<tr>
<td><input id="txt_row_{{ $records[$i]["row_id"] }}" type="hidden" value="{{$records[$i]["row_id"]}}" /></td>
<td><input type="checkbox" id="is_workingday_row_{{ $records[$i]["row_id"] }}" checked /></td>
</tr>
<tr>
<td><input id="txt_row_{{ $records[$i]["row_id"] }}" type="hidden" value="{{$records[$i]["row_id"]}}" /></td>
<td><input type="checkbox" id="is_workingday_row_{{ $records[$i]["row_id"] }}" checked /></td>
</tr>
</table>
Now, how can I loop thru the entire table to get the values/changes thru jQuery and submit it via AJAX to a PHP script? Can you at least point me in the right direction? Thanks.
Hi #Ronald you can use form instead of table but if you are using table you have to use jquery each function to get all inputs value and create object of these values and after that you can send this through ajax
$(document).ready(function(){
var allInputs = $('table').find('input');
var obj = {};
$(allInputs).each(function(){
var key = $(this).attr('name');
var value = $(this).val();
obj[key] = value
});
console.log(obj);
});
$(document).ready(function(){
var allInputs = $('table').find('input');
var obj = {};
$(allInputs).each(function(){
var key = $(this).attr('name');
var value = $(this).val();
obj[key] = value
});
console.log(obj);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input id="txt_row_1" type="hidden" name="txt_row_1" value="record1" /></td>
<td><input type="checkbox" name="is_workingday_row_1" id="is_workingday_row_1" checked /></td>
</tr>
<tr>
<td><input id="txt_row_2" name="txt_row_2" type="hidden" value="record2" /></td>
<td><input type="checkbox" name="is_workingday_row_2" id="is_workingday_row_2" checked /></td>
</tr>
</table>
A part on my page is responsible for multiple picture uploads, it worked for a while but it is not working anymore.
I'm using a WampServer Version 3.1.7 64bit and testing on localhost.
I have tried accepting and sending datas via ajax instead of html submit, but i didn't get datas on php side either, but on client side i had all datas before sending ( FormData() ).
HTML part:
<div class="div_shadow_here">
<form id="gallery_data" method="post" enctype="multipart/form-data">
<input type="hidden" name="formid" value="<?php echo $_SESSION[" formid "]; ?>" />
<table class="news_table">
<tr>
<td>
<p class="name_col">Gallery name:</p>
</td>
<td>
<input class="input_news" id="gallery_title" type="text" name="gallery_title" />
</td>
</tr>
<tr>
<td>
<p class="name_col">Picture(s):</p>
</td>
<td>
<input class="input_news" id="news_picture_path" type="file" name="picture_path[]" multiple />
<label id="label_for_input" for="picture_path">Select picture(s)</label><span id="uploadState"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="img_container"></div>
</td>
</tr>
</table>
<button class="print_button hidden_a" type="submit" name="login" id="save_news" form="gallery_data">Save</button>
</form>
</div>
PHP part for testing:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<script>console.log("Not empty")</script>';
if (isset($_POST['formid'])) {
echo '<script>console.log("'.$_POST['formid'].
'")</script>';
}
if (isset($_POST['gallery_title'])) {
echo '<script>console.log("'.$_POST['gallery_title'].
'")</script>';
}
if (isset($_FILES['picture_path']['name'])) {
echo '<script>console.log("'.count($_FILES['picture_path']['name']).
'")</script>';
}
} else {
echo '<script>console.log("Empty")</script>';
}
I get Notice: Undefined index: gallery_title.. errors without isset($_POST['gallery_title']) testing (same for all other input fields).
Ajax for testing:
$('body').on('click', '#save_news', function(e) {
e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);
for (var key of formData.keys()) {
console.log(key);
}
for (var value of formData.values()) {
console.log(value);
}
$.ajax({
url: 'galleryupload.php',
type: 'POST',
success: function(data) {
alert("Data Uploaded: " + data);
},
data: formData,
cache: false,
contentType: false,
processData: false
});
return false;
});
I have currently this html:
<td>
<input type="hidden" class="old_name" name="old_name" value="folder1/image.jpg" />
<input type="text" class="new_name" name="new_name" value="" />
<button type="submit" class="rename">Rename</button>
</td>
<td>
<input type="hidden" class="old_name" name="old_name" value="folder2/image.jpg" />
<input type="text" class="new_name" name="new_name" value="" />
<button type="submit" class="rename">Rename</button>
</td>
<td>
<input type="hidden" class="old_name" name="old_name" value="folder3/image.jpg" />
<input type="text" class="new_name" name="new_name" value="" />
<button type="submit" class="rename">Rename</button>
</td>
My jquery ajax looks like this:
// AJAX for rename files
$(document).on('click' , '.rename' , function() {
var old_name = $(".old_name").val(); // getting old value from input
var new_name = $(".new_name").val(); //getting new value from input
$.ajax({
url:"",
method:"POST",
data:{
old_name:old_name ,
new_name:new_name
},
success:function(data){
// here comes echo
}
});
});
My php:
if( isset($_POST["old_name"]) && isset($_POST["new_name"]) ) {
echo $_POST["old_name"];
echo $_POST["new_name"];
First problem: when click on Rename second button, it echos the old_name from first button. So how can i catch the second value old_name when click on second Rename button?
Second problem: php does not echo the $_POST["new_name"]
How can i achieve this without using a form?
First problem solution
use different name (in your specific case different class name ) for different input
<td>
<input type="hidden" class="old_name1" name="old_name" value="folder1/image.jpg" />
<input type="text" class="new_name1" name="new_name" value="" />
<button type="submit" class="rename1">Rename</button>
</td>
<td>
<input type="hidden" class="old_name2" name="old_name" value="folder2/image.jpg" />
<input type="text" class="new_name2" name="new_name" value="" />
<button type="submit" class="rename2">Rename</button>
</td>
<td>
<input type="hidden" class="old_name3" name="old_name" value="folder3/image.jpg" />
<input type="text" class="new_name3" name="new_name" value="" />
<button type="submit" class="rename3">Rename</button>
</td>
new js function will be
$(document).on('click' , '.rename1' , function() {
var old_name = $(".old_name1").val(); // getting old value from input
var new_name = $(".new_name1").val(); //getting new value from input
$.ajax({
url:"",
method:"POST",
data:{
old_name:old_name ,
new_name:new_name
},
success:function(data){
// here comes echo
}
});
});
$(document).on('click' , '.rename2' , function() {
var old_name = $(".old_name2").val(); // getting old value from input
var new_name = $(".new_name2").val(); //getting new value from input
$.ajax({
url:"",
method:"POST",
data:{
old_name:old_name ,
new_name:new_name
},
success:function(data){
// here comes echo
}
});
});
$(document).on('click' , '.rename3' , function() {
var old_name = $(".old_name3").val(); // getting old value from input
var new_name = $(".new_name3").val(); //getting new value from input
$.ajax({
url:"",
method:"POST",
data:{
old_name:old_name ,
new_name:new_name
},
success:function(data){
// here comes echo
}
});
});
Second problem solution
you probably leave the field empty
I have the following set up for my ajax call but it is not working when I click on a star (this is a star rating), Although if i access the ajax.php directly it inserts, but the ajax call is not happening.
html in php file
echo '<table>
<tr>
<td style="padding:10px;">
<input type="hidden" name="userID" value="'.$user_id.'">
<span style="font-size: 20px; vertical-align:top;">Comments</span>
</td>
<td style="padding:10px;">
<textarea name="comments" cols="60" rows="2"></textarea>
</td>
<td>
<div>
<input name="star1000" value "1" type="radio" class="star"/>
<input name="star1000" value="2" type="radio" class="star"/>
<input name="star1000" value="3" type="radio" class="star"/>
<input name="star1000" value="4" type="radio" class="star"/>
<input name="star1000" value="5" type="radio" class="star"/>
</div>
</td>
<tr>
</table>';
JS - being used to send the values
<script>
$('.star').rating({
callback: function(value, link) {
var name = $(this).attr('name');
var userID = $(this).closest('td').find('input[name="userID"]').val();
var comments = $(this).closest('td').find('textarea[name="comments"]').val();
$.ajax({
url: "http://localhost/mywebsite/ajax.php",
type: "POST",
data: {
name: name,
value: value,
userID: userID,
comments: comments
},
cache: false,
success: function(response) {
try {
console.log(response);
} catch (err) {
alert(response);
}
}
});
}
});
</script>
My ajax.php located at http://localhost/mywebsite/ajax.php
<?php
extract($_POST);
$rate_val = $_POST['value'];
$user_id = $_POST['userID'];
$comments = $_POST['comments'];
$insert_q = "INSERT INTO ratings (rate_comments, rate_num, option_id, rate_date,user_id)
values ('$comments','$rate_val','1',now(),'$user_id')";
include 'opendbconn.php';
if(!($result = mysql_query($insert_q, $database)))
{
print("Could not execute query!<br/>");
die(mysql_error()."</div>
</div>
</body>
</html>");
}
include 'closedbcon.php';
?>
You have to bind the event click with your function .rating() so javascript knows that it has to execute the function .rating() when ".star" is clicked.
You could do it like this:
$(document).ready(function(){
//other javascript code...
$('.star').bind('click',function(){
//your rating function
});
});
I'm not sure if what I'm trying to do is simple or not but here it is:
I have rows of data in a table. The last 3 fields are text fields that take user input. Each row has it's own UPDATE button.
I'm using the following code to try and do a jQuery .ajax post but I'm seeing my issue - I'm assigning IDs to my input fields and you can only have one ID declared per page so I'm sure that's one issue.
I'm trying to make it so that when you click the UPDATE button, it passes the variables from that row in the INPUT boxes and the hidden INPUT field for the rowID, and calls a .php file that updates the DB.
$(function() {
$(".submit").click(function() {
var status = $("#status").val();
var ly = $("#ly").val();
var rt = $("#rt").val();
var offerout = $("#offerout").val();
var lineid = $("#lineid").val();
var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&lineid=' + lineid;
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
and on line of my form (each line is the same but with a different hidden ID variable):
<form method="POST" name="form">
<td>This one</td><td>Los Angeles</td>
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status" name="status"></td>
<td><input size="6" type="text" id="ly" name="ly"></td>
<td><input size="6" type="text" id="rt" name="rt"></td>
<td><select id="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" id="lineid" value="97">
<td><input type="submit" class="submit" value="Update"></td>
</form>
Thanks in advance, been working for days on this!
Duplicating id attributes will cause problems. When you say $("#ly"), you'll probably get the first one on the page and that's usually not the one you want. That's easy to solve:
Drop the id attributes in favor of class attributes. You could also use attribute selectors.
Adjust your jQuery selectors to go up to an ancestor and come back down to the thing you want.
First the HTML:
<td><input size="6" type="text" class="status" name="status"></td>
<td><input size="6" type="text" class="ly" name="ly"></td>
<td><input size="6" type="text" class="rt" name="rt"></td>
<td><select class="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" class="lineid" value="97">
Then your jQuery:
var $form = $(this).closest('form');
var status = $form.find(".status").val();
var ly = $form.find(".ly").val();
var rt = $form.find(".rt").val();
var offerout = $form.find(".offerout").val();
var lineid = $form.find(".lineid").val();
Also, since you are doing a POST request, you should just hand jQuery an object and let it worry about serializing it:
var data = {
status: status,
ly: ly,
rt: rt,
offerout: offerout,
lineid: lineid
};
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: data,
success: function() {
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
That should take care of your client-side issues.
You could store a row number data variable in each submit and use that to determine which row was clicked and thus which inputs you need to pull values from.
$(function() {
$(".submit").each(function () {
var rowNum = $(this).attr('data-rownum');
$(this).click(function () {
var status = $("#status" + rowNum).val();
var ly = $("#ly" + rowNum).val();
var rt = $("#rt" + rowNum).val();
....
});
});
});
<form method="POST" name="form">
....
<td><input size="6" type="text" id="status1" name="status"></td>
<td><input size="6" type="text" id="ly1" name="ly"></td>
<td><input size="6" type="text" id="rt1" name="rt"></td>
<input type="hidden" name="lineid" id="lineid1" value="97">
<td><input type="submit" class="submit" value="Update" data-rownum="1"></td>
</form>
I remove hidden field and assign database id to update button as button will click get that id and corespondent data.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<form method="POST" name="form">
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status_97" name="status"></td>
<td><input size="6" type="text" id="ly_97" name="ly"></td>
<td><input size="6" type="text" id="rt_97" name="rt"></td>
<td><select name="offerout" id="offerout_97"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<td><input type="submit" class="submit" value="Update" name="97"></td>
</form>
</tr>
<tr>
<form method="POST" name="form">
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status_96" name="status"></td>
<td><input size="6" type="text" id="ly_96" name="ly"></td>
<td><input size="6" type="text" id="rt_96" name="rt"></td>
<td><select name="offerout" id="offerout_96"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" id="lineid_96" value="96">
<td><input type="submit" class="submit" value="Update" name="96"></td>
</form>
</tr>
</table>
java script code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
$(".submit").click(function() {
var rowToUpdate = $(this).attr('name');
var status = $("#status_"+rowToUpdate).val();
var ly = $("#ly_"+rowToUpdate).val();
var rt = $("#rt_"+rowToUpdate).val();
var offerout = $("#offerout_"+rowToUpdate).val();
var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&rowToUpdate='+ rowToUpdate;
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
</script>
I hope this will help you..