0

In my page I add extra 3 new fields (name, phone, email) when clicking on "Add more fields". I want to add all value of 3 field to an array and send them to view.py without using ajax.

Example: I click on add more fields 2 times and I want add all them to an array allow pair value like this: [{'MrA','mra@gmail.com'},{'MrB','mrb@gmail.com'}]. But in view.py I'm using command request.POST.get('name') and request.POST.get('email') it just get only one pair value last input.

How to get each pair value in that array?

HTML

<form action="'{% url 'add_more_field' %}'" method="post">
<ul id="fieldList">
<li>
  <input name="name" type="text" placeholder="Name" />
</li>
<li>
  <input name="email" type="text" placeholder="E-Mail">
</li>
</ul> 
   <button id="addMore">Add more fields</button>
<br>
<br>
<input type="submit">
</form>

JS

$(function() {
$("#addMore").click(function(e) {
   e.preventDefault();
   $("#fieldList").append("<li>&nbsp;</li>");
   $("#fieldList").append("<li><input type='text' name='name' placeholder='Name' /></li>");
   $("#fieldList").append("<li><input type='text' name='email' placeholder='E-Mail' /></li>");
});
});

view.py

def add_more_field(request):
person = Person()
if request.method == 'POST':
  name = request.POST.get('name')
  email = request.POST.get('email')
return render(request, 'index.html')
luchaninov
  • 6,792
  • 6
  • 60
  • 75
trent fernandez
  • 329
  • 4
  • 19
  • Do you want to do this without issuing a page request? If not you'll need to use AJAX. Not sure why you're trying to avoid AJAX here as it's the natural approach for this problem. – Anthony E May 15 '16 at 09:05
  • I just wanna tried using request send it to view without using ajax is possible or impossible in this situation? – trent fernandez May 15 '16 at 09:10
  • It's not possible, remember that the browser only runs javascript, not Python, so you'll have to use AJAX to fetch data from your backend unless you want to send a whole new HTTP request which will act as a page navigation. – Anthony E May 15 '16 at 09:16
  • Try `getlist` instead of calling `get` on your `request.POST`. – RodrigoDela May 15 '16 at 09:42

1 Answers1

1

If I understand your point, that is possible with Django formsets in combination with jquery (see here). I use it too.

An example from formsets:

forms.py

from django import forms
class ContactForm(forms.Form):
     name= forms.CharField()
     email= forms.EmailField()

views.py

def test(request):

    from django.forms import formset_factory
    ContactFormSet = formset_factory(ContactForm)
    if request.method == 'POST':
        formset = ContactFormSet(request.POST)
        if formset.is_valid():
            for form in formset:
                name = form.cleaned_data.get('name')
                email= form.cleaned_data.get('email')
                #do something with the input data
    return render(request, 'test/test.html', {'formset':ContactFormSet})

test.html (related to here):

<form action="{% url 'test:test' %}" method="post">
<h3>My test</h3>
{{ formset.management_form }}
{% for form in formset.forms %}
    <div class='table'>
    <table class='no_error'>
        {{ form.as_table }}
    </table>
    </div>
{% endfor %}
<input type="button" value="Add More" id="add_more">
</form>
<script>
    $('#add_more').click(function() {
        cloneMore('div.table:last', 'form');
    });
function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}
</script>
Community
  • 1
  • 1
trantu
  • 1,089
  • 8
  • 17