I have this problem with jquery_jeditable to cotrol max number by precedent input. I want the second value minor of the precedent value or equal, but I don't understand how capture the id of current "field" (this.id) for to build the id of precedent number and to read its value. thanks for any help Simple html:
$('.editable-text').editable('save.php',{
id:'pk',
type:'number',
tooltip:'____',
placeholder:'Grams',
max:2000,
width:50
});
$('.editable-text2').editable('save.php',{
id:'pk',
type:'number',
tooltip:'____',
placeholder:'Grams',
max:function(id){return $('#'+id+'_wInit').text()},
width:50
});
console.log('precedent value first row: '+$('#1_wEnd_wInit').text())
console.log('precedent value second row: '+$('#2_wEnd_wInit').text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.17/jquery.jeditable.min.js"></script>
<span style="display: inline-block;width:80px;">Precedent</span>
<span style="display: inline-block;width:80px;">Actual</span>
<br/>
<span style="display: inline-block;width:80px;" id="1_wEnd_wInit" class="editable-text" >1000</span>
<span style="display: inline-block;width:80px;" id="1_wEnd" class="editable-text2">60</span>
<br/>
<span style="display: inline-block;width:80px;" id="2_wEnd_wInit" class="editable-text" >500</span>
<span style="display: inline-block;width:80px;" id="2_wEnd" class="editable-text2" >20</span>
Alternative way is using event.currentTarget
this will give reference to current element which is clicked
i.e : editable-text2
then simply use .attr("id")
to get id and set same to max
.
Demo Code :
$('.editable-text').editable('save.php', {
id: 'pk',
type: 'number',
tooltip: '____',
placeholder: 'Grams',
max: 2000,
width: 50
});
$(".editable-text2").editable('save.php', {
id: 'pk',
type: 'number',
tooltip: '____',
placeholder: 'Grams',
max: function() {
//use currenttarget
var id = $(event.currentTarget).attr("id")
console.log($(event.currentTarget).attr("id"))
console.log($('#' + id + '_wInit').text())
return $('#' + id + '_wInit').text()
},
width: 50
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.17/jquery.jeditable.min.js"></script>
<span style="display: inline-block;width:80px;">Precedent</span>
<span style="display: inline-block;width:80px;">Actual</span>
<br/>
<span style="display: inline-block;width:80px;" id="1_wEnd_wInit" class="editable-text">1000</span>
<span style="display: inline-block;width:80px;" id="1_wEnd" class="editable-text2">60</span>
<br/>
<span style="display: inline-block;width:80px;" id="2_wEnd_wInit" class="editable-text">500</span>
<span style="display: inline-block;width:80px;" id="2_wEnd" class="editable-text2">20</span>