How to take an array of input fields values and pass it through an Ajax call

Question

I have a web form in which look like this right now. The problem is I have a option which adds more dynamically rows below them which looks the same and have the same name attribute. I have a submit button which gets the value of all the input fields. The submitted values goes through an Ajax call to my PHP where I have to insert them in my database.

Access:
<tr>
  <td><input type"text" name="access[name]"></td>
  <td><input type"text" name="access[type]"></td>
  <td><input type"text" name="access[description]"></td>
</tr>

student:
<tr>
  <td><input type"text" name="student[name]"></td>
  <td><input type"text" name="student[type]"></td>
  <td><input type"text" name="student[description]"></td>
</tr>

So far I can't get all the values generated by the input field in an array so that I can properly sort and insert them in my database.

I was looking for my array structure to look like this or like a properly JSON formatted. But I don't know how to do this in Ajax call.

access[
         name:xyz,
         type:xyz,
         description
      ]
student[
         name:xyz,
         type:xyz,
         description
      ]

My Ajax function:

    $('.submit').on('click',function(){

    var access;
    $('input[name^="Access"]').each(function() {
        access= ($(this).val());
    });
    var student;
    $('input[name^="student"]').each(function() {
        student= ($(this).val());
    });

    $.ajax({
           url: '../php/Submission.php',
           type: 'post',
           data: {access:access,student:student}
       },
           function(data1)
            {
                console.log(data1);
            }
      );
});

I know my Ajax function is not write but I have tried so many code to make it work as the result it's all messed up and not sure what to do now.

Racil Hilan · Accepted Answer · 2018-05-16 15:57:43Z

3

Change your access and student variables to become arrays, and add the values to them (Note: you can simply use this.value instead of $(this).val()):

var access = [];
$('input[name^="Access"]').each(function() {
    access.push(this.value);
});
var student = [];
$('input[name^="student"]').each(function() {
    student.push(this.value);
});

EDIT If you want to name your values instead of using the index, you'll need to use objects instead of arrays, and manually extract the name:

var access = {};
$('input[name^="access"]').each(function() {
    var name = this.name.substr(7, this.name.length - 8);
    access[name] = this.value;
});
var student = {};
$('input[name^="student"]').each(function() {
    var name = this.name.substr(8, this.name.length - 9);
    student[name] = this.value;
});

edited May 16, 2018 at 15:57

answered May 16, 2018 at 15:38

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Taplar Over a year ago

Small note, this.value would also work in this case, rather than using jquery to access the property. And map() could also be used rather than each()

Racil Hilan Over a year ago

@Taplar I know, but I just copied/pasted the code from the OP. I will update my answer. Thanks.

sach jot Over a year ago

It can be a stupid question but Does this will contain the key input field of the array value i.e "Name","Description"?

sach jot Over a year ago

@RacilHilan thank you for the help. It's working and I'll accept the answer. But right now I am getting the output like this in an array: 0:value1,1:value2, 2:value3. Where 0,1,2 are the index I believe. I was hoping them to be as the key name i.e name:value1,description:value2, etc

Collectives™ on Stack Overflow

How to take an array of input fields values and pass it through an Ajax call

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related