Ajax post multiple inputs-CodePudding

I have html input fields with the name personals. I use the [] such that I can have multiple inputs on the same name and post that. Before I was using a normal submit form. And I got it in my Django backend with getlist('personal[]') Everything worked as expected.

As information: the codes are not complete. Just the most important lines are shown.

My html code before

<input type="text" name="personals[]" id="personals[]" placeholder='Email'> 
<input type="text" name="personals[]" id="personals[]" placeholder='Phone'>

My view before

def build(request):
    if request.user.is_authenticated:

        if request.method == 'POST':
            name = request.POST.get('name')
            personals = request.POST.getlist('personals[]')

Now I am using Ajax to submit it, without reloading the page. It does not work anymore with personals[] therefore I have changed it too personals just without the parenthesis.

The problem is, that personal contains only the first input. But not all the others.

It is important to use the same input name (in this case personals) because I use some dynamic input fields, where the users can add more fields. Therefore I don't want to change the name to for example personals1 and personals2.

My html code now

<input type="text" name="personals" id="personals" placeholder='Email'> 
<input type="text" name="personals" id="personals" placeholder='Phone'>

My view now

def build(request):
    if request.user.is_authenticated:

        if request.method == 'POST':
            name = request.POST.get('name')
            personals = request.POST.get('personals')

My ajax function

    $.ajax({
                type: 'POST',
                cache: false,
                url: "{% url 'creator:build' %}",
                data: {
                    name:$('#name').val(),
                    personals:$('#personals').val(),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                })

CodePudding user response：

Your problem is probably that you have multiple values in 'personals' but you are only getting one in your view, you should try using request.POST.getlist('personals[]').

As a more general point, you seem to be collecting email and phone data in your inputs - your input names should really be 'email' and 'phone' and you can use a Django form to render and process these inputs far more easily. If the user can create extra fields or forms then these can be handled by Django forms or formsets.

CodePudding user response：

I found the solution:

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

Here the ajax:

$.ajax({
            type: 'POST',
            cache: false,
            url: "{% url 'creator:build' %}",
            data: {
                name:$('#name').val(),
                personals: personals,
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            })

and finally the view:

def build(request):
    if request.user.is_authenticated:

        if request.method == 'POST':
            name = request.POST.get('name')
            personals = request.POST.getlist('personals[]')

send 2 or more input with the same name with ajax