如何從JavaScript發送變量在Django

Question

查看我使用Django

我有一個包含一個形式和用戶可以生成一個div我把它叫做「teamcard」多，因爲他們需要一個模板。之後他們會發送帶有所有「團隊卡」信息的表單進行查看。 問題是我無法將生成的表單的計數從javascript發送到視圖，因爲我需要一個for循環來保存數據庫中的所有「TeamCard」。 請告訴我如何從JavaScript發送櫃檯這裏查看 是我的代碼：

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

嘗試是這樣的：請記住，你不能有相同ID的DOM元素，所以當你生成第二個表單時，每個字段應該有其唯一的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 
    }); 

    }); 


});