Question

Have a query that should hopefully be nice and simple to answer.

I have a form that will be used to add rows into a database. The default number of rows to show when loading the page is 6. I would like to add the option to add more rows to the form, by changing a field, or clicking a button etc.

I currently use a while loop to print out the form. I simply say:

while($rows > 0) {
    echo "FORM INPUTS HERE";
    $rows = $rows - 1;
}

So the loop goes through a prints a set of inputs for record 1, and then takes one off the count, then prints a set of inputs for record 2, and so on.

Is there a way I can get the while loop to print more without refreshing the page? The simplest way would be to have a small form at the top of the page, with an extra columns field, and submit button. This would then post the value back to the same page, and add it to the default number of rows.

I would like to do this without having to submit, post or GET anything, but to have it happen then and there.

I think it may be tricky, as the while loop will have already run, and I dont know how to get it to run a second time.

Cheers

Eds

Answer 1

You can use ajax to make your wish. It doesn’t refresh page, but sends out a request to the server asynchronously and fetches the content and appends to the form.

Example, if you have a code this way:

<form method="post">
    <ul>
        <li><label><strong>Field 1:</strong> <input type="text" /></label></li>
        <li><label><strong>Field 2:</strong> <input type="text" /></label></li>
        <li><label><strong>Field 3:</strong> <input type="text" /></label></li>
        <li><label><strong>Field 4:</strong> <input type="text" /></label></li>
        <li><label><strong>Field 5:</strong> <input type="text" /></label></li>
    </ul>
</form>

Now using jQuery‘s $.getScript function, you can fetch a script, which is similar to this:

$("form ul").append('<li><label><strong>Field ' + $currentValue + ':</strong> <input type="text" /></label></li>');

This works out for you.