Using select2 with a dynamic form.

See more:

Javascript

PHP

forms

Hi there,

This is my first time posting so please be gentle.

I am running a form which allows you to automatically click add more and more fields for the form appears.

I am using Select2 to make it look good with images in the drop down.

The first drop down is loading just fine but every subsequent addition to the form does not produce the select2.

Before i get into the code here is the desired result.

How the drop down should look: https://i.ibb.co/WFS9TPL/image.png
How it looks when I click add more: https://i.ibb.co/Mk98ffS/image.png

Here is my code for the form:

<form method="POST" action="?page=fws_fixture_admin" id="newFixtures">
<pre><div class="table-responsive">  
	<table class="table table-bordered" id="dynamic_field" style="width:100%;">  
        <thead>
			<td>Home Team Name</td>
			<td>Away Team Name</td>
			<td>Postponed? Type 'true'</td>
			<td>Kick Off Date and Time</td>
			<td>Venue</td>
			<td>Action</td>
		</thead>
       <tbody>
         <tr>  
             <td><?php echo $teamdrophome; ?> </td>
			 <td><?php echo $teamdropaway; ?> </td>
			 <td><input type="text" name="postponed[]" placeholder="Type true if game is postponed" class="form-control name_list" /></td>
			 <td><input type="datetime-local" name="datetime[]" class="form-control name_list" ></td>
			 <td><input type="text" name="location[]" placeholder="Location" class="form-control name_list" /></td>
             <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
         </tr>  
		</tbody>
    </table>  
    <input type="submit" class="button-primary" name="submitFixtures" value="Submit" />
  </div>
</form>

The variables $teamdrophome and $teamdropaway are created using a simple php script generating the list from the database.

My Javascript looks like this

<script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><? echo $teamdrophome; ?></td><td><? echo $teamdropaway; ?></td><td><input type="text" name="postponed[]" placeholder="Type true if game is postponed" class="form-control name_list" /></td><td><input type="datetime-local" name="datetime[]" class="form-control name_list" ></td><td><input type="text" name="location[]" placeholder="Location" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      }); 
	 $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
});  
</script>
<script>
function formatTeams (data) {
	if(!data.id) { return data.text; }
	var baseUrl = "/images/badges";
	imageString = data.element.text.toLowerCase();
	newImageString = imageString.replace(/ /g, "_");
	var $result = $(
	'<span style="min-width:150px;"><img src="' + baseUrl + '/' + newImageString + '.png" class="fwsbadge" style="width:30px!important;float:left;"/><br> ' + data.text + '</span>'
	);
	return $result;
};

$("#home").select2( {
	placeholder: "Search Teams",
	allowClear: true,
	templateResult: formatTeams
});

$("#away").select2( {
	placeholder: "Search Teams",
	allowClear: true,
	templateResult: formatTeams
});
</script>

I am assuming the issue is due to the ajax nature of the form adding more lines it isn't reloading the select2 script.

Now the purpose of this script is for me and one other person only, but if it did ever come to a time of adding more staff I would want it to look as friendly as possible for them.

Thanks for any and all help received.

What I have tried:

I have tried including the select2 script within the add more script but it didn't work and I am at a loss on how to beautify it.