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>
Related
So at the moment I'm trying to add a new tr to a table that I already have, and while doing so, trying to update the rowspan of the previous tr, but I'm not getting it, so I'm not sure how to approach this problem. Here's what I've been trying to do (and what I am trying to achieve):
So here's a picture of the table that I have at the moment:
Now, when I am pressing "Add Row" to "Javier", I get this (which is fine, because I'm adding the new row after the one I already have..For the moment):
If I press "Add Row" to "Palacios", I get this (which is wrong, because I'm trying to get the new row of "Palacios" after the "first" row of "Palacios").
Problem 1
So here is my first issue..I don't know why this is happening! Like my table should look like this if I want to add a new row of "Palacios", and not like in the third image.
Problem 2
As you can see in the fourth image, I have 4 rows (2 of Javier and 2 of Palacios), but what I would like to do is to change the "rowspan" of the first one, so while I'm adding more, I'm increasing the rowspan. For example, if I press "Add row" to "Javier", it should look like this:
And if I add another one, then the rowspan of Javier would be 3, and not 2...But I'm not sure how to approach any of these problems (or what I'm doing wrong in the first one)
Here's the code of that.
function AddRow(row) {
var x = document.getElementById('TablePlayers');
var i = row.parentNode.parentNode.rowIndex;
// // document.getElementById("test").rowSpan += 1;
var new_row = x.rows[i].cloneNode(true);
x.insertBefore(new_row, x.childNodes[i]);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<table id="TablePlayers" border="1">
<thead>
<td>Name</td>
<td>Number</td>
<td>Goals</td>
<td>Add Row</td>
</thead>
<tr>
<td>Javier</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
<tr>
<td>Palacios</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
</table>
</body>
</html>
I would just reference the table row, no need to look up the index. Also you should be doing this from the tbody and not the table.
function AddRow(btn) {
var tbody = document.querySelector('#TablePlayers tbody');
var tr = btn.closest('tr');
var new_row = tr.cloneNode(true);
tbody.insertBefore(new_row, tr);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<table id="TablePlayers" border="1">
<thead>
<td>Name</td>
<td>Number</td>
<td>Goals</td>
<td>Add Row</td>
</thead>
<tr>
<td>Javier</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
<tr>
<td>Palacios</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
</table>
</body>
</html>
And modern browsers you can use before() or after()
function AddRow(btn) {
var tr = btn.closest('tr');
var new_row = tr.cloneNode(true);
tr.after(new_row);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<table id="TablePlayers" border="1">
<thead>
<td>Name</td>
<td>Number</td>
<td>Goals</td>
<td>Add Row</td>
</thead>
<tr>
<td>Javier</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
<tr>
<td>Palacios</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
</table>
</body>
</html>
Utilizing closest is much simpler (great suggestion, #epascarello). So I've taken that and added more onto the code which will expand the rowSpan property to get your desired result.
As you'll see, you want to remove the first cell of the newly-cloned row to make the rowSpan work properly.
Furthermore, to prevent bugs, we want to ensure we only select the MAIN row, which we do through a while loop.
function AddRow(btn) {
var tbody = document.querySelector('#TablePlayers tbody');
var tr = btn.closest('tr');
// Check if the row we're copying has all the cells
// to ensure we expand the correct row.
// IE: If a row only has 3 cells, when we know it doesn't have
// the first cell with `rowSpan`
while (tr.cells.length != 4){
tr = tr.previousSibling;
}
// Expand the rowSpan of the main TR
tr.cells[0].rowSpan+=1;
// Clone the TR and remove its first cell
var new_row = tr.cloneNode(true);
new_row.deleteCell(0);
// Inserts the new row AFTER the current one.
// Since JavaScript doesn't have `insertAfter`, we can
// use this trick to make it work. We're essentially
// inserting the new row BEFORE the NEXT SIBLING
tbody.insertBefore(new_row, tr.nextSibling);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<table id="TablePlayers" border="1">
<thead>
<td>Name</td>
<td>Number</td>
<td>Goals</td>
<td>Add Row</td>
</thead>
<tr>
<td>Javier</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
<tr>
<td>Palacios</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
</table>
</body>
</html>
I'm making a form in which I want to automate some calculations. The form contains a table with some inputs. The Javascript is below the form.
For a reason unknown to me, the calculation won't start or isn't performed correctly.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form>
<fieldset>
<legend>Inkomsten</legend>
<table>
<tr>
<th scope="col"></th>
<th scope="col">Per maand</th>
<th scope="col">Per jaar</th>
<th scope="col">Totale termijn</th>
</tr>
<tr>
<td>Inkomen</td>
<td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td>
<td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td>
<td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td>
</tr>
<tr>
<td>Vakantiegeld</td>
<td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td>
<td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td>
<td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function berekeningInkomenPerJaar() {
var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value);
var inkomenPerJaar = document.getElementById("fldInkomenPerJaar");
inkomenPerJaar.value = inkomenPerMaand * 12;
}
</script>
</body>
</html>
The problem is your function is not being run when the input is changed.
It is possible to use the JS addEventListener function to run your code whenever the input value is changed like so:
var inputElement = document.getElementById("fldInkomenPerMaand");
inputElement.addEventListener("change", berekeningInkomenPerJaar);
Your original code with the event listener added in:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form>
<fieldset>
<legend>Inkomsten</legend>
<table>
<tr>
<th scope="col"></th>
<th scope="col">Per maand</th>
<th scope="col">Per jaar</th>
<th scope="col">Totale termijn</th>
</tr>
<tr>
<td>Inkomen</td>
<td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td>
<td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td>
<td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td>
</tr>
<tr>
<td>Vakantiegeld</td>
<td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td>
<td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td>
<td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function berekeningInkomenPerJaar() {
var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value);
var inkomenPerJaar = document.getElementById("fldInkomenPerJaar");
inkomenPerJaar.value = inkomenPerMaand * 12;
}
var inputElement = document.getElementById("fldInkomenPerMaand");
inputElement.addEventListener("change", berekeningInkomenPerJaar);
</script>
</body>
</html>
I have an HTML file related to a javascript file.
In this javascript file, I have 3 functions which 2 of them will be called onload of the body.
These 2 functions are meant to type a string, each of them in a different textarea.
But, when Testing this, the two strings that are typed by these js functions, are unreadable
To clarify my issue: the string must be like this:
verification step 3 of 4 passed…
enter serial number
when I call the 2 functions onload of the body, it gives me this:
vrfcto f4pse..
ne eilnme..
I can't find the issue in my code.
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<title>Webmaster's Top Secret Directory</title>
<link rel="stylesheet" href="index.css">
<script src="redirector5.js"></script>
</head>
<body background="camouflage.jpg" onload='write()'>
<div align="center">
<img src="header.png" alt="Warning"/>
</div><br><br><br><br><br><br>
<div id="container">
<form name="form1" onsubmit="return myFunction();">
<div><table align="center" class="table">
<tr><td>
<input type="text" class="inputtext2" name="text" value="open sesame" disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="identify yourself...." disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="omar saab" disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="verification step 1 of 4 passed.... enter secret phrase...." disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="i own you terminal. release security now and let me in" disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="verifying.... verification step 2 of 4 passed.... enter your purpose of entrance...." disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="manage personal files" disabled /></td>
</tr>
<tr>
<td><textarea class="inputtext2222" id='screen' disabled></textarea></td>
</tr>
<tr>
<td><textarea class="inputtext2222" id='screen2' disabled></textarea></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" id="myTextarea" autofocus spellcheck="false" /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
</table>
</div>
<input
type="submit"
name="submit">
</form>
</div>
</body>
</html>
JAVASCRIPT CODE
function myFunction() {
var x = document.getElementById("myTextarea").value;
if (x === "tango-whisky-70433863") {
document.location.href = "index6.html";
return false;
}
else {
alert('Command not found.\nYou are not supposed to be here.\nGet out now !');
return false;
}
}
function write(){
type();
type2();
}
var index = 0;
var text = 'verification 3 of 4 passed...';
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',80);
}
var index = 0;
var text2 = 'enter serial number....';
function type2()
{
document.getElementById('screen2').innerHTML += text2.charAt(index);
index += 1;
var t = setTimeout('type2()',80);
}
NOTE When I call one of these 2 functions apart, it works.
I could be wrong, but I think that the issue is with index. You have the same variable name for each type, and when they run at the same time, it confuses the script. You have a variable named index, that will +=1, so when the next function gets it, it is messed up.
Try changing the variable for index on type2() to index2. See if this fixes it.
You have tried to declare the variable index twice. Try renaming it in the second function and it should work fine.
Explanation:
you declare var index = 0; twice within the same scope. in this case the second declaration is what gets used(fiddle example), and so there is only index variable inside the functions. That's why each function displays every second letter.
I have used this website a lot for research etc and find it extremely useful.
I have been developing a little bit of code that will get a list of input id names and then add there values together using javascript/jquery.
This is what I have so far - it might be well off the mark as I am still a novice.
So far the code gets the names of the inputs fine. It also does the calculation fine but when I put the array into the "var fieldnames" the calculation stops working?
When I copy the array out (after putting it into an input) and pasting it into the "var fieldnames" it works fine.
The issue seems to be that the array doesnt pass over to the "var fieldnames" correctly??
Here is the code from the page - it puts the array into the inputs at the bottom for investigation purposes only but the calculation doesnt work unless you put the input names in manually!
Any help would be much appreciated.
Thanks
<!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/jquery.min.js"></script>
</head><body>
<script type="text/javascript" language="javascript">
function getTotal(oForm)
{
var arrayOfIDs = $('.myClass').map(function() { return this.id; }).get();
var test = (arrayOfIDs.length ? "'" + arrayOfIDs.join("','") + "'" : "");
document.getElementById("sum").value = test;
var field, i = 0, total = 0, els = oForm.elements;
var fieldnames = [test];
document.getElementById("sum1").value = fieldnames;
for (i; i < fieldnames.length; ++i)
{
field = els[fieldnames[i]];
if (field.value != '' && isNaN(field.value))
{
alert('Please enter a valid number here.')
field.focus();
field.select();
return '';
}
else total += Number(field.value);
}
return ' ' + total;
}
</script>
<div id="listing">
<form>
<table>
<td>8065020</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay47" type="text" name="pay47" value="38.45"/></td>
</tr>
<tr>
<td>8065021</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay48" type="text" name="pay48" value="37.4"/></td>
</tr>
<tr>
<td>8065022</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay49" type="text" name="pay49" value="375"/></td>
</tr>
<tr>
<td>8065014</td>
<td>2012-04-04</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay50" name="pay50" value="06"/></td>
</tr>
<tr>
<td>8065015</td>
<td>2012-04-04</td>
<td>motorprotect</td>
<td><input type="text" class="myClass" id="pay51" name="pay51" value="01"/></td>
</tr>
<tr>
<td>8065011</td>
<td>2012-03-06</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay52" name="pay52" value="55"/></td>
</tr>
<tr>
<td>8065012</td>
<td>2012-03-06</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay53" name="pay53" value="56"/></td>
</tr>
<tr>
<td>1</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay54" name="pay54" value="56"/></td>
</tr>
<tr>
<td>2</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay55" name="pay55" value="52"/></td>
</tr>
<tr>
<td>3</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay56" name="pay56" value="53"/></td>
</tr>
<tr>
<td>4</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay57" name="pay57" value="55"/></td>
</tr>
<tr>
<td>8065001</td>
<td/>
<td>landlord</td>
<td><input type="text" class="myClass" id="pay58" name="pay58" value="5"/></td>
</tr>
<tr>
<td>8065002</td>
<td/>
<td>landlord-basic</td>
<td><input type="text" class="myClass" id="pay59" name="pay59" value="59"/></td>
</tr>
<tr>
<td>8065003</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay60" name="pay60" value="5"/></td>
</tr>
<tr>
<td>8065004</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay61" name="pay61" value="5"/></td>
</tr>
<tr>
<td>8065005</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay62" name="pay62" value="5"/></td>
</tr>
<tr>
<td>8065006</td>
<td/>
<td>landlord-basic</td>
<td><input type="text" class="myClass" id="pay63" name="pay63" value="64"/></td>
</tr>
<tr>
<td>8065008</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay64" name="pay64" value="5" /></td>
</tr>
<tr>
<td>8065010</td>
<td/>
<td>business-basic</td>
<td><input type="text" class="myClass" id="pay65" name="pay65" value="10" /></td>
</tr>
</table>
<input id="total" type="text" name="total" value="" readonly="readonly" />
<input type="button" value="Get Total" onclick="total.value=getTotal(this.form)" />
<br /><br />
<input name="totalpay" id="sum" type="text" />sum<br />
<input name="totalpay" id="sum1" type="text" />sum1
</form>
</div>
</body>
</html>
1- Replace the line
var test = (arrayOfIDs.length ? "'" + arrayOfIDs.join("','") + "'" : "");
By
var test = (arrayOfIDs.length ? arrayOfIDs.join(",") : "");
2- Replace
var fieldnames = [test];
By
var fieldnames = test.split(",");
3- Replace
field = els[fieldnames[i]];
By
field = document.getElementById(fieldnames[i]);
What i did here is only correct you code to resolve your problem, but i am covinced that you can do this in a more easiest way.
If I understood your question correctly and you just want to add up your values, while provideing basic validity check, your code is way to complicated. Frameworks like jQuery provide you with means to do this much simpler.
Instead of looping through all input elements, getting their id's and then looping through them again, just do it once.
var getTotal (oForm) {
var sum = 0;
// loop through all inputs with class "myClass" inside oForm
$("input.myClass", $(oForm)).each(function (index, value) {
// add up all values that are non empty and numeric
if (value !== "" && !isNaN(value)) {
// parse the value
sum += parseFloat(value, 10);
} else {
// show an alert, focus the input and return early from $.fn.each
alert("Please enter a valid number here!");
$(this).focus();
return false;
}
});
// set the value of
$("sum").val(sum);
}
This was written from the top of my head but should work fine.
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.