亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單擊函數不使用 append() 函數附加 HTML 塊

單擊函數不使用 append() 函數附加 HTML 塊

HUH函數 2023-06-15 09:37:11
我試圖在點擊時再次附加相同的代碼。我的“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 方法一次提交多組信息。請指導。
查看完整描述

2 回答

?
慕桂英546537

TA貢獻1848條經驗 獲得超10個贊

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 條件返回一個假值,這就是為什么代碼塊沒有被執行的原因。



查看完整回答
反對 回復 2023-06-15
?
慕森卡

TA貢獻1806條經驗 獲得超8個贊

您的代碼中有很多問題,請遵循以下事項:

1. if(total_fields < max_fields){在這里您的條件變得錯誤,因此不會append開始任何過程

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

3. 使用單獨的按鈕進行追加htmlsubmit表單

如何使用 POST 提交多組信息

使用輸入名稱作為數組<input type="date" id="from_date" name="from_date[]" value="2020-07-22" required/>

因為這里重復所以使用classes而不是這里idid="from_date"


查看完整回答
反對 回復 2023-06-15
  • 2 回答
  • 0 關注
  • 151 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號