Add rows to form

[clang]

I have a form and I need to be able to add multiple rows to it.

For example you load the page and it shows you

 

"1) Name:_______  Address:______"

 

*Name and Address are input boxes*

 

Under that would be an "Add" button. When you pressed that button, the page would show you, with out refreshing

"1) Name:_______  Address:______

2) Name:_______  Address:______"

 

It's important that pressing "Add" does not reload the page, in the process having the user lose the information they entered into 1).

 

After that there is an "Enter" button. That sends the information entered by the user to php using post. The information should them be retrievable by php, and php should know how many rows the user entered. If they pressed add alot and entered 10 name's and address, php should loop 10 times.

 

How can I accomplish this?

 

Thanks for the help. If you need any additional information just let me know and I would be happy to supply it. I tried looking through google and through the forums to find something but haven't been able to.

[Flying Sagittarius]

AJAX allows you to add contents without reloading the page.  I don't know exactly how to use it, though.

[.josh]

If you want to do this only with php, you're going to have to have page reloads.  You can use a session variable for data persistence.  Your other options include using a clientside language like javascript, or a mix between php and javascript, using ajax.

 

^ ajax still involves sending requests to the server, just not a full page reload.

 

edit:

 

Only thing you got to consider though is that using javascript or ajax can cripple your site, as people can turn it off.  If you wish to go that route, I suggest first doing it the strict php method and then doing it the js or ajax method on top of that, so that your script has something to fall back on if js is disabled.

[clang]

I figured it would involve ajax, which is fine with me. I just don't know how to set this all up using ajax and php. Any ideas?

[.josh]

What you are wanting to do is a very basic ajax method. Virtually all beginner ajax tutorials explain how to do what you are wanting to do.  To be honest though, you don't really need to do ajax.  All you're wanting to do is add an extra element to your form... just do it with javascript.  The point to ajax is needing to get more information from the server without refreshing the page.  This is useful for instance with multiple dropdown selections, where dropdown #2 data is based on dropdown #1 selection sort of thing.  But you're just wanting to add a basic form element.  No need to bother the server for that.  Just use a javascript onclick call.

[clang]

So being a bit of a javascript n00b I have some problems. I'm not sure how to get information from javascript (ie: the number of rows that have been entered) to php. I'm also not sure how to actually make things other than simple text be populated by javascript. What I mean is how can I make, basically a whole table (really the rows of a table), be created by javascript, and in such a way that php can extract the information from it.

That being said I've used javascript before (both asynchronous and not). And I've found a few of those simple tutorials you've mentioned. But when ever I try to incorporate php form processing into it, it goes over my head.

 

And please excuse my use of the AJAX term. Obviously this doesn't need to make a call back to the server, making is no longer asynchronous.

 

[.josh]

well I don't really know a whole lot of js myself, but I think if you assign an id or name to an element, you can use js to onclick, add content to that element block (your extra input field for your form). 

 

As far as letting php know that there's a new input element in your form..I think the most efficient method for that is to use an array as your name in your input element. Example:

 

<script = 'javascript'>
function addanotherelement () {
<!-- js code here -->
}
</script>

<form id='myform' name = 'myform' action = 'target.php' method = 'post'>
   <input type = 'text' name = 'blah[]'><br />
   <button onclick='addanotherelement();'>add another</button>
   <input type = 'submit' value = 'submit'>
</form>

 

The key there is name = 'blah[]' makes an array. Each time you add a new input element to your form, it will simply say name = 'blah[]' and when the form is submitted, all of the information can be accessed by

 

$_POST['blah'][0] // first text field

$_POST['blah'][1] // 2nd text field

etc...

 

Obviously that is not how to really code the javascript. I'm going to move your thread to the javascript section so someone can help you on that part....