Question

我正在使用Django

我有一个包含表单的模板，用户可以根据需要生成一个名为“teamcard”的div。之后，他们将发送包含所有“团队卡”信息的表格进行查看。问题是我无法将生成的表单的计数从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;
		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>

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

  });


});

如何将变量从javascript发送到django中的View

1 个答案: