PHP Ajax javascript looping through table with input fields - javascript

How can i get specific input values of each row when i click the button using ajax javascript. here is my code
here is my example of getting the data from database dynamically with input fields and button individually
<div style="width:100%; min-height:275px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablelist">
<form action="" method="get" name="formwebservice">
<tr>
<td colspan="3">
<div class="pgLoading">
<table style="border:1px solid #FF00A6; border-top:none;" class="tablelisttable"
border="0" cellspacing="0" cellpadding="0">
<tr class="tablelisttr">
<td>Branch ID</td>
<td>Branch Code</td>
<td>Branch Name</td>
<td>Last Sync Date</td>
<td>Start Date</td>
<td>End Date</td>
<td>Synchronization</td>
<td></td>
</tr>
<?php
$query_branch="SELECT * FROM Branch";
$query_branch_result=mysqli_query($con,$query_branch) or die(mysqli_error($con));
while ($row = mysqli_fetch_assoc($query_branch_result)) {
echo "<tr class='listtr' align='center'>
<td>".$row['BranchID']."</td>
<td>".$row['BranchCode']."</td>
<td>".$row['BranchName']."</td>
<td>2018-04-14 05:39:57</td>
<td><input type='text' name='startdate'> </td>
<td><input type='text' name='enddate'></td>
<td><input type='button' name='sync' value='Synchronize'></td>
<td>0/0</td>
</tr>";
}
?>
</table>
</div>
</td>
</tr>
</form>
</table>
</div>
index.js
$(function(){
$('[name=sync]').click(function(){
$.ajax({
type : "get",
data : $('[name=formwebservice]').serialize(),
url : "save.php",
success : function(data){
$('.loader').html(' ');
$('.pgLoading').html(data).hide().fadeIn('slow');
},
beforeSend : function(){
$('.loader').html('Loading... Please wait...').hide().fadeIn();
}
});
}); });
save.php
if(isset($_GET['startdate']) && isset($_GET['enddate'])) {
$StartDate=$_GET['startdate'];
$EndDate=$_GET['enddate'];
echo $StartDate;
echo $EndDate;
}else{
echo "NO DATA INPUT";
}
my problem is the $_GET['startdate'] and $_GET['enddate'] is not set so im always getting no data input.

Related

To show error message on ajax error : function()

I want to show error message in directed page if error part is fire in my ajax.but when it goes to this directed page it not show error message if i refresh this page it shows error message.below is my code.
index.html
<form method="post" name="myForm" action="tracking.php">
<input type="text" name="number" id="number" placeholder="Enter LR Number" required>
<input type="submit" name="submit" value="Go">
</form>
tracking.php
<script>
$(document).ready(function () {
var from = "";
$('#loadings').show();
$.ajax({
type: "GET",
url: 'http://apis.abc.abc/api/Get_Loadsheet_Details/<?php echo $number; ?>',
dataType: 'json',
success: function (response) {
$('#loadings').hide();
console.log(response);
document.getElementById('lrid').innerHTML = "LR NO: " + response[0].LRSUFIX + response[0].LR_NO;
document.getElementById('consign').innerHTML = response[0].COMPANY_NAME;
document.getElementById('from').innerHTML = response[0].LOADFROMMST;
document.getElementById('dest').innerHTML = response[0].DESTINATION;
document.getElementById('case').innerHTML = response[0].NO_OF_PKT;
document.getElementById('lrsta').innerHTML = response[0].LR_STATUS;
document.getElementById('lr').innerHTML = response[0].lrLoadStatus;
document.getElementById('vecno').innerHTML = response[0].VEHICLE_NO;
document.getElementById('lrstatus').innerHTML = response[0].LOADIG_STATUS;
document.getElementById('ldate').innerHTML = response[0].DATE;
}, error: function (errors) {
console.log(errors);//alert('hi');
$('#loadings').hide();
$('#error').html("<h2><span style='color:red;'>No data found on this LR No.</span></h2>");
}
});
});
</script>
<section>
<div id="error"></div>
<div class="loader-div" style="position:relative;" ><img id="loadings" src="images/loading2.gif" style=" left: 40%;
position: absolute;
top:250px;
z-index:1111;"></div>
<div class="container" >
<div class="body_left" id="container">
<h1 class="heading_3">Tracking Details</h1>
<table width="100%" class="track">
<tr>
<th >Order Information</th>
<th id="lrid"></th>
</tr>
<tr>
<td>Consignee</td>
<td id="consign"> </td>
</tr>
<tr>
<td>From</td>
<td id="from"></td>
</tr>
<tr>
<td>Destination</td>
<td id="dest"> </td>
</tr>
<tr>
<td>Cases</td>
<td id="case"> </td>
</tr>
<tr>
<td>LR Status</td>
<td id="lrsta"></td>
</tr>
<tr>
<td>LR</td>
<td id="lr"></td>
</tr>
</table>
<br>
<br>
<table width="100%" class="track">
<tr>
<th colspan="2">Load Information</th>
</tr>
<tr>
<td>VEHICLE NUMBER: </td>
<td id="vecno"></td>
</tr>
<tr>
<td>LOAD STATUS </td>
<td id="lrstatus"> </td>
</tr>
<tr>
<td>LOAD DATE:</td>
<td id="ldate"> </td>
</tr>
</table>
</div>
</div>
</section>
Try to put your Script code underneath HTML codes. Because Jquery can't find the selector "#error" before html get loaded.
Just make a try.

