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) {
//
}
);
}
Related
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);
});
});
The main aim is to display the row when the master row is clicked, there will be multiple records for one single incident id. how to apply jquery function for this type of output. Helps appreciated.
I tried using jexpand function but its not working.
The main aim is to get output like, when one particular row is clicked the remaining set of row with same id should be expanded and vice-versa.
The table results are fetched from mysql database.
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#childALL { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#report tr:siblings").show();
$("#report tr:siblings").hide();
$("#report div.arrow").click(function(){
$(this).next("#childALL").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
</head>
<body>
<center>
<img src="abc.jpg" width="400px" height="100px" />
</center>
<?php
$con= mysqli_connect("172.28.212.145", "root", "root", "xxx");
if(!$con)
{
die('not connected');
}
$con= mysqli_query($con, "Select Incident_id,name,qualification from masterdata;");
?>
<div>
<center>
<table id="report">
<tr>
<th>Incident Id</th>
<th>name</th>
<th>Qualification</th>
<th></th>
</tr>
<?php
$incident = null;
while($row = mysqli_fetch_array($con))
{
if( $row['Incident_id'] != $incident )
{
$incident = $row['Incident_id'];
?>
<tr>
<td>
<?php echo $row['Incident_id']; ?>
</td>
<td>
<?php echo $row['name']; ?>
</td>
<td>
<?php echo $row['JournalUdpdateChanges']; ?>
</td>
<td><div class="arrow"></div></td>
</tr>
<?php } else { ?>
<tr id="childALL">
<td >
<?php echo $row['Incident_id']; ?>
</td>
<td >
<?php echo $row['name']; ?>
</td>
<td >
<?php echo $row['qualification']; ?>
</td>
<td >
<?php echo $row['Priority_im']; ?>
</td>
</tr>
<?php
}
}
?>
</table>
</center>
</div>
</body>
</html>
Bootstrap makes really easy work out of this.
Bootstrap Accordion
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 am having a bit of trouble getting a search function working using ajax to bring up results as the user types in a name.
This is the site in question (you can click view all to see what is searchable)
http://ra-yon.com/beta/Test_sites/HFE/admin/contact.php
The query in action
http://ra-yon.com/beta/Test_sites/HFE/include/queryc.php?query=ra-yon&clause=email
The code in question
<html>
<head>
<style type="text/css">
body
{
background:black;
color:black;
width:100%;
}
#center
{
width:90%;
height:110%;
background:white;
margin:0 auto;
text-align:center;
color:black;
}
#insert{
background:navy; color:white; font-family:impact; font-size:18px;width:170px; height:170px; border-radius:50%;
margin:0 auto;
float: left; margin-left: 100px;
top:200px;
position: relative;
}
#insert:hover
{
background:white;
color:navy;
}
label
{width:150px;}
td
{
border:solid 2px black;
max-width: 250px;
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function sendPHP(){
$('#table,#table2').css('display','none');
var query = $('#searchname').attr('value');
var clause = $('#searchclause').attr('value');
$.ajax({
url: '../include/queryc.php?,
type: 'POST',
data: "query="+query+"&clause="+clause,
dataType: 'html',
success:
function(data) {
$(data).appendTo('#table');
}
});
return false;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head>
<body>
<h4 style="float:right; color:blue; position: relative; left:-100px;" id="goback"> Go back? </h4>
<div id="center">
<div id="queryform1" >
View All?
<span style="color:black;">search</span> <input type='text' onKeyUp="sendPHP();" name='searchname' id="searchname" />
<span style="color:black;">search by</span> <select name="searchclause" id="searchclause">
<option value="name">Name</option>
<option value="email">Email Address</option>
<option value="subject">Subject</option>
<option value="date">Date</option>
</select>
Download file?
<div id="table2" style="display: none; margin: 0 auto; position: relative; top:40px; max-width:700px;">
<div id="viewall">
<?php
include '../include/include.php';
$sql = 'select * from contactus' ;
//print_r($sql);
$result=mysql_query($sql);
?>
<table>
<tbody>
<th>Name</th><th>Email</th><th>Subject</th><th style="width:200px;">Message</th><th>Date</th>
<tr>
<?php
while ($client = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "
<tr>
<td >".$client[name]."</td>
<td >".$client[email]."</td>
<td >".$client[subject]."</td>
<td >".$client[message]."</td>
<td >".$client[date]."</td>
</tr>";
} ?>
</tbody></table>
</div></div><div id="table">TestTestTest</div>
</div></div>
</body>
</html>
Its a bit messy right now, I am planning on cleaning it up after I get it working.
Thank you all so much!
Checked your code in Console. Your function is failing. You are missing a single quote here:
url: '../include/queryc.php?',
I use Google Chrome's Console as well as the Console found in the Firbug extension for Mozilla Firefox. They both are invaluable in helping sort out the minor issues
Following is my code:
<table border="0" align="center" cellpadding="0" cellspacing="0" class="grid_table">
<tr class="grid_caption"><td class="grid_caption">Customer Name</td></tr>
<? if(count($arrResult) > 0) { ?>
<? foreach($arrResult as $row) { ?>
<tr class="grid_row" ><td class="grid_row" onClick="javascript:return selectCustomer(this,<?=$row['customer_id']?>);"><?=HTMLVarConv($row['Name'])?></td></tr>
<? } ?>
<? } ?>
</table>
here i got the list of customer
but when i click on this customer name then its background color should be change..
here is my javascript function
function selectCustomer(row, id) {
alert(row);
var mark_color = '#fdf5d2' //'#c1c1ff'
var current_row = '#aad4f0' //'#e8e8e8'
if (row.style.backgroundColor == current_row) {
row.style.backgroundColor = mark_color;
}
else if (row.style.backgroundColor == mark_color) {
row.style.backgroundColor = current_row;
}
$("#editCustomer").attr("src","editcustomer.php?customer_id="+id+"&showmenu=0");
$("#ajaxList").show();
return;
}
but not changing what the problem ????
please help me
Since you tagged "jquery", why not make use of it instead of inline onclick handlers? It can be as simple as: http://jsfiddle.net/t7vj5/.
$("td.grid_row").click(function() {
$(this).toggleClass("selected");
$("#editCustomer").attr("src", "editcustomer.php");
$("#ajaxList").show();
return false;
});
And the CSS:
td.grid_row {
background-color: #fdf5d2;
}
td.grid_row.selected {
background-color: #aad4f0;
}
Just make sure to execute the JavaScript after the rows have been created, or wrap it inside $(document).ready(function() { ... }).
$('.grid_row').click(function(){
$('.grid_row').css("background-color","#aad4f0");
$(this).css("background-color","#fdf5d2");
});
edit: Oh and you can remove the onclick= function
The above lines are sufficient for what you want to do as long as the class gridrow is there.
This will change the color to #fdf5d2 on clicking and change the color back to #aad4f0 for all other cells on clicking on another row.
If you don't want the color to change back, remove the first line
This one is perfect well:
Css::
.grid_row
{
padding: 3px;
border-right: 1px solid #849AAA;
border-bottom: 1px solid #849AAA;
vertical-align:top;
}
.evn
{
padding: 3px;
border-right: 1px solid #849AAA;
border-bottom: 1px solid #849AAA;
vertical-align:top;
background-color: white;
/*document.body.style.cursor = 'wait';*/
cursor: pointer;
}
.selevn
{
padding: 3px;
border-right: 1px solid #849AAA;
border-bottom: 1px solid #849AAA;
vertical-align:top;
background-color: silver;
cursor: pointer;
}
Following is my Javascript code:-
<script type="text/javascript">
var prevRow = null;
function selectCustomer(it,id) {
if (it.className.substring(0, 3) == "sel")
{
it.className = it.className.substring(3, 6);
prevRow = null;
}
else
{
it.className = "sel" + it.className;
if (prevRow != null)
{
prevRow.className = prevRow.className.substring(3, 6);
}
prevRow = it;
}
$("#editCustomer").attr("src","editcustomer.php?customer_id="+id+"&showmenu=0");
$("#ajaxList").show();
return ;
}
THis is my code:
<table border="0" align="center" cellpadding="0" cellspacing="0" class="grid_table">
<tr class="grid_caption"><td class="grid_caption">Customer Name</td></tr>
<? if(count($arrResult) > 0) { ?>
<? foreach($arrResult as $row) { ?>
<tr class="evn" onClick="javascript:return selectCustomer(this,<?=$row['customer_id']?>);" ><td class="grid_row" id="<?= $row['customer_id']?>" ><?=HTMLVarConv($row['Name'])?></td></tr>
<? } ?>
<? } ?>
</table>