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>
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
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.