PHP - Form Div increment by 1 using for loop when button is click

Question

I need to add a new form to store graph information everytime the button is clicked.

Everytime I click the button I should get the Div to increment by 1 so that the new information can be stored in the database with a unique id.

.jumbotron{
width:1000px;
height:100px;
background-color:lightblue;
}

<form action = "" method = "post">
<input type = "submit" name = "submit" value = "Add a new form">
</form>

<div class = "jumbotron">
First Name: <input type="text" name="firstname"><br>
Last Name: <input type="text" name="lastname"><br>
</div>

Refer here: https://jsfiddle.net/rk6eyym6/

I am unable to do a duplicate of the div by 1 using for loop when button is clicked. — DivyaK
– DivyaK, Commented Oct 2, 2015 at 7:38
Div increment to one? Or you meant ID? If ID is the case, you should manage your table structure and have a primary key and set it to Auto Increment. And what's up with those two inputs having the same name tags? — Logan Wayne
– Logan Wayne, Commented Oct 2, 2015 at 7:40

Logan Wayne · Accepted Answer · 2015-10-02 07:52:40Z

1

You wanted to add more forms when the "Add a new form" button is clicked? We can achieve this using Javascript. But i'll be teaching you how to do it using a Javascript library called jQuery.

First, download the library here.

Then, we can proceed in creating the script.

<script src="jquery-1.9.1.min.js"></script> <!-- CHANGE THE NECESSARY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script>

  $(document).ready(function(){ /* PREPARE THE SCRIPT */       
    $("#add").click(function(e){ /* WHEN ADD BUTTON IS CLICKED */
      e.preventDefault(); 
      $(".jumbotron").append('First Name: <input type="text" name="firstname[]"><br>Last Name: <input type="text" name="lastname[]"><br>'); /* APPEND TWO MORE FIELDS */
    });

  });
</script>

You can check this jsfiddle for an example.

Note, you have to add [] on the name tags of your input fields so that they'll be interpreted as an array when they are passed on. Not doing so will only cause to read the first set of data.

answered Oct 2, 2015 at 7:52

Logan Wayne

5,98716 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DivyaK Over a year ago

What if I want to store the values of different form into the database?

Mudassar Khani Over a year ago

that is your server side script after you submit the form. #LoganWayne fixed your first problem.

Logan Wayne Over a year ago

You can use an INSERT query. You can check this link for more information about it.

DivyaK Over a year ago

I am using the onchange=this.form.submit() function so that once i insert a name it will automatically insert into my database. However i need to make sure I insert and do an update when user changes the value, how do I go about with that

Logan Wayne Over a year ago

@DivyaK - you can post a new question about your problem. My answer only did solve the one you are asking for this post.

Collectives™ on Stack Overflow

PHP - Form Div increment by 1 using for loop when button is click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related