I have an HTML page(PAGE 1) that allows a user to select an HTML form element, and get it displayed on the next page(PAGE 2) when the user clicks "next". What I want to do is on the display page(PAGE 2), be able to display the newly created HTML form element as well as PAGE 1 so that as and when "next" is clicked, the user sees that new form elements are being added, but the HTML table selector is constant. I know I need to use AJAX, but I need a starting point. This AJAX should be able to send the entire HTML page.
My HTML code(PAGE 1) is below.
<html>
<head>
<script type="text/javascript">
<!-- Begin
function checkBoxValidate(cb) {
for (j = 0; j < 8; j++) {
if (eval("document.myform.ckbox[" + j + "].checked") == true) {
document.myform.ckbox[j].checked = false;
if (j == cb) {
document.myform.ckbox[j].checked = true;
}
}
}
}
// End -->
</script>
</head>
<body>
<br>
<br><br>
<form name="myform" action = "checkboxSubmit.php" method = "POST" style= "display:inline;">
<p>Please choose a variable to incrementally build your form
<div style "
margin-top:25px;
margin-left:50px;
margin-right:50px;
margin-bottom:25px;
">
<div style = "width:500px;height:275px;border:2px solid blue;
padding-top:25px;
padding-left:100px;
padding-right:100px;
padding-bottom:5px;
">
<table border = "1">
<tr>
<th>Choose One</th>
<th>Element Name </th>
<th>Element</th>
<tr>
<td><input type = "checkbox" name = "ckbox" value = "txt_box"
onClick="javascript:checkBoxValidate(0)"></td>
<td>Textbox</td>
<td><input type = "textbox" name = "text_box"></td>
</tr>
<tr>
<td><input type = "checkbox" name = "ckbox" value = "list_box"
onClick="javascript:checkBoxValidate(1)"></td>
<td>List Box</td>
<td><select>
<option value="ListItem1"></option>
<option value="ListItem1">ListItem1</option>
<option value="ListItem2">ListItem2</option>
<option value="ListItem3">ListItem3</option>
<option value="ListItem4">ListItem4</option>
</select></td>
</tr>
<tr>
<td><input type = "checkbox" name = "ckbox" value = "chk_box"
onClick="javascript:checkBoxValidate(2)"></td>
<td>Checkbox</td>
<td><input type = "checkbox" name = "checkbox"></td>
</tr>
<tr>
<td><input type = "checkbox" name = "ckbox" value = "radio"
onClick="javascript:checkBoxValidate(3)"></td>
<td>RadioButton</td>
<td><input type = "Radio" name = "radio"></td>
</tr>
</table>
</div>
<form action="AppForm1.html" style="display:inline;">
<input type="submit" value="<<Back" /></form><input type = "submit" value= "Next>>" />
</form>
</body>
</html>My php code(PAGE 2) is this
<?php
$getControl = $_POST['ckbox'];
$txt_box = 0;
$list_box = 0;
$chk_box=0;
$radio = 0;
switch($getControl)
{
case "txt_box":
$txt_box = 1;
break;
case "list_box":
$list_box = 1;
break;
case "chk_box":
$chk_box = 1;
break;
case "radio":
$radio = 1;
break;
}
$con = mysql_connect("internal-db.s110820.gridserver.com","db110820","Solved!2$$");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("db110820_AppCreator", $con);
$lid = mysql_query('SELECT last_Insert_id() from Login');
// insert into database
$sql="INSERT INTO metadata (creatorID, text_box, list_box, radio_button, check_box)
VALUES
('$lid','$txt_box','$list_box','$radio', '$chk_box')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
$txt_box_query = "SELECT text_box from metadata";
$tbq = mysql_query($txt_box_query);
$tbqn = mysql_fetch_row($tbq);
$tbqnn = $tbqn[0];
$list_box_query = "SELECT list_box from metadata";
$lbq = mysql_query($list_box_query);
$lbqn = mysql_fetch_row($lbq);
$lbqnn = $lbqn[0];
$radio_button_query = "SELECT radio_button from metadata";
$rbq = mysql_query($radio_button_query);
$rbqn = mysql_fetch_row($rbq);
$rbqnn = $rbqn[0];
$check_box_query = "SELECT check_box from metadata";
$cbq = mysql_query($check_box_query);
$cbqn = mysql_fetch_row($cbq);
$cbqnn = $cbqn[0];
echo "<table><tr><th>Label</th><th>Control Element</th></tr>";
for($j = 0; $j <$tbqnn; ++$j){
echo "<tr><td><input type = 'text' name = 'label$tbqnn' /></td>
<td><input type = 'text' name = 'textbox$tbqnn'/> </td> </tr>";
}
for($j = 0; $j <$lbqnn; ++$j){
echo "<tr>
<td><input type = 'text' name = 'listbox$lbqnn'/> </td>
<td><select>
<option value='ListItem1'></option>
<option value='ListItem1'>ListItem1</option>
<option value='ListItem2'>ListItem2</option>
<option value='ListItem3'>ListItem3</option>
<option value='ListItem4'>ListItem4</option>
</select></td></tr>";
}
for($j = 0; $j <$rbqnn; ++$j){
echo "<tr><td><input type = 'text' name = 'label$rbqnn' /></td>
<td><input type = 'radio' name = 'textbox$rbqnn'/> </td> </tr>";
}
for($j = 0; $j <$cbqnn; ++$j){
echo "<tr><td><input type = 'text' name = 'label$cbqnn' /></td>
<td><input type = 'checkbox' name = 'checkbox$cbqnn'/> </td> </tr>";
}
echo "</table>";
$sql1="DELETE from metadata";
if (!mysql_query($sql1,$con))
{
die('Error: ' . mysql_error());
}
mysql_close($con)
?>