I have created the table using jquery to increase the number of rows on click on add row. And the question is that I want to send the table data to database and I don't have any idea how to do that. Please any one can help me. Thank you in advance.
Here is the code that I have used to create the table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<script type="text/javascript">
// Add table row
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#model").val();
var email = $("#imei").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td id= 'name'>" + name + "</td><td id='email'>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
</head>
<body>
<form method="POST">
<input type="text" name="model" id="model" placeholder="Model">
<input type="text" name="imei" id="imei" placeholder="IMEI No.">
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Model</th>
<th>IMEI</th>
</tr>
</thead>
<tbody>
<tr>
<!-- the table will be inserted from jquery -->
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
<button type="button" >Save</button>
</body>
</html>
you must use ajax for this
$(".add-row").click(function(){
var name = $("#model").val();
var email = $("#imei").val();
$.ajax({
method: "POST",
url: "some.php",
data: { nm: name , em: email }
})
.done(function( msg ) {
var markup = "<tr><td><input type='checkbox' name='record'></td><td id= 'name'>" + name + "</td><td id='email'>" + email + "</td></tr>";
$("table tbody").append(markup);
});
});
Related
What to add in my query to restrict users from choosing wrong dates ,
E.G. From March 7 To March 2 , the transaction within march 2-7 does not show up ,but when you change it to march 7 to april 7 it shows all transaction , is
there anything that I can add to restrict users from doing that.
Please help me.
Thank you very much.
This is my sales.php file where the user will choose what date to show.
<form action="total_sales.php" method="post">
From: <input type="text" class="datepicker" placeholder="E.G.(2018-01-14)" name="dayfrom" required pattern="[0-9]{4}+[0-9]+[0-9]"> To: <input type="text" class="datepicker" placeholder="E.G.(2018-02-11)" name="dayto" required pattern="[0-9]{4}+[0-9]+[0-9]">
<input type="submit" value="Show Sales" name="salesbtn" ></form></center>
This is my total_sales.php file.
<head>
<script>
$(function() {
$( "#tabs" ).tabs();
$('a[rel*=facebox]').facebox();
$( ".datepicker" ).datepicker();
});
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#searchme").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#searchTbl tbody>tr").hide();
$("#searchTbl td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#searchTbl tbody>tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
</script>
<script>
function goBack() {
window.history.back();
}
</script>
<?php include('session.php'); ?>
<?php include('header.php'); ?>
<?php include('navbar.php'); ?>
<style>
.footer1 {
position: absolute;
right: 45%;
font-family: ""Lucida Console", Monaco, monospace";
top: 0%;
width: 80%;
background-color:#F8F8FF;
color: black;
text-align: left;
}
h3{
font-size:20px;
font-family: "Arial";
}
table {
width:60%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
#media print {
#page { margin: 0; }
body { margin: 1cm; }
#printPageButton {
display: none;
}
#e{
display:none;
}
.footer {
position: fixed;
left: 0;
font-family: ""Lucida Console", Monaco, monospace";
bottom: 0;
width: 100%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
}
</style>
<div style="height:30px;"></div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-0">
<br><img src="../upload/logo.jpg" align="center" class="footer1" style="height:50px; width:50px;"><br>
<br>
<?php
if(isset($_POST['salesbtn'])) {
$from = date('Y-m-d', strtotime($_POST['dayfrom']))." 00:00:01";
$to = date('Y-m-d', strtotime($_POST['dayto']))." 23:59:59";
?>
<center><h1> Product Sales Report </h1><h3>From (<?php echo $from; ?>) To (<?php echo $to; ?>)</h3>
<button id="printPageButton" onClick="window.print();" class="btn btn-primary" button type="submit">Print</button>
<button id="e" class="btn btn-primary" onclick="goBack()">Back</button>
<br><br>
<table width="100%" cellspacing="0" cellpadding="0" style="font-family:Arial Narrow, Arial,sans-serif; font-size:15px;" border="1">
<tr>
<td width="30%"><div align="center"><strong>Purchase Date</strong></div></td>
<td width="30%"><div align="center"><strong>Customer</strong></div></td>
<td width="40%"><div align="center"><strong> Purchase Name</strong></div></td>
<td width="40%"><div align="center"><strong>Quantity</strong></div></td>
</tr>
<?php
try {
require ("conn.php");
$stmt1 = $conn->prepare("select * from sales_detail left join product on product.productid=sales_detail.productid left join sales on sales.salesid=sales_detail.salesid left join customer on sales.userid=customer.userid where product.supplierid='".$_SESSION['id'] ."' AND sales_date BETWEEN '$from' AND '$to' order by sales.sales_date desc");
$stmt1->execute();
while($row=$stmt1->fetch(PDO::FETCH_ASSOC)) {
$sales_date = $row['sales_date'];
$customer_name = $row['customer_name'];
$product_name = $row['product_name'];
$sales_qty = $row['sales_qty'];
?>
<tr align="center">
<td><?php echo $sales_date; ?></td>
<td><?php echo $customer_name; ?></td>
<td><?php echo $product_name; ?></td>
<td><?php echo $sales_qty; ?></td>
</tr>
</center>
<?php
}
}
catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
}
?>
<tr>
</tr>
</table> </br> </br>
</div>
</div>
</div>
<?php include('script.php'); ?>
<?php include('modal.php'); ?>
<?php include('add_modal.php'); ?>
<script src="custom.js"></script>
So, I tried this and it worked:
the scripts HAVE TO BE in that order (if not it will break)
There is some problem with your pattern, but with Datepicker, you don't need it anyway
After the FROM Date selection I would set the minDate of the TO Date to +1d
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<title>Document</title>
</head>
<body>
<form action="total_sales.php" method="post">
From:
<input type="text" class="datepicker" placeholder="E.G.(2018-01-14)" name="dayfrom" required > To:
<input type="text" class="datepicker" placeholder="E.G.(2018-02-11)" name="dayto" required >
<input type="submit" value="Show Sales" name="salesbtn">
</form>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script>
$(function () {
$(".datepicker").datepicker({
dateFormat: "yy-mm-dd",
minDate: "-1d",
maxDate: "+1w"
});
});
</script>
</body>
</html>
I have this code here and I cannot figure out what Im doing wrong.
http://jsfiddle.net/m9hT6/
I cannot make "remove" link working and more importantly when I send it with "post" to another
page to process with php, I cannot capture data into variable from consecutive forms Im creating.
<html>
<head>
<style media="screen" type="text/css">
* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript">
</script>
</head>
<body>
<script>
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<label for="ticketCantidad"><input type="text" id="ticketCantidad" size="20" name="ticketCantidad' + i + '" value="" placeholder="Valor de Tickets" /></label> Remove').appendTo(scntDiv);
i++;
$('<label for="ticketValue"><input type="text" id="ticketValue" size="20" name="ticketValue' + i + '" value="" placeholder="Cantidad de Tickets" /></label> Remove<p></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
<form action="testProces.php" method="POST" name="testForm">
<h1>Ticket Restaurante</h1>
<h2>Otro formulario</h2>
<div id="p_scents">
<p>
</p>
</div>
<h1>Cheque Gourmet</h1>
<input name="submit" type="submit">
</form>
</body>
</html>
As far as the remove link,
$('#remScnt').live('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
a couple of issues.
One, jquery has no function .parents() - elements only have one parent each, so its parent.
Next, you can only have one element of a given ID on a page. You've given several items an ID of 'remScnt'. Change it to a class.
Next, you don't need the 'p' in the parent() call.
Try
$(this).parent().remove();
I have a php page that uses a jQuery to confirm before deleting data, Infact when I click delete it doesnt do anything the link doesnt do anything, I tried my efforts still nothing happens, please assist me
my code
teacher.php
<?php
require_once('../auth.php');
?>
<html>
<head>
<title>Silay Institute</title>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen" />
<!--sa poip up-->
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
<link rel="stylesheet" href="febe/style.css" type="text/css" media="screen" charset="utf-8">
<script src="argiepolicarpio.js" type="text/javascript" charset="utf-8"></script>
<script src="js/application.js" type="text/javascript" charset="utf-8"></script>
<style>
#mainhhh {
background: none repeat scroll 0 0 #FFFFFF;
border: 8px solid #EEEEEE;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 10px #4E707C;
font: 11px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
margin: 5em auto;
position: relative;
text-align: left;
width: 1000px;
}
#mainhhh h1 {
background: none repeat scroll 0 0 #0092C8;
border-bottom: 1px solid #007DAB;
color: #FFFFFF;
font-size: 14px;
margin: 0;
padding: 5px 10px;
text-shadow: 0 1px 0 #007DAB;
}
</style>
</head>
<body>
<div id="mainhhh">
<h1>
<a id="addq" href="index.php" title="click to enter homepage" style="background-image:url('../images/out.png'); background-repeat:no-repeat; padding: 3px 12px 12px; margin-right: 10px;"></a>
<label for="filter">Filter</label> <input type="text" name="filter" value="" id="filter" />
<a rel="facebox" href="addteacher.php" id="addq">Add Teacher</a>
</h1>
<table cellpadding="1" cellspacing="1" id="resultTable">
<thead>
<tr>
<th style="border-left: 1px solid #C1DAD7"> Name </th>
<th>ID Number</th>
<th>Work</th>
<th>Gender</th>
<th>Status</th>
<th>Birthday</th>
<th>Advisory</th>
<th> Action </th>
</tr>
</thead>
<tbody>
<?php
include('../connect.php');
$result = mysql_query("SELECT * FROM teacher");
while($row = mysql_fetch_array($result))
{
echo '<tr class="record">';
echo '<td style="border-left: 1px solid #C1DAD7">'.$row['fname'].' '.$row['mname'].' '.$row['lname'].'</td>';
echo '<td><div align="left">'.$row['idnumber'].'</div></td>';
echo '<td><div align="left">'.$row['work'].'</div></td>';
echo '<td><div align="left">'.$row['gender'].'</div></td>';
echo '<td><div align="left">'.$row['status'].'</div></td>';
echo '<td><div align="left">'.$row['bday'].'</div></td>';
echo '<td><div align="left">';
$sdsd=$row['idnumber'];
$results = mysql_query("SELECT * FROM `teacher` JOIN `advisory` ON `advisory`.`tid`=`teacher`.`idnumber`");
while($rows = mysql_fetch_array($results))
{
echo $rows['level'].' section '.$rows['section'];
}
echo '</div></td>';
echo '<td><div align="center"><a rel="facebox" href="editprofile.php?id='.$row['id'].'" title="Click To Edit">Edit Profile</a> | delete</div></td>';
echo '</tr>';
}
?>
</tbody>
</table>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delbutton").click(function(){
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = {'id': del_id};
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "GET",
url: "deleteteacher.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
</body>
</html>
deleteteacher.php
<?php
// This is a sample code in case you wish to check the username from a mysql db table
include('../connect.php');
if($_GET['id'])
{
$id = intval($_GET['id']);
$sql = "delete from teacher where id='$id'";
mysql_query( $sql);
}
?>
As I remember, you should send a JSON object as data; its means you should make a dictionary, not just an assignment. When you write $_GET['id'] compiler searches for an element in the data dictionary with key "id" to returns its value; but since you don't send a dictionary structured data, it returns NULL and of course nothing will happen.
You should write something like this in your delete function:
var info = {'id': del_id};
I have a page where as the user can create dynamic textboxs that are resizable and draggable using jquery on the click of a button.
I want to pass the data in the textboxes plus the height width and position of them on the page from javascript to php.
I am at a bit of a block on this any help appreciated.
heres my code
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<?
if($_SERVER['REQUEST_METHOD'] == "POST") {
$posted=$_POST['textarea'];
echo "posted=".$new_post."<br>";
}
?>
<head>
<style>
body{background-color:#ccc;}
.dragbox{position:absolute;top:20px;width:320px; height:0;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:1;display: block; }
.textarea1{ width: 300px; height: 300px; padding: 0.5em;}
#handle{
display: block;
height: 16px;
width: 100px;
background-color: red;
position: relative;
top:10px;
font-size:10px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div.php" method="post">
<script>
var i=0;
var p=75;
function creatediv1(id) {
id=id+i;
var xp=xp+i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('contenteditable','true');
newdiv.style.position = "relative";
newdiv.style.top = p;
newdiv.style.cursor='move';
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i+"]' class='textarea1' width='300' style='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
document.body.appendChild(newdiv);
$(function() {
$( "#"+id ).draggable({
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
alert("left="+Stoppos.left+"top="+Stoppos.top);
}
});
$("#"+i).resizable({
stop: function(event, ui) {
var width = ui.size.width;
var height = ui.size.height;
alert("width="+width+"height="+height);
}
});
$("#"+i).draggable({handle:"#handle"});
});
i++;
p=p+25;
}
</script>
<input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />
<input type="submit" value="Submit" >
</form>
</body>
</html>
From the above discussion I understand that you are facing problem in getting the dynamically added Textboxes data in PHP, what I can suggest try using
<?php
print_r($_POST["textarea"]); //just for debugging
foreach ($_POST["textarea"] as $text_area) {
//do what you want with $text_area
}
?>
EDIT
from java script change
....
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea[]' class='textarea1' width='300' style='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
and then try above php code.
EDIT 1
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<?
if($_SERVER['REQUEST_METHOD'] == "POST") {
$posted=$_POST['textarea'];
echo "posted=".$new_post."<br>";
}
?>
<head>
<style>
body{background-color:#ccc;}
.dragbox{position:absolute;top:20px;width:320px; height:0;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:1;display: block; }
.textarea1{ width: 300px; height: 300px; padding: 0.5em;}
#handle{
display: block;
height: 16px;
width: 100px;
background-color: red;
position: relative;
top:10px;
font-size:10px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div.php" method="post">
<script>
var i=0;
var p=75;
function creatediv1(id)
{
id=id+i;
var xp=xp+i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('contenteditable','true');
newdiv.style.position = "relative";
newdiv.style.top = p;
newdiv.style.cursor='move';
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea[]' class='textarea1' width='300' style='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
//Updated this line
document.getElementById("frmMain").appendChild(newdiv);
$(function()
{
$( "#"+id ).draggable(
{
stop: function(event, ui)
{
var Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
$('.textarea1').append("left="+Stoppos.left+"top="+Stoppos.top);
}
});
$("#"+i).resizable(
{
stop: function(event, ui)
{
var width = ui.size.width;
var height = ui.size.height;
$('.textarea1').append("width="+width+"height="+height);
}
});
$("#"+i).draggable({handle:"#handle"});
});
i++;
p=p+25;
}
</script>
<input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />
<input type="submit" value="Submit" >
</form>
</body>
</html>
In this $( "#"+id ).draggable({ code you will get undefined id error because var id is not in Global scope.
and second you will never get value of id if you set it in Global because creatediv1 function set ID value but it will execute when html is fully loaded where as document.ready code will execute when html gets loaded so ID value will always comes up with error,
Try
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<?
if($_SERVER['REQUEST_METHOD'] == "POST") {
$posted=$_POST['textarea'];
echo "posted=".$new_post."<br>";
}
?>
<head>
<style>
body{background-color:#ccc;}
.dragbox{position:absolute;top:20px;width:320px; height:0;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:1;display: block; }
.textarea1{ width: 300px; height: 300px; padding: 0.5em;}
#handle{
display: block;
height: 16px;
width: 100px;
background-color: red;
position: relative;
top:10px;
font-size:10px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div.php" method="post">
<script>
var i=0;
var p=75;
function creatediv1(id)
{
id=id+i;
var xp=xp+i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('contenteditable','true');
newdiv.style.position = "relative";
newdiv.style.top = p;
newdiv.style.cursor='move';
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i+"]' class='textarea1' width='300' style='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
document.body.appendChild(newdiv);
$(function()
{
$( "#"+id ).draggable(
{
stop: function(event, ui)
{
var Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
$('.textarea1').append("left="+Stoppos.left+"top="+Stoppos.top);
}
});
$("#"+i).resizable(
{
stop: function(event, ui)
{
var width = ui.size.width;
var height = ui.size.height;
$('.textarea1').append("width="+width+"height="+height);
}
});
$("#"+i).draggable({handle:"#handle"});
});
i++;
p=p+25;
}
</script>
<input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />
<input type="submit" value="Submit" >
</form>
</body>
</html>
try this :
name='textarea[]'
<?php
echo "<pre>";
print_r($_POST["textarea"]); //just for debugging
echo "<pre>";
for($i=0; $i<count($_POST["textarea"]);$i++) {
//$_POST["textarea"][i] ...
}
?>
I want to pass selected value on invoice.php file using jQuery. After sending value on invoice.php file. I want to show invoice.php file echo result on index.php page selected input box. Like an example: If anyone select Item then rate show on rate input box. Here is my code and image
index.php file code:
<html>
<head>
<title>Invoice</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".item").change(function(){
calculate();
});
});
function calculate() {
var item = [];
$(".item").each(function() {
var num=(this.value);
item.push(num);
});
$('input[name=rate]').each(function(i){
$.get(
'/invoice_final_2.php',
{'product':item[i]},
function(data) {
$(this).html(data);
});
});
}
</script>
<style type="text/css">
table
{
border: 1px solid black;
border-bottom: none;
width: 300px;
}
td
{
border-left: 1px solid black;
border-bottom: 1px solid black;
padding:5px 5px 5px 5px;
}
#first
{
border-left: none;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<form method='post' name='form1' action='welcome.php'>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="first">Item</td>
<td>Rate</td>
</tr>
<?php
$num=4;
for ($i=0; $i<$num; $i++)
{
echo "
<tr>
<td id='first'>
<select class='item' name='item'>
<option>Select one</option>
<option>Deluxe Plan</option>
<option>Premium Plan</option>
<option>Standard Plan</option>
<option>Economy Plan</option>
</select>
</td>
<td><input class='rate' type='text' name='rate'/></td>
</tr>";
}
?>
</table>
</form>
</body>
</html>
invoice.php file code:
<?php
include "dbconnect.php";
$product=$_GET['product'];
$query="select * from item where item_name='$product'";
$result=mysql_query or die (mysql_error());
$row=mysql_fetch_assoc($result);
$rate=$row['rate'];
echo "$rate";
?>
I'm not sure what you are trying to achieve, but you don't need to use each and send values one by one using indexes, you can send the array once.
function calculate() {
var items = $(".item").map(function() {
return this.value;
}).get();
$.get('/invoice_final_2.php',
{'product': items },
function(data) {
//
}
);
}