How to send a variable from javascript to View in django

Question

I am using Django

I have a template that contain a form and the users can generate a div i called it "teamcard" as much as they need. after that they will send the form with all the "teamcard" information to view. The problem is that I can't send the count of the generated form from javascript to the view, because I need a for loop in view to save all the "TeamCard" in database. please inform me how to send the counter from javascript to view here are my codes:

var counter = 0;
function member_card()
{
 counter += 1;
 document.getElementById('name').setAttribute('name', 'name'+counter);
 document.getElementById('job').setAttribute('name', 'job'+counter);
 document.getElementById('explain').setAttribute('name', 'explain'+counter);
 document.getElementById('linkedin').setAttribute('name', 'linkedin'+counter);
 document.getElementById('gendermale').setAttribute('name', 'gender'+counter);
 document.getElementById('genderfemale').setAttribute('name', 'gender'+counter);
 
 var newFields = document.getElementById('teamform').cloneNode(true);
 newFields.id = '';
 newFields.style.display = 'block';
 var newField = newFields.childNodes;
 for (var i=0;i<newField.length;i++) {
 var theName = newField[i].name;
		if (theName)
			newField[i].name = theName + counter;
 }
 var insertHere = document.getElementById('formhere');
	insertHere.parentNode.insertBefore(newFields,insertHere);
 
}
window.onload = member_card;
function count() {
 return counter;
}

<form id="form1" runat="server" action="{% url 'landingpages:registerfinal' s_id.id %}"
 method="post">
 {% csrf_token %}
 <div name="membercard" class="row">
 <div id="teamform" class="col-md-4" style="display: none">
 <!--
 <div name="imageholder" class="row tm-image-holder">
 <div class="col-md-12" style="text-align: center">
 <img id="myimg" style="height: 200px;text-align: center;">
 </div>
 </div>
 <input id="photoinput" type="file" class="btn btn-block btn-lg btn-primary inout-margin
 mybut">
 -->
 <input id="name" name="name" type="text" class="add-input input-margin"
 placeholder="Name, Mohammad, ... *">
 <input id="job" name="job" type="text" class="add-input input-margin"
 placeholder="Job, Developer, Designer, ... *">
 <input id="linkedin" name="linkedin" type="text" class="add-input input-margin"
 placeholder="linkedin.com/Me">
 <textarea id="explain" name="explain" class="add-textarea input-margin" rows="4"
 placeholder="Explain this member in 2 to 4 lines *"></textarea>
 <input type="radio" id="gendermale" name="gender" value="male"> Male
 <input type="radio" id="genderfemale" name="gender" value="female"> Female
 </div>
 <span id="formhere"></span>
 </div>
 <div name="addform" class="row input-field">
 <div class="col-md-12" style="text-align: left">
 <a onclick="member_card()">+ Add Team Member</a>
 </div>
 </div>
 <div class="row">
 <input type="submit" name="membersubmit" value="Next Step" class="btn btn-primary mybtn3">
 </div>
 </form>

• dquinonez: A way to do it could be, process the values in JavaScript and then make a ajax call to the view and send the data. For example, use JQuery.post() api.jquery.com/jquery.post
• dquinonez: If you have multiple forms, you should have a normal button (not a submit button per form) and create a click event in JQuery to process all the forms.

Answer 1

Try something like this: Remember that you can't have DOM elements with same Ids, so when you generate the second form each fields should have their unique id.

HTML

<form id="form1">
 <input id="name1" type="text" value="hola1"/> 
</form>
<form id="form2">
 <input id="name2" type="text" value="hola2"/> 
</form>
<form id="form3">
 <input id="name3" type="text" value="hola3"/> 
</form>
<button id="mySubmitButton">submit</button>

JQUERY

$(function(){
 $('#mySubmitButton').on('click', function(){
 // for each form in your html you can process then and save the information in an object 
 var form_data = {}
 $("form").each(function() {
 var input_id = $(this).find('input').attr('id');
 var input_value = $(this).find('input').val();
 form_data[input_id] = input_value;
 });
 console.log(form_data);
 $.post( "your django view url", {data: form_data}, function( data ) {
 // maybe show a success or fail message accordantly
 });
 });
});