増加私はボタンの追加]をクリックすると、クリックトグル

Question

は、私は、何も自動的に増加シリアルで立ち往生していないのですシリアル番号は、これは、新しいフィールドを追加している、しかし、シリアル番号は..あなたたちは私を助けることができる増加しなければならない

<div class="input-group"> 
    <input type="text" name="sno[]" class="form-control" placeholder="S. No." value="1"/> 
</div> 
<span class='toggler date'> 
    <a class="btn btn-condensed btn-sm"> 
     <div style="font-size:16px"> 
      <i class="fa fa-plus-square"></i> 
     </div> 
    </a> 
</span> 
<span class='toggler date' style='display:none;'> 
    <a class="btn btn-condensed btn-sm"> 
     <div style="font-size:16px"> 
      <i class="fa fa-plus-square"></i> 
     </div> 
    </a> 
</span> 

そして、私はボタンを追加クリックすると、このHTMLが

<div class='toggled_content1' style="padding-bottom:15px"></div> 
<div class='toggled_content' style='display:none;'> 
    <div class="form-group"> 
     <div class="col-md-2 col-xs-12"> 
      <div class="input-group"> 
       <input type="text" name="sno[]" class="form-control" placeholder="S. No."/> 
      </div> 
     </div> 
    </div> 
</div> 

を追加するとJavaScriptを切り替えます、

jQuery(document).ready(function($){ 
    $('.toggler').on('click',function(){ 
     var fff=$(".toggled_content").html(); 
     $(".toggled_content1").append(fff); 
    }); 
}); 

でき君たち追加ボタンをクリックすると、私の手助けをします。

Answer 1

これを試してください。

$(function() { 

    $('.toggler').on('click', function() { 

    var fff = $(".toggled_content").html(); 

    if (!isNaN(fff)) { 

     console.log(parseInt(fff,10) + 1); 
     $(".toggled_content1").html(parseInt(fff, 10) + 1); 
    } 
}); 

}); 

Answer 2

次の番号を取得するにはカウンタを保持する必要があります。 1つのアプローチは、既に挿入された.form-group要素の数を取得し、1を追加して次のSを取得することです。あなたがいないインクリメントS.を使いたいん

$(document).ready(function($){ 
 
    $('.toggler').on('click',function(){ 
 
     var newSNum = $(".toggled_content1 .form-group").length + 1; 
 
     var fff = $(".toggled_content").html(); 
 
     $(".toggled_content1").append(fff); 
 
     $(".toggled_content1 .form-group").eq(newSNum - 1).find("input").val(newSNum); 
 
    }); 
 
});

.input-group 
 
{ 
 
    clear: both; 
 
    margin: 10px auto; 
 
} 
 

 
.toggler 
 
{ 
 
    border: thin solid red; 
 
    height: 50px; 
 
    width: 50px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="input-group"> 
 
    <input type="text" name="sno[]" class="form-control" placeholder="S. No." value="1"/> 
 
</div> 
 

 

 
<span class='toggler date'> 
 
    <a class="btn btn-condensed btn-sm"> 
 
     <div style="font-size:16px"> 
 
      <i class="fa fa-plus-square"></i> 
 
     </div> 
 
    </a> 
 
</span> 
 
<span class='toggler date' style='display:none;'> 
 
    <a class="btn btn-condensed btn-sm"> 
 
     <div style="font-size:16px"> 
 
      <i class="fa fa-plus-square"></i> 
 
     </div> 
 
    </a> 
 
</span> 
 

 
<div class='toggled_content1' style="padding-bottom:15px"></div> 
 

 

 
<div class='toggled_content' style='display:none;'> 
 
    <div class="form-group"> 
 
     <div class="col-md-2 col-xs-12"> 
 
      <div class="input-group"> 
 
       <input type="text" name="sno[]" class="form-control" placeholder="S. No."/> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>