HTML/PHP Form:
<form method="post" action="" enctype="multipart/form-data">
<?php
$sql=mysqli_query($conn,"SELECT * FROM sales");
while($rs=mysqli_fetch_array($sql)){ ?>
Invoice No:
<input type="text" placeholder="Invoice No" class="form-control" id="price_<?php echo $rs['primary_id']; ?>" value="<?php echo $rs['field_name']; ?>" style="width: 180px;" onchange="changevalue(this.id,this.value)">
<br><br>
<?php } ?>
</form>
JavaScript:
<script type="text/javascript">
function changevalue(file_id,userval)
{
var res = file_id.split("_");
var files_id=res[1];
$.ajax
({
type: "POST",
url: "ajaxfile.php",
data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
cache: false,
success: function(response)
{ alert("Updated Successfully"); }
});
}
</script>
ajaxfile.php:
<?php
include("config.php");
$files_id=$_REQUEST['files_id'];
$user_val=$_REQUEST['getval'];
$type=$_REQUEST['val'];
if($type == '1')
{
mysqli_query($conn,"Update Query Goes Here...");
}
?>
Combined Code:
<?php
include("config.php");
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
function changevalue(file_id,userval)
{
var res = file_id.split("_");
var files_id=res[1];
$.ajax
({
type: "POST",
url: "ajaxfile.php",
data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
cache: false,
success: function(response)
{ alert("Updated Successfully"); }
});
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<?php
$sql=mysqli_query($conn,"SELECT * FROM sales");
while($rs=mysqli_fetch_array($sql)){ ?>
Invoice No:
<input type="text" placeholder="Invoice No" class="form-control" id="price_<?php echo $rs['primary_id']; ?>" value="<?php echo $rs['field_name']; ?>" style="width: 180px;" onchange="changevalue(this.id,this.value)">
<br><br>
<?php } ?>
</form>
</body>
</html>
Explanation:
1) In form, id="price_<?php echo $rs['primary_id']; ?>". Instead of 'primary_id' here we have to mention the primary key value from the table which is unique value in table.
2) onchange="changevalue(this.id,this.value)" means it will get the current field id and the value associate with that will pass to JavaScript function.
3) In JavaScript, data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
Here if you saw statically I mentioned val=1, this value will go to AJAX file. This will help us to write more AJAX function in one page only.
Eg:
<script type="text/javascript">
function changevalue(file_id,userval)
{
...
url: "ajaxfile.php",
data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
....
}
function two(file_id2,userval2)
{
...
url: "ajaxfile.php",
data: "files_id="+ files_id2 +"&val=2"+"&getval="+userval2,
....
}
</script>
4) In AJAX file, we are getting all the values we posted from the php file. In AJAX I am getting the static value as $type=$_REQUEST['val']; using the $type we can write more insert/update in AJAX file.
Eg:
if($type == '1')
{
mysqli_query($conn,"Insert Query Goes Here...");
}
if($type == '2')
{
mysqli_query($conn,"Update Query Goes Here...");
}
.
.
.
.
<form method="post" action="" enctype="multipart/form-data">
<?php
$sql=mysqli_query($conn,"SELECT * FROM sales");
while($rs=mysqli_fetch_array($sql)){ ?>
Invoice No:
<input type="text" placeholder="Invoice No" class="form-control" id="price_<?php echo $rs['primary_id']; ?>" value="<?php echo $rs['field_name']; ?>" style="width: 180px;" onchange="changevalue(this.id,this.value)">
<br><br>
<?php } ?>
</form>
JavaScript:
<script type="text/javascript">
function changevalue(file_id,userval)
{
var res = file_id.split("_");
var files_id=res[1];
$.ajax
({
type: "POST",
url: "ajaxfile.php",
data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
cache: false,
success: function(response)
{ alert("Updated Successfully"); }
});
}
</script>
ajaxfile.php:
<?php
include("config.php");
$files_id=$_REQUEST['files_id'];
$user_val=$_REQUEST['getval'];
$type=$_REQUEST['val'];
if($type == '1')
{
mysqli_query($conn,"Update Query Goes Here...");
}
?>
Combined Code:
<?php
include("config.php");
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
function changevalue(file_id,userval)
{
var res = file_id.split("_");
var files_id=res[1];
$.ajax
({
type: "POST",
url: "ajaxfile.php",
data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
cache: false,
success: function(response)
{ alert("Updated Successfully"); }
});
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<?php
$sql=mysqli_query($conn,"SELECT * FROM sales");
while($rs=mysqli_fetch_array($sql)){ ?>
Invoice No:
<input type="text" placeholder="Invoice No" class="form-control" id="price_<?php echo $rs['primary_id']; ?>" value="<?php echo $rs['field_name']; ?>" style="width: 180px;" onchange="changevalue(this.id,this.value)">
<br><br>
<?php } ?>
</form>
</body>
</html>
Explanation:
1) In form, id="price_<?php echo $rs['primary_id']; ?>". Instead of 'primary_id' here we have to mention the primary key value from the table which is unique value in table.
2) onchange="changevalue(this.id,this.value)" means it will get the current field id and the value associate with that will pass to JavaScript function.
3) In JavaScript, data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
Here if you saw statically I mentioned val=1, this value will go to AJAX file. This will help us to write more AJAX function in one page only.
Eg:
<script type="text/javascript">
function changevalue(file_id,userval)
{
...
url: "ajaxfile.php",
data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
....
}
function two(file_id2,userval2)
{
...
url: "ajaxfile.php",
data: "files_id="+ files_id2 +"&val=2"+"&getval="+userval2,
....
}
</script>
4) In AJAX file, we are getting all the values we posted from the php file. In AJAX I am getting the static value as $type=$_REQUEST['val']; using the $type we can write more insert/update in AJAX file.
Eg:
if($type == '1')
{
mysqli_query($conn,"Insert Query Goes Here...");
}
if($type == '2')
{
mysqli_query($conn,"Update Query Goes Here...");
}
.
.
.
.
No comments:
Post a Comment