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

Question

我试图在点击时再次附加相同的代码。我的“education_wrap”类暂时为空。除此之外，我现在刚刚添加了内联 CSS。

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){
    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>

        <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 id="add_education">Add Another Education</button>
        </div></form>

另外，我不知道如何一次使用 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 条件会返回一个 false 值，这就是不执行代码块的原因。

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而不是id，因为这里重复id="from_date"