Concatenating textfield values with the same name before sending to DB

2020-05-27 php html concatenation

I have the following input field:

<input type="text" name="attendee" placeholder="Attendee name">

An event can have multiple attendees, so to address this, I have a button which, on click, generates another <input type="text" name="attendee" placeholder="Attendee name">

So essentially on button click, I'll have two input fields with the same name:

<input type="text" name="attendee" placeholder="Attendee name">
<input type="text" name="attendee" placeholder="Attendee name">

I'm now trying to obtain the data from this these inputs and send them to my table which stores data of the type varchar. Of course, a user can click add button several times (so there's seven inputs on the page). So I can't create columns in my table for each attendee name.

So to counter this, what I'm trying to do is get all the values from input['name=attendee'] and concatenate it into one string and these will be separated by a comma.

For example, if I have two textfields:

  • First textfield has value Freddy
  • Second textfield has value Roach

... These will concat into Freddy, Roach and this is the string that will be send into the table.

I cannot do something like:

$complete_string = $attendee_one."," .$attendee_two; 

Because as I've mentioned, a user can generate multiple inputs through button click.

Form demo:

$('.add').on('click', add);

function add() {
	  var new_chq_no = parseInt($('#total_chq').val()) + 1;
	  var new_input = "<input type='text' placeholder='Attendee name' name='attendee[]' id='new_" + new_chq_no + "'>";
	  $('#new_chq').append(new_input);
	  $('#total_chq').val(new_chq_no);
	}
#new_chq{
  display: flex;
  flex-direction: column;
}

input{
  margin: 10px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <fieldset>

    <div id="new_chq">
      <input type="text" name="attendee[]" placeholder="Attendee name">
      <input type="hidden" value="1" id="total_chq">
    </div>
    
    <button class="add action-button" type="button">+</button>

  </fieldset>
</form>

How I'm getting form data in PHP

$attendees = $_POST['attendee[]'];

What I want to do (pseudo):

INSERT INTO table_name ('attendees') VALUES ('$attendees');

Answers

How I'm getting form data in PHP

$attendees = $_POST['attendee[]'];

No, you need to get the attendee key. Array decoding is automatic. So you do send them with square brackets, but then retrieve them without:

$attendees = $_POST['attendee'];

Now you have an array of names, but you cannot make a prepared query this way, so you need to escape the names yourself:

$attendees = array_map(
    function($attendee) {
        return your_db_function_for_escaping_but_without_quotes($attendee);
    },
    $attendees
);

Now $attendees is an array containing (note the backslashes) John,Daniel,Teal\'c,Max,... and can be safely put into a quoted SQL string once it's been imploded into a single item:

$attendeeList = implode(',', $attendees);

Note that this is an antipattern, and you'd probably be advised to use three tables, one with attendees, one with meetings, and one with attendances:

 id    meeting
 32    Ori technology

 id    attendee
 72    Daniel
 79    Harry

 id    meeting_id     attendee_id
 747   32             72
 748   32             79

Above, Harry and Daniel both attend meeting #32.

Related