Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I want to create a page where a user cand insert information about a student so i use a form with two fields : - first name - last name. And also two buttons: Save (saves the student info into a database) and Add (shows another form looking exactly as the same). One ideea was to use javascript and hide all the forms except the first one and then, when the Add button is pressed to make visible another form, but i don't know many students the user wants to insert, so i can't create all the forms when the page is loaded. I need a way to create dynamically a form, add it to a list with forms and add it to the page. When the Save button is pressed i could iterate over the list of form and get info from every particular form.

Can someone help me, please ?

share|improve this question
2  
you need to actually try and make it work, SO is not meant to teach you how to code or code for you. look around, with some basic ajax and php you can make this work – Jonathan Mar 20 '12 at 19:05
I don't expect someone to teach me code. I know how to make this work in Java or C++ or C#, but i know just a little PHP and there is no equivalent for Java List or something like that. – adriana Mar 20 '12 at 20:33
The list in PHP is called array: php.net/array - and there are also Iterators. – hakre Mar 23 '12 at 15:45
Thank you, hakre. – adriana Mar 24 '12 at 10:29
add comment (requires an account with 50 reputation)

2 Answers

up vote 0 down vote accepted

You could create the basic HTML form and create a button to clone elements from your form for a new student:

<form id="form">
  <div id="master">
    <input name="name[]" />
  </div>
</form>

<a id="clone" href="#clone">new student</a>

With jQuery for example it's easy to clone HTML elements and insert them as new ones into your site:

$('#clone').click(function(e) {
  e.preventDefault();
  $('#master').clone().appendTo('#form');
});
share|improve this answer
Thanks for your answers. I don't want to use javascript because it can be disabled from the browser. – adriana Mar 20 '12 at 19:23
There is no way handling this with plain HTML and without any JavaScript. It's not possible to have two submit buttons in one form-element. You could create a radio/choice button for selecting the actions, this for sure works. With PHP you can read the desired action (save or display sent content + new form) and perform the action… – semu Mar 20 '12 at 21:10
Thanks semu. I will use Javascript and if it is disabled, i will show a message which explains that javascript shoulb be enabled. – adriana Mar 24 '12 at 10:32
add comment (requires an account with 50 reputation)
up vote 0 down vote

If you don't want to use any libraries (like jQuery), you could do it with a raw javascript that adds new inputs on each click:

<script>
function add()
{
    document.getElementById("formzone").innerHTML = document.getElementById("formzone").innerHTML + "First name: <input type='text' name='firstname[]'>Last name: <input type='text' name='lastname[]'><br>";
}
</script>


<form method='POST'>
<span id='formzone'>
First name: <input type='text' name='firstname[]'>Last name: <input type='text' name='lastname[]'><br>
</span>
<input type='submit' value='Save'>
<input type='button' value='Add' onclick='add()'>
</form>
share|improve this answer
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.