单击函数不使用 append() 函数附加 HTML 块

Question

我试图在点击时再次附加相同的代码。我的“education_wrap”类现在是空的。除此之外，我现在刚刚添加了内联 CSS。var max_fields = 5; //maximum input boxes allowedvar wrapper = $(".education_wrap"); //Fields wrappervar add_button = $("#add_education"); //Add button ID    $(add_button).click(function(e){    e.preventDefault();    var total_fields = wrapper[0].childNodes.length;    if(total_fields < max_fields){        $(wrapper).append('<p style="font-weight:bold;">Institute Name<span class="required">*</span></p><div class="item"><input type="text" id="institute" name="institute" placeholder="Institute Name" required/></div><p style="font-weight:bold;">Degree Name<span class="required">*</span></p><div class="item"><input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/></div><p style="font-weight:bold;">From<span class="required">*</span></p><div class="item"><input type="date" id="from_date" name="from_date" value="2020-07-22" required/></div><p style="font-weight:bold;">To<span class="required">*</span></p><div class="item">                    <input type="date" id="to_date" name="to_date" value="2020-07-22" required/></div></div>'); //add input box      }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form><h3 style="font-weight: bold;">Education</h3>        <div class="education_wrap">        <p style="font-weight:bold;">Institute Name<span class="required">*</span></p>          <div>                                <input type="text" id="institute" name="institute" placeholder="Institute Name" required/>          </div>另外，我无法理解如何使用 POST 方法一次提交多组信息。请指导。

Answer 1

var max_fields = 5; //maximum input boxes allowed

var wrapper = $(".education_wrap"); //Fields wrapper

var add_button = $("#add_education"); //Add button ID

$(add_button).click(function(e) {

  var total_fields = wrapper[0].childNodes.length;

  alert(total_fields < max_fields);

  //if (total_fields < max_fields) { // this condition returns false that's why it creates issue

    $(wrapper).append('<p style="font-weight:bold;">Institute Name<span class="required">*</span></p><div class="item"><input type="text" id="institute" name="institute" placeholder="Institute Name" required/></div><p style="font-weight:bold;">Degree Name<span class="required">*</span></p><div class="item"><input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/></div><p style="font-weight:bold;">From<span class="required">*</span></p><div class="item"><input type="date" id="from_date" name="from_date" value="2020-07-22" required/></div><p style="font-weight:bold;">To<span class="required">*</span></p><div class="item">                    <input type="date" id="to_date" name="to_date" value="2020-07-22" required/></div></div>'); //add input box

  //}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

  <h3 style="font-weight: bold;">Education</h3>

  <div class="education_wrap">

    <p style="font-weight:bold;">Institute Name<span class="required">*</span></p>

    <div>

      <input type="text" id="institute" name="institute" placeholder="Institute Name" required/>

    </div>

    <p style="font-weight:bold;">Degree Name<span class="required">*</span></p>

    <div>

      <input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/>

    </div>

    <p style="font-weight:bold;">From<span class="required">*</span></p>

    <div>

      <input type="date" id="from_date" name="from_date" value="2020-07-22" required/>

    </div>

    <p style="font-weight:bold;">To<span class="required">*</span></p>

    <div>

      <input type="date" id="to_date" name="to_date" value="2020-07-22" required/>

    </div>

  </div>

  <div style="margin-top:20px;">

    <button type="submit" id="add_education">Add Another Education</button>

  </div>

</form>

注意：- 您的代码中有一个小错误。有一个 if 条件返回一个假值，这就是为什么代码块没有被执行的原因。

Answer 2

您的代码中有很多问题，请遵循以下事项：

1. if(total_fields < max_fields){在这里您的条件变得错误，因此不会append开始任何过程

2. 使用type="button"而不是submit

3. 使用单独的按钮进行追加html和submit表单

如何使用 POST 提交多组信息

使用输入名称作为数组<input type="date" id="from_date" name="from_date[]" value="2020-07-22" required/>

因为这里重复所以使用classes而不是这里idid="from_date"