i can not use this keypad plugin on multiple fields. The first one works perfect but the other ones do not work. what do i need to do to make it work on all?
<script type="text/javascript">
$(function () {
$('#item_fee').keypad();
});
</script>
</head>
<body>
<tr>
<?
$query="SELECT * FROM item WHERE orderr_reference ='$ref' order by item_name";
$result=mysql_query($query);
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
$item_fee = mysql_result($result,$i,"item_fee");
?>
<td><input name="item_fee[]" id="item_fee" type="text" value="<?=$item_fee;?>" size="6" /></td>
</tr>
<? $i++; } ?>
ID's are unique in any one html page try this:
JS
<script type="text/javascript">
$(function () {
$('.keypad input').keypad();
});
</script>
Make it work for all inputs in another element with the keypad class
HTML
<body>
<table class="keypad">
Also make sure to update your html and remove the duplicate ID's.
id's are supposed to be unique for each html element in a webpage.
so change id="item_fee" to class="item_fee"
like so <td><input name="item_fee[]" class="item_fee" type="text" value="<?=$item_fee;?>" size="6" /></td>
and then you cane write in jquery
$(function () {
$('.item_fee').keypad();
});
Related
Everything is ok in my code but jQuery does not affect the code at all. I have ascss.css and other file that I have include and all of them work but this animation (fadeIn) does not
<head>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$document.ready(function(){//this code does not run
$(".btn").submit(function(){
$(".find").fadeIn(3000);
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="searchFile.php">
<table>
<tr><br>
<td >id :</td>
<td><input name="id" type="text" maxlength="40" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="search" type="submit" value="search" class="btn"/></td>
</tr>
</table>
</form>
<?php
if(isset($_POST['id']) and !empty($_POST['id']) and strlen($_POST['id'])==10)
{
require_once("staticfileread.php");
$s=staticfileread::search($_POST['id']);
echo "<br><br><div class='find'>$s</div>";
}
?>
</body>
</html>
First: $document is undeclared, so you'll throw a reference error.
$document.ready(someFunction) should be $(document).ready(someFunction), or the short hand: $(someFunction).
Second: Submit events fire on forms not submit buttons.
Third: Even if the event handler was called, it is entirely possible that the form would finish submitting and a new page load before the content you were fading in had appeared.
Fourth: You only show $(".find") after the new page has loaded anyway, and it appears to be visible by default so there is nothing for it to fade in from.
$document.ready(function() {
// Should be:
$(document).ready(function() {
When that is said; You can shorten the .ready function down to:
jQuery(function($) {
// Same as $(document).ready(function() {});
});
Also note that you properly want to change:
$(".btn").submit(function() { ...
// Buttons doesn't emit a submit event, but forms do:
$("#form1").submit(function() { ...
There are two problems with your code:
$document should be $(document)
The submit() listener can only be bound to <form> elements. It should be $("#form1").submit().
in your code jquery code need to start like
$(document).ready(function() {
// need to write your code here
});
check it once..
My requirement is fairly simple...I want to drill down on a table row to display more detailed data below. Thanks to several posts here and elsewhere, the jquery API site and various other resources I am sooooo close, but there seems to be one critical element I am missing.
I am able, in a single page to enter a value and submit that value as a variable to my PHP script. And I am able using JQuery to click on a row in a table and have that pop up an alert that displays that data as a variable. But I cannot pass the Jquery variable to my PHP script. I have read so many posts with similar requirements, but none quite like this.
In the code below I want to use the $data variable that I have created when I click on a table row and post that to my PHP script.
Any guidance would be most appreciated. Code below:
Thanks,
Rob
<?php
require("dbconn.php");
?>
<html>
<head>
<title></title>
<table border='1'>
<tr>
<th>user_name</th>
<th>sec_level</th>
</tr>
<tr>
<td><a u_name="test">test</td>
<td>test</td>
</tr>
<tr>
<td><a u_name="goat">goat</td>
<td>goat</td>
</tr>
</table>
<script src="jquery-1.10.2.js"></script>
<script>
$("tr").click(function() {
var $data = ( $(this).find("a").attr("u_name") )
alert( $data );
});
</script>
<form method="post" action="">
<dl>
<dt>Hobby No.
<dd><input id="field_" name="dynfields[]" type="text">
</dl>
<input type="submit" name="submit_val" value="Submit" />
</form>
<?php if (!isset($_POST['submit_val'])) { ?>
<?php } ?>
<body>
<?php
if (isset($_POST['submit_val'])) {
if ($_POST['dynfields']) {
foreach ( $_POST['dynfields'] as $key=>$value ) {
$values = mysql_real_escape_string($value);
}
}
$q = "select * from my_hobbies where hobbies = '$values'";
$r = mysql_query($q);
while ($row=mysql_fetch_array($r,MYSQL_NUM))
{
echo '<br>'.$row[1];
}
mysql_free_result($r);
mysql_close();
}
?>
</body>
</html>
AJAX..
$(function(){
$(":submit").click(function(){
$.ajax({
type:"POST",
url:"Ajax.php",
data:"WebName="+$("#WebName").val(),
success:function(data){
//...
}
});
});
});
I am trying to create a popup page from a parent page, which will return a value to the parent page and will close eventually.
What I have done so far:
main.php:
<tr>
<th>Project Name</th>
<td><input type="text" name="project_name" id="pid" disabled="disabled" />
<input type="button" name="choice" onClick="selectValue('id')" value="?"></td>
</tr>
<head>
<script type="text/javascript">
function selectValue(pid){
// open popup window and pass field id
window.open('search_project.php?id=' + encodeURIComponent(pid),'popuppage',
'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
function updateValue(pid, value){
// this gets called from the popup window and updates the field with a new value
document.getElementById(pid).value = value;
}
</script>
</head>
search_project.php:
<head>
<script>
function closeWin(){
myWindow.close();
}
</script>
<script type="text/javascript">
function sendValue(value)
{
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, value);
window.close();
}
</script>
<?php
$sql = mysql_query("SELECT project_id from prjct where project_id like 'default'");
$num = mysql_num_rows($sql);
<tr>
<td><input type="button" value="Select" onClick="sendValue('<?php echo $sql['project_id']; ?>')" /></td>
<td align="center"><? echo $sql['project_id']; ?></td>
</tr>
So, it is supposed to close the popup(search_project.php) and return the value of project_id in the input field of main.php. But, nothing is happening when I'm clicking on the select button. The popup doesn't close and the value is not returned. Seems sendValue(value) is not working.
Need help.
Do you really want encodeURIComponent(pid) here?
Try without encodeURIComponent:
window.open('search_project.php?id=pid','popuppage',
'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
I am building an invoice system, where I will use jQuery, to update fields.
I was thinking to pull the price, and description for the number (if available), and put them into the textfields, thus making it easy to change, if there should be some 'at-the-counter' adjustments to the invoice.
The html code looks like this:
<table>
<tr class="item-row">
<td class="partNumber"><input type="text" name="partNo"></input></td>
<td class="description"><input type="text" name="description"></input></td>
<td class="price"><input type="text" name="price"></input></td>
</tr>
</table>
The jQuery code, which is the part I am not so familiar with, looks like this:
$(document).ready(function() {
$(".partNo").keyup(getInfo);
});
function getInfo(){
var row = $(this).parents('.item-row');
var partNo = row.find(".partNo").val();
row.find(".description input")
.load("script.php", {vorunr: $(".partNo").val(), type: "desc"});
row.find(".price input")
.load("script.php", {vorunr: $(".partNo").val(), type: "price"});
}
This code works fine, the file script.php returns the values from the database.
My problem is that, all my table rows are updated, when I edit the first partNumber input field.
Can someone help me out?
you are using the selector ".partNo" many times but I see no html dom element with a class of "partNo". I see a input field with the name "partNo".
so bind the keyup event to
$('input[name="partNo"]').keyup(getInfo);
Also, here is my suggested solution for your getInfo function...
function getInfo(){
var row = $(this).parents('.item-row');
var partNo = $(this).val();
row.find(".description input")
.load("script.php", {vorunr: partNo, type: "desc"});
row.find(".price input")
.load("script.php", {vorunr: partNo, type: "price"});
}
Try using .closest() instead of .parents(). Also, you don't have a class named "partNo", just an input under the td with class "partNumber" (maybe try $('.partNumber input').keyup(...);
Also, you may want to look into json_encode and populate the fields with a single query to script.php instead of a couple of loads. You could do:
script.php
<?php
$partNo = $_GET['vorunr'];
// perform query to gather the data and populate $dbrow
header('Content-Type: application/json'); // make sure browser knows what it is
echo json_encode(Array(
'desc' => $dbrow['description'],
'price' => $dbrow['price']
));
?>
then use something like
$('.partNumber input').keyup(function(){
var row = $(this).closest('.item-row');
var partNumber = $(this).val();
$.getJSON('<?php echo $_SERVER['PHP_SELF']; ?>',{vorunr:partNumber},function(data,textStatus,xhr){
$('.description input',row).val(data.desc);
$('.price input',row).val(data.price);
});
});
EDITv2
Here's a sample (Self-sufficient) file you can run and see what I mean.
<?php
// handle the ajax query
if (isset($_GET['vorunr'])) // make sure you validate this variable; I'm not doing so for the sake of demo.
{
header('Content-Type: application/json');
echo json_encode(Array(
'desc' => $_GET['vorunr'],
'price' => sprintf('%0.2f',rand(100,99999)/100)
));
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax Sample</title>
<!-- MAKE SURE YOU DON'T USE THIS REFERENCE IN PRODUCTION -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="Text/javascript">
$(document).ready(function(){
$('.partNumber input').keyup(function(){
var row = $(this).closest('.item-row');
var partNumber = $(this).val();
$.getJSON('<?php echo $_SERVER['PHP_SELF']; ?>',{vorunr:partNumber},function(data,textStatus,xhr){
$('.description input',row).val(data.desc);
$('.price input',row).val(data.price);
});
});
});
</script>
</head>
<body>
<table>
<tr class="item-row">
<td class="partNumber"><input type="text" name="partNo"></input></td>
<td class="description"><input type="text" name="description"></input></td>
<td class="price"><input type="text" name="price"></input></td>
</tr>
<tr class="item-row">
<td class="partNumber"><input type="text" name="partNo"></input></td>
<td class="description"><input type="text" name="description"></input></td>
<td class="price"><input type="text" name="price"></input></td>
</tr>
<tr class="item-row">
<td class="partNumber"><input type="text" name="partNo"></input></td>
<td class="description"><input type="text" name="description"></input></td>
<td class="price"><input type="text" name="price"></input></td>
</tr>
</table>
</body>
</html>
I have working script that the user completes inputs on a form and when they submit the form and the content of the form inputs are entered as a table row.
Is there any way of, I think within the JS to make each row have a unique ID and add a delete button to the last colum of each row so the user can delete an individual row.
Thanks for saving a life!!!!
HTML Form
<form id="my_form" action="table_form.php" method="post">
<div style="width:10%; float:left;">
Quantity<br />
<input name="field_1" type="text" id="field_1" size="3" />
</div>
<div style="width:20%; float:left;">
Part Number<br />
<input type="text" id="field_2" name="field_2" />
</div>
<div style="width:30%; float:left;">
Notes<br />
<input name="field_3" type="text" id="field_3" size="45" />
</div>
<div style="width:20%; float:left;">
Unit Price<br />
<input type="text" id="field_4" name="field_4" />
</div>
<div style="width:20%; float:left;">
<br />
<input type="submit" value="Add Row" />
</div>
</form>
<!--
Here we create our HTML table.
Note the ID of the table. This will be used in our javascript file
Our table only contains a header row. All other content will be added dynamically
--><? $rowid = 1; ?>
<table width="100%" id="my_table">
<tbody id="my_table_body">
<tr>
<th width="5%"><div align="left">Qty</div></th>
<th width="19%"><div align="left">Part Number</div></th>
<th width="46%"><div align="left">Notes</div></th>
<th width="15%"><div align="left">Unit Price</div></th>
<th width="15%"><div align="left">Row Total</div></th>
</tr>
</tbody>
</table>
JS
window.addEvent('domready', function(){
$('my_form').addEvent('submit', function(e){
e.stop();
this.set('send', {
onComplete: function( response ){
var data = JSON.decode(response);
inject_row( $('my_table_body'), data );
}
});
var valid_form = true;
$$('#my_form input').each(function(item){
if( item.value == '' ) valid_form = false;
});
if( valid_form ) {
this.send();
} else {
alert('Fill in all fields');
}
});
var inject_row = function( table_body, data ){
var row_str = '<tr width="100%">';
data.each( function(item, index){
row_str += '<td>'+item+'</td>';
});
row_str += '<td><input type="submit" name="deleterow" id="deleterow" value="Delete" /></td></tr>';
var newRow = htmlToElements( row_str );
newRow.inject( table_body );
}
var htmlToElements = function(str){
return new Element('div', {html: '<table><tbody>' + str + '</tbody></table>'}).getElement('tr');
}
});
PHP
<?php
/**
* If nothing is being posted to this script redirect to
* our HTML page.
*/
if( ! $_POST ){
header('Location: newquote.php');
}
// create an empty array for our results
$results = array();
/**
* Stick the values from _POST into our results array
* while also stripping out any html tags
*
* This is where you would perform any required processing
* of the form data such as server side validation or updating
* a database.
*/
foreach( $_POST as $field ){
$results[] = strip_tags( $field );
}
// Echo our results as a JSON encoded string.
echo json_encode( $results );
?>
I agree with J-P, it sounds like you don't need an unique id here.
Since the question is tagged "jquery" I suggest using the live event binding, e.g.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".deleterow").live("click", function() {
$(this).parents("tr:first").remove();
});
});
function foo(id) {
$("#"+id).append('<tr><td>'+(new Date()).getSeconds()+'</td><td>x</td><button class="deleterow">delete</button></td></tr>');
}
</script>
</head>
<body>
<table id="t1">
<tr><td>a</td><td>A</td><td><button class="deleterow">delete</button></td></tr>
<tr><td>b</td><td>B</td><td><button class="deleterow">delete</button></td></tr>
<tr><td>c</td><td>C</td><td><button class="deleterow">delete</button></td></tr>
</table>
<button onclick="foo('t1')">add</button>
</body>
</html>
The function passed to $(document).ready() is invoked when ...well, as the name states, when the document (dom) is ready.
$(".deleterow").live("click", ... : Whenever a click event occurs on an element with the css class "deleterow" the function passed as second parameter is invoked. In this case
function() {
$(this).parents("tr:first").remove();
}
When the function is invoked the this-context is the element where the event occurred. parents("tr:first") returns the first/"nearest" tr element in the ancestor-axis of the current element. remove() is probably self-explaining...
edit: ok, now that the jquery tag is gone....
http://www.jaycarlson.net/blog/2009/04/06/live-events-in-mootools/ shows a live-event binding for mootools. Using that the "new" solution is quite similar to the jquery script
window.addEvent('domready', function() {
// add an onclick handler for all current and future button elements
// within the table id=t1
$('t1').addLiveEvent('click', 'button', function(e){
// a button in t1 has been clicked, this=button element
// get the "nearest" tr in the parent/ancestor-axis
// and remove it
$(this).getParent("tr").dispose();
});
});
This should be unique enough for this project:
var newDate = new Date;
var id = newDate.getTime();
Then it would just be a matter of adding it the row in your loop and linking it to your delete button.
I always use the php function uniqid(). It generates a unique id based on the time in microseconds. PHP Documentation.
You could loop through your results in PHP and add the result from uniqid() to each result before using json_encode().