Populating form elements in a Jquery Dialog Popout
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"&g开发者_如何学Got;
<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"><a href="popoutTest.php" title="Popout Test">Click here for more data</a></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.
加载中,请稍侯......
精彩评论