answer:solution↓ --->changes in views.py
return JsonResponse() should be written at first for loop, because second for loop keep returning the JsonResponse every time when looping the second loop.i hope you understand.
if request.method == 'POST':
for i in range(len(formset)):
fields = request.POST.get(f'items-{str(i)}-fields')
title_id = request.POST.get('title')
print(title_id)
print(fields)
for j in Create_topic.objects.all():
if j.title == title_id:
Topic_field(choose_topic = j,field = fields).save()
print('saved')
data_fields = {'status':'success'}
return JsonResponse({'status':'success'},safe=False)
but without using fetch api, the django save all of my input values but it keep refreshing. I need to use fetch api. please guide me through this, i am beginner!
html
<div>
<form method="post" id="save_multiple_fields">
<h4>Choose the topic and write additional informations</h4>
{% csrf_token %}
<label for="id_title"></label>
<select name="title" id="id_title" class="form-control">
<option value selected>------</option>
<!-- {% for i in create_topic_models %}
<option value="{{i.id}}">{{i}}</option>
{% endfor %} -->
</select>
{{ select_title_form }}
<br>
<div class="form_list">
{{ formset.management_form }}
{% for formset_form in formset %}
<div class="real_form">
{{ formset_form.as_p }}
</div>
{% endfor %}
</div>
<div class="empty_form">{{ formset.empty_form.as_p }}</div>
<button type="button" class="btn btn-primary" id="add_fields">add title box with textarea</button>
<input type="submit" class="btn btn-primary" value="save" id="save_fields">
</form>
<div id="fields_list">
</div>
</div>
javascript to add input fields
const form_count = document.getElementsByClassName('real_form');
const id_items_TOTAL_FORMS = document.getElementById('id_items-TOTAL_FORMS')
var add_fields = document.getElementById('add_fields');
add_fields.addEventListener('click',add_fields_function);
function add_fields_function(event){
if(event){
event.preventDefault();
}
// console.log(form_count.length)
const empty_form = document.querySelector('.empty_form').cloneNode(true);
const form_list = document.querySelector('.form_list');
empty_form.setAttribute('class','real_form');
empty_form.setAttribute('id',`form-${form_count.length}`)
id_items_TOTAL_FORMS.setAttribute('value',form_count.length + 1);
const regex = new RegExp('__prefix__','g');
empty_form.innerHTML = empty_form.innerHTML.replace(regex,form_count.length);
form_list.append(empty_form);
}
javascript with fetch api
and ignore the comments
// saving multiple inputs fields
document.getElementById('save_multiple_fields').addEventListener('submit',save_multiple_inputs);
function save_multiple_inputs(e){
if(e){
e.preventDefault();
}
const formData = new FormData(this);
console.log(`---------${formData}`)
fetch('{% url "jobs:createjob" %}',{
method:'POST',
body: formData,
})
.then(response => response.json())
.then(status => {
console.log('success',status);
alert('saved');
})
.catch(error => {
console.error('error,',error);
})
}
views.py
and ignore the comments
def createjob(request):
form = CreateJobForm(request.POST or None,request.FILES or None)
create_topic_form = Create_topic_Form(request.POST or None)
formset = formset_fac(request.POST or None,prefix = 'items')
# if request.method == 'POST':
# print(request.POST.get(f'items-{str(0)}-fields'))
createjob_model = CreateJob.objects.all()
# create_topic_models = Create_topic.objects.filter(createjob = max([i.id for i in CreateJob.objects.all()]))
# if form.is_valid():
# obj = form.save(commit = False)
# obj.user = request.user
# obj.save()
# print(obj.id)
# # data = {'name':form.cleaned_data['company_name']}
# data = {'id':obj.id}
# # return redirect('jobs:home')
# messages.add_message(request,messages.SUCCESS,'Job Created!')
# return JsonResponse(data,safe=False)
if request.method == 'POST':
for i in range(len(formset)):
fields = request.POST.get(f'items-{str(i)}-fields')
title_id = request.POST.get('title')
print(title_id)
print(fields)
for j in Create_topic.objects.all():
if j.title == title_id:
Topic_field(choose_topic = j,field = fields).save()
print('saved')
data_fields = {'status':'success'}
return JsonResponse(data_fields,safe=False)
context = {
'form':form,
'formset':formset,
'create_topic_form':create_topic_form,
# 'create_topic_models':create_topic_models,
'createjob_model':createjob_model,
}
return render(request,'cj_form.html',context)
models.py
class TimeStampModel(models.Model):
id = models.AutoField(primary_key=True)
created_at = models.DateTimeField(auto_now_add = True)
modified_at = models.DateTimeField(auto_now = True)
class Meta:
ordering = ['-modified_at','-created_at']
abstract = True
class CreateJob(TimeStampModel):
image = models.ImageField(upload_to='posts',blank=True,null=True)
company_name = models.CharField(max_length=255)
phone = models.CharField(max_length=10)
address = models.CharField(max_length=255)
website = models.CharField(max_length=255,blank=True,null=True)
email = models.EmailField(max_length=255)
company_description = models.TextField()
nationality = models.CharField(max_length=255)
user = models.ForeignKey(settings.AUTH_USER_MODEL,on_delete=models.CASCADE,blank=True,null=True)
slug = models.SlugField(blank=True,null=True)
job_title = models.CharField(max_length=255)
def __str__(self):
return self.company_name
def save(self,*args,**kwargs):
self.slug = slugify(self.company_name)
super().save(*args,**kwargs)
# About_more_job_info.objects.create(createjob = self)
class Create_topic(models.Model):
createjob = models.ForeignKey(CreateJob,on_delete=models.CASCADE)
title = models.CharField(max_length=255)
def __str__(self):
return self.title
class Topic_field(models.Model):
choose_topic = models.ForeignKey(Create_topic,on_delete=models.CASCADE)
field = models.CharField(max_length=255)
def __str__(self):
return f"{self.choose_topic}-{self.field}"
please guide me through this!