Is this possible to accomplish with html and php? - php

Question

I've made the form below. Is it possible to make it that when user enters the number of fields, for example 6, that the table below has 6 rows. It would be great if it would be possible to make it without any submit button (so that the trigger for this action is exiting from the text input box).
Here is the html code of this form:
<fieldset>
<legend>Student Information</legend>
Number of fields: <input type="text"><br />
Total number of characters: <input type="text">
<br>
<br>
<table border="1">
<th></th>
<th>field</th>
<th>number of characters</th>
<tr>
<td>1</td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
If this is not possible (without submit button), than in which way would you accomplish the same result? Thank you for any help and/or suggestions.

Answer 1

PHP is server side, it runs only once, when the page is loading. HTML is not a programming language. You could generate the table with PHP, but only if you had a submit button that reloaded the page. If it has to happen because of a user event, it always needs to be done with Javascript.
That means, you will need Javascript to make this work without reloading the page. Ideally, you would use Jquery (Javascript's most popular plugin) to manipulate the DOM.
If you had this input :
<input id="field" type="text">
You could call the on-leave event like this :
$("p").focusout(function()
{
// Delete the previous table, and create a new one, here
});
As for creating the actual table, it isn't complicated, but it is a bit of work. You should read the following reference to start you up :
http://www.tutorialspoint.com/jquery/jquery-dom.htm
You will need to "install" JQuery before-hand, you can simple insert this at the top of your code :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Answer 2

Okay here is the post only script you require
<?php
$rows=2;
if(isset($_POST['submit']))
{
if($_POST['submit']=='Update')
{
if(isset($_POST['rows'])) $rows=max($rows, intval($_POST['rows'])); // minimum 2 rows
}
else
{
// process posted data here
// reset post or jump to another page
$_POST=array();
//header("Location:index.php");
//exit();
}
}
?>
<form method="post">
<fieldset>
<legend>Student Information</legend>
Number of fields: <input type="text" name="rows" value="<?php echo $rows; ?>"><br />
Total number of characters: <input type="text">
<input type="submit" name="submit" value="Update"/>
<br>
<br>
<table border="1">
<th></th>
<th>field</th>
<th>number of characters</th>
<?php
for($loop=1;$loop<=$rows;$loop++)
{
echo '<tr>';
echo '<td>'.$loop.'</td>';
echo '<td><input name="field['.$loop.']" value="'.$_POST['field'][$loop].'" /></td>';
echo '<td><input name="chars['.$loop.']" value="'.$_POST['chars'][$loop].'" /></td>';
echo '</tr>';
}
?>
</table>
<input type="submit" name="submit" value="Submit"/>
</fieldset>
</form>
It will default to 2 rows (minimum), and retain the data when you update the rows.
If the rows get reduced, then the end ones disappear

Answer 3

It certainly would be doable with just PHP.
So for example, if you typed in '6' rows you could catch the form post and do something like (template form for within the HTML):
<?php for($i=0; $<=$_POST['rows'];$i++): ?>
<!-- This being your whatever html for the table -->
<tr><td></td></tr>
<?php endfor; ?>