Wie eine Variable von Javascript senden in django zum Ansehen

Question

Ich verwende Django

Ich habe eine Vorlage, die eine Form und die Benutzer enthalten können erzeugen ein div ich es, wie sie brauchen „Teamcard“ so viel genannt. Danach senden sie das Formular mit allen "Teamcard" Informationen zur Ansicht. Das Problem ist, dass ich die Zählung des generierten Formulars nicht von Javascript an die Ansicht senden kann, da ich eine For-Schleife brauche, um alle "TeamCard" in der Datenbank zu speichern. Bitte informieren Sie mich, wie der Zähler von Javascript senden hier, um meine Codes sind:

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; 
 
\t \t if (theName) 
 
\t \t \t newField[i].name = theName + counter; 
 
    } 
 
    var insertHere = document.getElementById('formhere'); 
 
\t 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>

Answer 1

so etwas wie dieses Versuchen: Denken Sie daran, dass Sie nicht DOM-Elemente mit gleichen Ids haben kann, Wenn Sie also das zweite Formular generieren, sollten jedes Feld seine eindeutige ID haben.

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 
    }); 

    }); 


});