[英]how to Auto Increment the value in input field (type=text) that is dynamically added on a button click?
I want to have a value in "sr.no." 我想要一个“ sr.no”的值。 field that is auto incremented every time i click on button that adds new clause. 每次单击添加新子句的按钮时,该字段都会自动递增。
html: HTML:
<div id="clauseDiv">
<div class="col-sm-12">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2" for="clause">Clause: </label>
<div class="col-sm-10">
<input type="text" class="form-control clauseHeader" v-bind:id="'clauseHeader-' + clause.contractGroupId"
name="clause" :key="index" v-bind:value="clause.contractGroupName" readonly="readonly"/>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="control-label col-sm-2" for="sequence">Sr.no.: </label>
<div class="col-sm-4">
<input type="text" class="form-control clauseSequence" v-bind:id="'clauseSequence-' + clause.contractGroupId" name="sequence"
:key="index" v-bind:value="clause.sequence" />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label col-sm-1" for="subClause">Subclause: </label>
<div class="col-sm-11">
<div>
<textarea class="form-control subClause" v-bind:id="'subClause-' + clause.contractGroupId"
:key="index" readonly="readonly"></textarea>
</div>
</div>
</div>
</div>
</div>
js: JS:
var clauseHtml = '<div class="col-sm-12" id="clause-'+this.count+'">'+
'<div class="col-sm-6">'+
'<div class="form-group">'+
' <label class="control-label col-sm-2" for="clause">Clause: </label>'+
' <div class="col-sm-10">'+
' <input type="text" class="form-control clauseAddlTermHeader" id="clauseHeader-'+this.count+'" name="clause" />'+
' </div>'+
' </div>'+
'</div>'+
'<div class="col-sm-4">'+
'<div class="form-group">'+
' <label class="control-label col-sm-2" for="sequence">Sr.no: </label>'+
' <div class="col-sm-4">'+
' <input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-'+this.count+'" name="sequence"/>'+
' </div>'+
' </div>'+
' </div>'+
'<div class="col-sm-2">'+
'<div class="form-group">'+
' <button type="button" class="btn btn-danger deleteClause" id="deleteClause-'+this.count+'" v-on:click="deleteClause">Delete</button>'+
' </div>'+
' </div>'+
'<div class="col-sm-12">'+
' <div class="form-group">'+
' <label class="control-label col-sm-1" for="subClause">Subclause: </label>'+
' <div class="col-sm-11">'+
' <textarea class="form-control clauseAddlTermSubClause" id="subClause-'+this.count+'" ></textarea>'+
' </div>'+
' </div>'+
' </div>'+
'</div>';
$('#clauseDiv').append(clauseHtml);
this.count++;
From html, I am adding div which contains 'clause', 'sr.no.' 从html,我要添加div,其中包含“ clause”,“ sr.no”。 and 'subclause' fields. 和“子句”字段。 I have a button, and when clicked on that button the js part gets executed and the div appends and more 'clause', 'sr.no.' 我有一个按钮,当单击该按钮时,将执行js部分,并且div会附加更多“子句”,“ sr.no”。 and 'subclause' fields are added. 和“子句”字段被添加。 I want the newly appended 'sr.no' field to get a value in it that is auto incremented from the previous field. 我希望新添加的“ sr.no”字段中的值从前一个字段开始自动递增。 How do I do that? 我怎么做?
remove this
from this.count
and make the count
as global variable, add value="' + count +'"
to the input and it should be like this 从this.count
删除this
, this.count
count
作为全局变量,将value="' + count +'"
到输入中,它应该像这样
'<input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-' + count + '" name="sequence" value="' + count +'"/>'
Demo: 演示:
var count = 0; $('#addClause').on('click', function() { var clauseHtml = '<div class="col-sm-12" id="clause-' + count + '">' + '<div class="col-sm-6">' + '<div class="form-group">' + ' <label class="control-label col-sm-2" for="clause">Clause: </label>' + ' <div class="col-sm-10">' + ' <input type="text" class="form-control clauseAddlTermHeader" id="clauseHeader-' + count + '" name="clause" />' + ' </div>' + ' </div>' + '</div>' + '<div class="col-sm-4">' + '<div class="form-group">' + ' <label class="control-label col-sm-2" for="sequence">Sr.no: </label>' + ' <div class="col-sm-4">' + ' <input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-' + count + '" name="sequence" value="' + count +'"/>' + ' </div>' + ' </div>' + ' </div>' + '<div class="col-sm-2">' + '<div class="form-group">' + ' <button type="button" class="btn btn-danger deleteClause" id="deleteClause-' + count + '" v-on:click="deleteClause">Delete</button>' + ' </div>' + ' </div>' + '<div class="col-sm-12">' + ' <div class="form-group">' + ' <label class="control-label col-sm-1" for="subClause">Subclause: </label>' + ' <div class="col-sm-11">' + ' <textarea class="form-control clauseAddlTermSubClause" id="subClause-' + count + '" ></textarea>' + ' </div>' + ' </div>' + ' </div>' + '</div>'; $('#clauseDiv').append(clauseHtml); count++; })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="addClause">addCaluse</button> <div id="clauseDiv"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.