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
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.
///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>
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 :
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");
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.