I'm new to Jquery or at least the more advanced features of Jquery. I've been trying to figure this out on and off for a few days now and I'm started to get myself flustered.
What I have is page we are using HTML readonly text boxes to display results. The text boxes are being populated by php through an sql search. However, for this example I've preset PHP Variables to get right to the issue.
I'm trying to populate the form fields in the dialog box based on the php variables. I've stripped down my testing code so hopefully its self-explantory. Here's the code for the main page:
<?php
$Test1 = 'Test';
$Test2 = 'TestTest';
$Test3 = 'TestTestTest';
$Test4 = 'TestTestTestTest';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function() {
$('#popout1 a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + '#formTest' )
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 400,
modal: true,
});
$link.click(function() {
$dialog.dialog('open');
$dialog.parent().appendTo($("#formTest"));
return false;
});
});
});
</script>
</head>
<body>
<div id="formTest">
<form name="formTest" id="formTest">
<table>
<th>Test</th>
<tr>
<td><label for="Test1">Test1:</label></td>
<td><input type="text" readonly="readonly" name="Test1" value="<?php echo $Test1?>" /></td>
</tr>
<tr>
<td><label for="Test2">Test2:</label></td>
<td><input type="text" readonly="readonly" name="Test2" value="<?php echo $Test2?>" /></td>
</tr>
<tr>
<td id="popout1">Click here for more data</td>
</tr>
</table>
</form>
</div>
</body>
</html>
And here's the code for the popout page:
<table>
<th>More Tests</th>
<tr>
<td><label for="Test3">Test3:</label></td>
<td><input type="text" readonly name="Test3" value="<?php echo $Test3 ?>" /></td>
</tr>
<tr>
<td><label for="Test4">Test4:</td>
<td><input type="text" readonly name="Test4" value="<?php echo $Test4 ?>" /></td>
</tr>
</table>
My question is how do I populate test3 and test4 text boxes on the popout page withe php variables declared on the main page.
Change the name attribute of your inputs to id.
<table>
<th>More Tests</th>
<tr>
<td><label for="Test3">Test3:</label></td>
<td><input type="text" readonly id="Test3" value="<?php echo $Test3 ?>" /></td>
</tr>
<tr>
<td><label for="Test4">Test4:</td>
<td><input type="text" readonly id="Test4" value="<?php echo $Test4 ?>" /></td>
</tr>
</table>
Then you can find them with jQuery.
$('#Test3').val('the new value');
$('#Test4').val('the other new value');
Edit: You'll need to persist the php values somewhere in the main page so they're available when the popout is displayed.
Related
In the code below I am trying to pass all the marks entered by the user to another page for execution but only the value of the first mark entered in the table is send.Is there a way to send all the values of the marks entered rather than just the first value;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function send(){
var marks=document.getElementById("marks").value;
var xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=function()
{
if(this.readyState==4 &&this.status==200)
{
document.getElementById("result").innerHTML=this.responseText;
}
};
xmlhttp.open('GET','mark.php?marks='+marks,true);
xmlhttp.send();
}
</script>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>marks</td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
</table>
<button onlick="send()" >submit</button>
<div id='result'><p></p><div>
</body>
</html>
If you remove the ID attributes from the number inputs you can obtain a reference to all of them using querySelectorAll with a suitable pattern. Once you have that nodelist reference you can iterate through to find the values and use as you need.
You should be able to process $_GET['marks'] in marks.php quite easily after that..
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
function send(){
var marks=[];
/* Find all the input elements that are considered `marks` and assign their values to an array */
Array.from( document.querySelectorAll('input[type="number"]') ).forEach( input=>{
marks.push( input.value );
});
var xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=function(){
if( this.readyState==4 &&this.status==200 ){
document.getElementById("result").innerHTML=this.responseText;
}
};
/* prepare the array.. could alternatively use JSON format */
xmlhttp.open( 'GET', 'mark.php?marks=[' + marks.join(',')+']' );
xmlhttp.send();
}
/* bind an event listener to the button */
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('button').addEventListener('click',send)
});
</script>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>marks</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
</table>
<button>submit</button>
<div id='result'><p></p><div>
</body>
</html>
Hello I am new to javascript and jquery. I am trying to show the form when I choose "edit", however I cannot make it work. Any help/advise is appreciated.
php code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Manage Categories</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>Manage Categories</h1>
<h3>List of current categories: </h3>
<ul>
<table>
<?php
$counter = 0;
while($category = $categories->fetch_assoc()){
if($category['name'] === "+ New Category"){
continue;
}
?>
<tr>
<td>
<li>
<?php echo $category['name']?>
<a id="link<?php echo $counter ?>" href="manage_categories.php?type=edit&id=<?php echo $category['id'];?>">Edit</a>
Delete
</li>
</td>
</tr>
<div id="edit_form<?php echo $counter ?>">
<form action="manage_categories.php?type=edit&id=<?php echo $category['id'];?>" method="POST">
<tr id="abc">
<td>New category name:</td>
<td><input type="text" name="new_cat" /></td>
<td><input type="submit" name="submit" value="Change" /></td>
</tr>
</form>
</div>
<?php
$counter++;
}
?>
<form action="manage_categories.php?type=add" method="POST">
<tr>
<td>Add New Category</td>
</tr>
<tr>
<td>New category name: </td>
<td><input type="text" name="new_cat" /></td>
<td><input type="submit" name="submit" value="Add" /></td>
</tr>
</form>
</table>
</ul>
Return to journal homepage
</body>
</html>
js file:
$(document).ready(function () {
$("#edit_form1").hide();
$("#link1").on("click", function(){
alert("hello");
if($("#edit_form1").is(":visible")){
$("#edit_form1").hide();
} else {
$("#edit_form1").show();
}
});
$("#link2").on("click", function(){
alert("hello");
$("#edit_form2").hide();
});
});
The alert() function works but I just cannot hide/show the form (it is shown by default). The php script just returns a list of categories that I have in the database.
There is a error in your PHP code. At first fix that bug .
you have used while($category = $categories->fetch_assoc());
Here $categories is undefinded. Because you have not kept object of mysqli in $categories variable. Fix this
i have 2 files testjquery.php and abcd.php
on form submit calling ajax call and submitting it with ajax method. first times it prevents the forms defaultevent using event.preventdefault and loads response data from the other page into the div .
But when again i try to submit it, the event.preventdefault doesnt work on the form.
Please help. Thanks in advance.
// testjquery.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="abc">
<form action="abcd.php" method="post" accept-charset="utf-8" name="cartform">
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th>QTY</th>
<th>Item Description</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<input type="hidden" name="cartrowid[1]" value="d68b70f3503216b22484eef9c786124a" />
<tr>
<td><input type="text" name="cartrowqty[1]" value="1" maxlength="3" size="5" /></td>
<td> micromax_A12112
<p> <strong>Size:</strong> L<br />
<strong>Color:</strong> Red<br />
</p></td>
<td style="text-align:right">123.00</td>
<td style="text-align:right">$123.00</td>
</tr>
<input type="hidden" name="cartrowid[2]" value="e376db925db6430cf3e82c3854b4f5e2" />
<tr>
<td><input type="text" name="cartrowqty[2]" value="1" maxlength="3" size="5" /></td>
<td> Indian_Saree
<p> <strong>Size:</strong> L<br />
<strong>Color:</strong> Red<br />
</p></td>
<td style="text-align:right">2,555.00</td>
<td style="text-align:right">$2,555.00</td>
</tr>
</table>
<p>
<input type="submit" name="add_item_via_ajax_form" value="Update your Cart" class="add_item_via_ajax_form" />
</p>
</form>
Go to W3Schools.com
<p>The preventDefault() method will prevent the link above from following the URL.</p>
</div>
</body>
</html>
<script>
$(function()
{
// Example of adding a item to the cart via a link.
$('.add_item_via_ajax_form').click(function(event)
{
alert(1);
event.preventDefault();
// Get the parent form.
var parent_form = $(this).closest('form');
// Get the url the ajax form data to be submitted to.
var submit_url = parent_form.attr('action');
// Get the form data.
var $form_inputs = parent_form.find(':input');
var form_data = {};
$form_inputs.each(function()
{
form_data[this.name] = $(this).val();
});
$.ajax(
{
url: submit_url,
type: 'POST',
data: form_data,
success:function(data)
{
//alert(data);
event.preventDefault();
ajax_update_mini_cart(data);
}
});
});
// A function to display updated ajax cart data from the mini cart menu.
function ajax_update_mini_cart(data)
{
$('#abc').html(data);
$('#mini_cart_status').show();
// Set the new height of the menu for animation purposes.
var min_cart_height = $('#mini_cart ul:first').height();
$('#mini_cart').attr('data-menu-height', min_cart_height);
$('#mini_cart').attr('class', 'js_nav_dropmenu');
// Scroll to the top of the page.
$('body').animate({'scrollTop':0}, 250, function()
{
// Notify the user that the cart has been updated by showing the mini cart.
$('#mini_cart ul:first').stop().animate({'height':min_cart_height}, 400).delay(3000).animate({'height':'0'}, 400, function()
{
$('#mini_cart_status').hide();
});
});
}
});
</script>
<script>
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
</script>
//abcd.php
<form action="abcd.php" method="post" accept-charset="utf-8" name="cartform">
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th>QTY</th>
<th>Item Description</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<input type="hidden" name="cartrowid[1]" value="d68b70f3503216b22484eef9c786124a" />
<tr>
<td><input type="text" name="cartrowqty[1]" value="1" maxlength="3" size="5" /></td>
<td> micromax_A12112
<p> <strong>Size:</strong> L<br />
<strong>Color:</strong> Red<br />
</p></td>
<td style="text-align:right">123.00</td>
<td style="text-align:right">$123.00</td>
</tr>
<input type="hidden" name="cartrowid[2]" value="e376db925db6430cf3e82c3854b4f5e2" />
<tr>
<td><input type="text" name="cartrowqty[2]" value="1" maxlength="3" size="5" /></td>
<td> Indian_Saree
<p> <strong>Size:</strong> L<br />
<strong>Color:</strong> Red<br />
</p></td>
<td style="text-align:right">2,555.00</td>
<td style="text-align:right">$2,555.00</td>
</tr>
</table>
<p>
<input type="submit" name="add_item_via_ajax_form" value="Update your Cart" class="add_item_via_ajax_form" />
</p>
</form>
Go to W3Schools.com
<p>The preventDefault() method will prevent the link above from following the URL.</p>
The line
$('#abc').html(data);
replaces all content of the div id="abc" with the new html code from the ajax request.
This new content does not have any event handler attached and the form is submitted the 'normal' way. To fix it, you must add a new
$('.add_item_via_ajax_form').click(function(event) {}
in your
function ajax_update_mini_cart(data) {}
after
$('#abc').html(data);
This will add the handler and the form will be submitted via ajax every time.
You should delegate event, e.g:
$('#abc').on('click', '.add_item_via_ajax_form', function(event){
//...
});
See #my question's comment regarding FORM submit instead
I have a set of check boxes on one page and submit button with value="compare" is out of the form. I have written a jQuery for the button compare outside of the form. I am comparing a set of tables side by side. My code works fine in the same Page. I don't know how to display the result in another page. Anyone please help me.
<?php
require('db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comparision</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#compare_id").click( function(){
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
});
});
$(document).ready(function(){
$("#compare_id").click( function(){
$("input:checkbox:(:checked)").each(function(){
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
});
});
</script>
</head>
<body>
<input name="compare" id="compare_id" type="button" value="Compare" />
<form action="test.php" method="post" name="printers_comparision">
<p>
<label>
<input type="checkbox" name="p1" value="Printer1" id="CheckboxGroup1_0" />
Printer1</label>
<label>
<input type="checkbox" name="p2" value="Printer2" id="CheckboxGroup1_1" />
Printer2</label>
<label>
<input type="checkbox" name="p3" value="Printer3" id="CheckboxGroup1_2" />
Printer3</label>
<label>
<input type="checkbox" name="p4" value="Pritner4" id="CheckboxGroup1_3" />
Printer4</label>
<label>
</form>
<table width="1023" border="1">
<tr>
<td width="193"></td>
<td class="p1" width="113"><img src="images/im.png"/></td>
<td class="p2" width="67"><img src="images/im.png"/></td>
<td class="p3" width="67"><img src="images/im.png"/></td>
<td class="p4" width="67"><img src="images/im.png"/></td>
</tr>
<tr>
<td>Title</td>
<td class="p1" >Printer1</td>
<td class="p2" >Printer2</td>
<td class="p3" >Printer3</td>
<td class="p4" >Printer4</td>
</tr>
<tr>
<td>Manufacturer</td>
<td class="p1" ><?php $query=mysql_query('select Manufacturer from printers where printers_id="1";');
while($row=mysql_fetch_array($query)) echo $row['Manufacturer'] ?></td>
<td class="p2" ><?php $query=mysql_query('select Manufacturer from printers where printers_id="2";');
while($row=mysql_fetch_array($query)) echo $row['Manufacturer'] ?></td>
<td class="p3" ><?php $query=mysql_query('select Manufacturer from printers where printers_id="3";');
while($row=mysql_fetch_array($query)) echo $row['Manufacturer'] ?></td>
<td class="p4" ><?php $query=mysql_query('select Manufacturer from printers where printers_id="4";');
while($row=mysql_fetch_array($query)) echo $row['Manufacturer'] ?></td>
</tr>
</body>
</table>
</table>
You can try out using SESSION variables or setting COOKIE in case you need to show data across pages
i have used js to multiply but only 1st row is getting multiplied other rows are nt getting multiplied.
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("form1", $con);
error_reporting(E_ALL ^ E_NOTICE);
$nam=$_REQUEST['select1'];
$row=mysql_query("select * from inv where name='$nam'");
while($row1=mysql_fetch_array($row))
{
$Name=$row1['Name'];
$Address =$row1['Address'];
$City=$row1['City'];
$Pincode=$row1['Pincode'];
$No=$row1['No'];
$Date=$row1['Date'];
$DCNo=$row1['DCNo'];
$DcDate=$row1['DcDate'];
$YourOrderNo=$row1['YourOrderNo'];
$OrderDate=$row1['OrderDate'];
$VendorCode=$row1['VendorCode'];
$SNo=$row1['SNo'];
$descofgoods=$row1['descofgoods'];
$Qty=$row1['Qty'];
$Rate=$row1['Rate'];
$Amount=$row1['Amount'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
**function ram()
{
var q=document.getElementById('qty').value;
var r=document.getElementById('rate').value;
document.getElementById('amt').value=q*r;
}**
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="1315" border="0">
<script type="text/javascript">
function g()
{
form1.submit();
}
</script>
<tr>
<th>Name</th>
<th align="left"><select name="select1" onchange="g();">
<option value="" selected="selected">select</option>
<?php $row=mysql_query("select Name from inv ");
while($row1=mysql_fetch_array($row))
{ ?>
<option value="<?php echo $row1['Name'];?>"><?php echo $row1['Name'];?></option>
<?php } ?>
</select></th>
</tr>
<tr>
<th>Address</th>
<th align="left"><textarea name="Address"><?php echo $Address;?></textarea></th>
</tr>
<tr>
<th>City</th>
<th align="left"><input type="text" name="City" value='<?php echo $City;?>' /></th>
</tr>
<tr>
<th>Pincode</th>
<th align="left"><input type="text" name="Pincode" value='<?php echo $Pincode;?>'></th>
</tr>
<tr>
<th>No</th>
<th align="left"><input type="text" name="No2" value='<?php echo $No;?>' readonly="" /></th>
</tr>
<tr>
<th>Date</th>
<th align="left"><input type="text" name="Date" value='<?php echo $Date;?>' readonly="" /></th>
</tr>
<tr>
<th>DCNo</th>
<th align="left"><input type="text" name="DCNo" value='<?php echo $DCNo;?>' readonly="" /></th>
</tr>
<tr>
<th>DcDate:</th>
<th align="left"><input type="text" name="DcDate" value='<?php echo $DcDate;?>' /></th>
</tr>
<tr>
<th>YourOrderNo</th>
<th align="left"><input type="text" name="YourOrderNo" value='<?php echo $YourOrderNo;?>' readonly="" /></th>
</tr>
<tr>
<th>OrderDate</th>
<th align="left"><input type="text" name="OrderDate" value='<?php echo $OrderDate;?>' readonly="" /></th>
</tr>
<tr>
<th width="80">VendorCode</th>
<th width="1225" align="left"><input type="text" name="VendorCode" value='<?php echo $VendorCode;?>' readonly="" /></th>
</tr>
</table>
<table width="1313" border="0">
<tr>
<td width="44"> </td>
<td width="71">SNO</td>
<td width="527">DESCRIPTION</td>
<td width="214">QUANTITY</td>
<td width="214">RATE/UNIT</td>
<td width="217">AMOUNT</td>
</tr>
<?php $i=1;
$row=mysql_query("select * from inv where Name='$nam'");
while($row1=mysql_fetch_array($row))
{
$descofgoods=$row1['descofgoods'];
$Qty=$row1['Qty'];
$Rate=$row1['Rate'];
$Amount=$row1['Amount'];
?>
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td><input type="text" name="No" value='<?php echo $No;?>' readonly=""/></td>
<td><input type="text" name="descofgoods" value='<?php echo $descofgoods;?>' /></td>
<td><input type="text" name="qty" maxlength="50000000" id="qty"/></td>
<td><input type="text" name="Rate" value='<?php echo $Rate;?>' id="rate" onclick="ram()";></td>
<td><input type="text" name="Amount" id="amt"/></td>
</tr>
<?php $i++;} ?>
<tr>
<th colspan="2">Print</th>
</tr>
</table>
<label></label>
</form>
</body>
</html>
I didn't read all of your code but i think problem is with your tag id it must be unique.
var q=document.getElementById('qty').value;
var r=document.getElementById('rate').value;
document.getElementById('amt').value=q*r;
javascript didn't get the other tag as you have more than one Tag with id 'qty', 'rate', 'amt', so javascript only convert the tag which comes first on the page and only multiple it.
TO AVOID THIS YOU SHOULD MAKE SURE THAT YOUR id FOR EACH TAG MUST BE UNIQUE
EDITED
1] Change your javascript function like something
function ram(id)
{
var q=document.getElementById('qty_'+id).value;
var r=document.getElementById('rate_'+id).value;
document.getElementById('amt_'+id).value=q*r;
}
2] add suffix $i to each tag
<td><input type="text" name="qty" maxlength="50000000" id="qty_<?PHP echo($i) ?>"/></td>
<td><input type="text" name="Rate" value='<?php echo $Rate;?>' id="rate_<?PHP echo($i) ?>" onclick="ram('<?PHP echo($i) ?>')";></td>
<td><input type="text" name="Amount" id="amt_<?PHP echo($i) ?>"/></td>
3] pass argument of the row in onclick function
onclick="ram('<?PHP echo($i) ?>')"
The problem you are having is that you use getElementById for this situation where you have multiple rows. An Id should be unique, so therefor it will only get the "first" match when using getElementById.
Try using parseInt():
document.getElementById('amt').value= parseInt(q) * parseInt(r);