单击按钮时的新文本字段

Question

I have a problem that hopefully someone can help me with. I have a webpage I've been building with html and php that has text fields that you fill out and submit to create an evaluation. What I would like to do is be able to click the Add Another Criteria button to add another criteria name and description field to the page and the Add criteria and create buttons would then go below the newest set of text fields created.

All this information is going to be stored in a database using PHP controller files so I am not sure if using Javascript would be the best way to achieve my goal. I apologize for my lack of php knowledge I am very new to this any help would be much appreciated Thank you!

Answer 1

Use jQuery to add an onClick Listener and add the fields:

$("#button").on("click", function() {
  $("#containertoappend").append('<input type="text" id="anothercriteria" placeholder="Another criteria">');
  $("#containertoappend").append('<textarea id="anotherdescription" placeholder="Another Description"></textarea>');
});

Answer 2

This would be easier if you're using jQuery, but without, it's still possible.

    var newCriteria = document.createElement("input");
    newCriteria.setAttribute('placeholder', 'Criteria Name');
    newCriteria.name = 'criteria[]';

    var newDesc = document.createElement("textarea");
    newDesc.setAttribute('placeholder', 'Description');
    newDesc.name = 'description[]';

    document.getElementById("theForm").appendChild(newCriteria);
    document.getElementById("theForm").appendChild(newDesc);

On the PHP side, using the brackets will make the value come through as an array:

 for ($x = 0; $x < $_POST['criteria']; $x++) {
    // do something with each $_POST['criteria'][$x] and $_POST['description'][$x]
    }