单击函数不使用 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>

另外，我无法理解如何使用 POST 方法一次提交多组信息。请指导。

Answer 1

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) {&nbsp; var total_fields = wrapper[0].childNodes.length;&nbsp; alert(total_fields < max_fields);&nbsp; //if (total_fields < max_fields) { // this condition returns false that's why it creates issue&nbsp; &nbsp; $(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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" id="to_date" name="to_date" value="2020-07-22" required/></div></div>'); //add input box&nbsp; //}});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form>&nbsp; <h3 style="font-weight: bold;">Education</h3>&nbsp; <div class="education_wrap">&nbsp; &nbsp; <p style="font-weight:bold;">Institute Name<span class="required">*</span></p>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input type="text" id="institute" name="institute" placeholder="Institute Name" required/>&nbsp; &nbsp; </div>&nbsp; &nbsp; <p style="font-weight:bold;">Degree Name<span class="required">*</span></p>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/>&nbsp; &nbsp; </div>&nbsp; &nbsp; <p style="font-weight:bold;">From<span class="required">*</span></p>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input type="date" id="from_date" name="from_date" value="2020-07-22" required/>&nbsp; &nbsp; </div>&nbsp; &nbsp; <p style="font-weight:bold;">To<span class="required">*</span></p>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input type="date" id="to_date" name="to_date" value="2020-07-22" required/>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div style="margin-top:20px;">&nbsp; &nbsp; <button type="submit" id="add_education">Add Another Education</button>&nbsp; </div></form>注意：- 您的代码中有一个小错误。有一个 if 条件返回一个假值，这就是为什么代码块没有被执行的原因。

Answer 2

您的代码中有很多问题，请遵循以下事项：1.&nbsp;if(total_fields < max_fields){在这里您的条件变得错误，因此不会append开始任何过程2.&nbsp;使用type="button"而不是submit3.&nbsp;使用单独的按钮进行追加html和submit表单如何使用 POST 提交多组信息使用输入名称作为数组<input type="date" id="from_date" name="from_date[]" value="2020-07-22" required/>因为这里重复所以使用classes而不是这里idid="from_date"