How to store all column to my database? by Javascript

///some connect to database code here...
<form action="update.php" method="post">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="10">Index</th>
<th>Item</th>
<th>numbers</th>
</tr>
<?php
while($row = mysql_fetch_array($query)){
echo"
<tr>
<td><input type='text' name='indexNumber' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number' class='txtexample'>".$row['number']."</textarea></td>
</tr>
";}?>
<tr><td colspan="3" align="right"><input type="submit" value="Update"/></td></tr>
</table>
Above is my code, I need update all column of table to my database, if I click submit, just update the last column only.
What wrong in my code? if use javascript, how to solve it?
<?php
include 'connect.php';
$index= $_POST["indexNumber"];
$item1= $_POST["item"];
$number1= $_POST["number"];
$query=mysql_query("UPDATE `file` SET `item`='$item1' WHERE `indexNumber`='$index';");
echo "<script language=javascript>alert('Update Successful');window.location='index.php'</script>";
?>
Above is update.php
You need to use array for this.
<tr>
<td><input type='text' name='indexNumber[]' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item[]' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number[]' class='txtexample'>".$row['number']."</textarea></td>
</tr>
Please check updated script
///some connect to database code here...
<form action="update.php" method="post">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="10">Index</th>
<th>Item</th>
<th>numbers</th>
</tr>
<?php
while($row = mysql_fetch_array($query)){
echo"
<tr>
<td><input type='text' name='indexNumber[]' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item[]' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number[]' class='txtexample'>".$row['number']."</textarea></td>
</tr>
";}?>
<tr><td colspan="3" align="right"><input type="submit" value="Update"/></td></tr>
</table>

why JQuery serialize() is not working in jquery/Ajax request?

I am using jQuery/Ajax to submit a form but when I submit it BUT it's return empty value in .php page. I think the jQuery serialize() is not getting the data from the FORM. can you please fix it why it's not working ?
Here is my html code :
<form id="phone_form">
<table width="290" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:0px;" id="phoneWraper">
<tr>
<td colspan="2"><div id="phone_success"></div></td>
</tr>
<tr><td>Phone ( + )</td><td> </td></tr>
<tr>
<td align="right">Work :</td>
<td align="right"><input value="<?php echo $work_phone; ?>" type="text" name="work_phone" id="work_phone" placeholder="work phone"/></td>
</tr>
<tr>
<td align="right">Mobile :</td>
<td align="right"><input value="<?php echo $mobile_phone; ?>" type="text" name="mobile_phone" id="mobile_phone" placeholder="mobile phone"/></td>
</tr>
</table>
<table width="290" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:0px;">
<tr>
<td colspan="2" align="right"><input type="submit" class="search_submit" value="Save" id="phone_form_submit"></td>
</tr>
</table>
</form>
Here is my JS code :
$("#phone_form_submit").on('click', function(event){
event.preventDefault();
$.ajax({
type : 'post',
url : 'save_phone.php',
data : $("#phone_form").serialize(),
dataType : 'html',
success : function(result){
alert(result);
}
});
});
Thank You.
In firebug I see this :

Pass the id from database to in open modal box

What I need to do is how I can pass the id depends on id of row to open inside of modal box? I need to have an edit within my table. I have below my table with my php mysql records. But how I can pass the id? Any help will appreciate !
<table width="70%" border="0" cellpadding="0" cellspacing="0" class="table-list">
<tr>
<th width="40%">Item</th>
<th width="20%">Category Code</th>
<th width="20%">Item Code</th>
<th width="20%">Edit</th>
<th width="20%">Delete</th>
</tr>
<?php
$res = $mysqli1->query("select * from code order by item_code ASC");
while($r = $res->fetch_assoc()){
echo "<tr>
<td>".$r['item']."</td>
<td>".$r['cat_code']."</td>
<td>".$r['item_code']."</td>
<td><a href='item_edit.php?id=".$r['id']."'</a></td>
<td><a href='#' id='".$r['id']."' class='del'>Delete</a></td>
</tr>";
}
?>
<div class="entry-form">
<form name="userinfo" id="userinfo">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" align="right">Close</td>
</tr>
<tr>
<td>Item</td>
<td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
</tr>
<div>
Javascript
$(document).ready(function(){
$("#add_new, #edit").click(function(){
$(".entry-form").fadeIn("fast");
});
$("#close").click(function(){
$(".entry-form").fadeOut("fast");
});
});
You can try with below idea:
Fetch Value from custom attribute 'data-id'
in jQuery
var someVariable = $("#someElement").data("id");

ajax not returning value

Here is a problem i am having.
Ajax is not willing to return me any values and display it in a message box
Here is my register.php
<?php
//register.php
$username = $_POST['txtusername'];
$response= array();
$response[]= $_POST['txtusername'];
$response[]= $_POST['txtusername'];
echo json_encode($response);
?>
My form is as follows
<div id="divregister">
<div id="display"></div>
<table>
<tr>
<td colspan="3" style='text-align: center;font-weight: bold;'>Register</td>
</tr>
<tr>
<td style='text-align: right;'>First Name</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtfirstname'])) {echo $_POST['txtfirstname'];} ?>" type="text" name="txtfirstname" id ="txtfirstname" ></td>
<td class="registererrordisplay" id="registererrorfirstname"></td>
</tr>
<tr>
<td style='text-align: right;'>Last Name</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtlastname'])) echo $_POST['txtlastname']; ?>" type="text" name="txtlastname" id="txtlastname"></td>
<td class="registererrordisplay" id="registererrorlastname"></td>
</tr>
<tr>
<td style='text-align: right;'>E-Mail Address</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtemail'])) echo $_POST['txtemail']; ?>" type="text" name="txtemail" id="txtemail"></td>
<td class="registererrordisplay" id="registererroremail"></td>
</tr>
<tr>
<td style='text-align: right;'>Username</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtusername'])) echo $_POST['txtusername']; ?>" type="text" name="txtusername" id ="txtusername"></td>
<td class="registererrordisplay" id="registererrorusername"></td>
</tr>
<tr>
<td style='text-align: right;'>Password</td>
<td class="registererrordisplay"><input type="password" name="txtpassword" id="txtpassword"></td>
<td id="registererrorpassword"></td>
</tr>
<tr>
<td style='text-align: right;'>Confirm</td>
<td class="registerinputfieldscolumn">
<input type="password" name="txtconfirmpassword" id="txtconfirmpassword"></td>
<td></td>
</tr>
<tr>
<td id ="registerdisplay" style='text-align: right;font-size: 12px;color:red;'>dfghjkl</td>
<td style='text-align: right;'>
<input type='button' id ="btnregister" style='width: 60px;height:25px;margin-right:75px;' value="Register"></td>
<td></td>
</tr>
</table>
</div>
Here is the ajax script is as follows.
Am not getting any response in the alert box.
Any help from you guy is greatly appreciated.
<script>
$(document).ready(function(){
$("#btnregister").click(function(){
$.ajax({
type: 'POST',
url: 'register.php',
dataType: 'text',
success: function(data) {alert(data);},
data: {"txtusername": $("#txtusername").val()}
});
});
});
</script>
data: {txtusername: sample}
Where did you define that 'sample' variable? It seems that it doesn't exist so you actually send no value. Then nothing is returned, because there's no data to create response.

Categories