當用戶在jquery中按下按鈕時添加更多輸入字段

我是jquery中的新成員，我需要一些幫助。我有用戶輸入標題的模式。當用戶輸入標題時，新div將顯示div包含一個輸入字段或一個addmore按鈕，當用戶點擊addmore按鈕時，新的輸入字段將被打開。我希望用戶在顯示警報消息後添加多達18個文件。當用戶在jquery中按下按鈕時添加更多輸入字段

這裏是我的html代碼： -

enter code here 
<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Add Category</h4> 
     </div> 
     <div class="modal-body"> 
      <h4>Enter Your Title</h4> 
      <input type="text" name="title" class="getvalue"> 
      <button type="submit" class="submitdata"> Submit</button> 
     </div> 

     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div>

和我的jQuery代碼

enter code here 
$(document).ready(function() { 
    var room= 1; 
    $(".submitdata").on('click',function(){ 
     var value= $(".getvalue").val(); 
     $(".submitdata").attr('disabled'); 
     $(".modal-body").after(
      '<br><center><div id="contain"> 
      Choose Your Own service <br> <br> 
      <input type="text" name='+value+'[]> 
      <button type="button" class="addService">Add More</button> 
      </div></center>' 
      ); 
     $(".addService").on('click',function(){ 
       //Please anyone do coding here 
     }); 
    });

感謝INA davance :)

來源

2016-11-10 kunal

嘗試是這樣的：

HTML

<div id="contain"> 
    Choose Your Own service <br> <br> 
    <div> 
    <input type="text" name='+value+'[]> 
    <button type="button" class="addService">Add More</button> 
    </div> 
</div>

$(document).on('click', '.addService', function(){ 
    var html = '<div><input type="text" name="myInput"><button type="button" class="addService">Add More</button></div>'; 
    $(this).parent().append(html); 
});

Working Fiddle

來源

2016-11-10 11:20:23

Mayank感謝您reaply您已經添加工作正常，我想刪除按鈕，而不是添加按鈕的JS。你可以請寫代碼 – kunal

檢查更新的小提琴：https://jsfiddle.net/66bw5u4h/2/ –

謝謝你工作正常。剩下的一件事我想讓用戶不能再添加5個輸入你能不能請再次更新你的小提琴。再次感謝 – kunal

$('.submitdata').on('click',function(){ 
     $(this).before($(this).closest('.getvalue').clone()); 
     $(this).closest('.getvalue').val(''); 
})

來源

2016-11-10 11:37:50

當用戶在jquery中按下按鈕時添加更多輸入字段

回答

相關問題