raghujosh 0 Junior Poster

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)

  
   
?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.