Member Avatar for erabxes

Hello! Please I would want to be able allow users select options from a list of selections as many times as possible using php, how do i achieve that? Below is a form for better description of what i desire to do

<html><body>
<form action="" method="post">
<p>You can enter your subjects as many times as possible</p>
<select>
<option>English</option>
<option>Mathematics</option>
<option>Physics</option>
<option>Chemistry</option>
<option>Biology</option>
</select>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select>
<option>2012</option>
<option>2011</option>
<option>2010</option>
</select>

<Input type="button" value="enter">
</form>
</body>
</html>

--------------------end
Supposing the user want to enter 5 subjects with their respective grades and year, how do you make the html and php do this jointly or would one require Javascript to do this? Please I need your assistance!

----->

Edited by Dani because: Formatting fixed
  • 2 Contributors
  • 2 Replies
  • 140 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by erabxes

Dani AI

Generated

Short answer: use repeatable form fields named as arrays on the server and add/remove rows in the browser with JavaScript for the smoothest user experience. As pointed out, client-side code is the usual approach; the key details are (1) give each control a name ending in [] so PHP receives an array, (2) clone or build a new row in JS when the user wants another entry, and (3) validate and save on the server.

Example structure (minimal):

<form method="post" action="save.php">
  <div id="rows">
    <div class="row">
      <select name="subject[]">
        <option value="">--subject--</option>
        <option value="English">English</option>
        <option value="Mathematics">Mathematics</option>
      </select>

      <select name="grade[]">
        <option value="">--grade--</option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>

      <select name="year[]">
        <option value="">--year--</option>
        <option value="2014">2014</option>
        <option value="2013">2013</option>
      </select>

      <button type="button" class="remove">Remove</button>
    </div>
  </div>

  <button type="button" id="add">Add another</button>
  <button type="submit">Save</button>
</form>

Small client-side behavior (vanilla JS):

document.getElementById('add').addEventListener('click', function(){
  var template = document.querySelector('.row').cloneNode(true);
  template.querySelectorAll('select').forEach(s => s.selectedIndex = 0);
  document.getElementById('rows').appendChild(template);
});

document.getElementById('rows').addEventListener('click', function(e){
  if (e.target.classList.contains('remove')) e.target.closest('.row').remove();
});

Server-side: receive $_POST['subject'], $_POST['grade'], $_POST['year'] as arrays, loop by index, validate and sanitize each row, and use prepared statements to insert into the database. Check array lengths match, drop empty rows with array_filter, and add CSRF protection. If JavaScript must not be required, offer a simple server-side “add X rows” control that re-renders the form with more inputs.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

Yes you need javascript.
Your best bet (IMO) is to output form fields to rows in a table. Then you can press a big Update button to update a DB via PHP - either through normal form submission or via ajax.

You may find an editable table easier, where a cell can be turned into a dropdown or a textbox on click. And you could add new editable rows too. This is not a trivial bit of coding though, but not that difficult either. However, Daniweb is not a free coding service. Have a search for some scripts, have a play and come back to us with questions or problems.

Member Avatar for erabxes

Thanks Diafol. Your assistance is greatly appreciated! Will be hoping to hear again from you incase i have any question.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.