Here is the HTML and jQuery that produces the form (all it does is allows users to create another input field that has the same names: skillName[]
and skillLevel[]
):
$(document).ready(function() {
var max_fields = 100;
var wrapper = $(".wrapper");
var add_button = $(".new-skill-field");
var i = 1;
$(document).on("click", ".new-skill-field", function(e) {
e.preventDefault();
if (i < max_fields) {
i++;
$(wrapper).append('<div><label>Skill Name:</label><input type="text" name="skillName[]"><label>Skill Level:</label><input type="text" name="skillLevel[]" class="input-small"><button class="remove-skill">Remove This Skill</button><br></div>');
}
});
$(wrapper).on("click", ".remove-skill", function(e) {
e.preventDefault();
$(this).parent('div').remove();
i--;
});
});
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="wrapper">
<div>
<label>Skill Name:</label>
<input type="text" name="skillName[]" id="skillName">
<label>Skill Level:</label>
<input type="text" name="skillLevel[]" id="skillLevel" class="input-small">
<br>
</div>
</div>
<button class="new-skill-field">Add Another Skill</button>
Regardless of how many fields I create and enter values into, if my PHP script is nothing else but var_dump($_POST['skillName'])
, it only returns one value: the first input field. I know this works, as I have done this in the past. I just cannot figure out why this form, or perhaps this jQuery, is causing it to only pass one value in the array.
And yes, I do need the arrays to be coded in the form... there is no other way of passing the array to my class and have it do what I need it to.
</div>