How to send the values of multiple created input fields on php via ajax

Question

I have there an example part of my form, (my form has 4 different fields/div like that) and i cannot think of how i can send the values of those created input fields on php via ajax. Sorry if i can't explain it well. I have searched for this but i can't get the exact answer i'm looking for.

<input type = "text" class = "form-control" placeholder="Knowledgeable/Proficient in.." name = "skills[]" >

I want to use a function which uses some kind of name="skills[]" (or array type) instead of something like name="skills1". tyia!

Answer 1

If you give the skill inputs a class like so

<input type="text" class="form-control skill-input" placeholder="Knowledgeable/Proficient in..">

You can then create an object from your form in javascript (example using jquery)

var skills = [];
$(".skill-input").each(function() {
    skills.push($(this).val());
});
console.log(skills); //final array of skills

var resume = JSON.stringify({
    firstName: $('[name=firstName]').val(),
    lastname: $('[name=lastName]').val(),
    skills: skills
});

$.ajax({
    dataType: 'json',
    url: './submit.php',
    type: 'POST',
    data: {resume:resume}
});

then on your submit.php you can have

$form = json_decode($_POST['resume'], true);
echo $form['skills'];