ทำปุ่มเพิ่ม ลด ตัวเลขใน textbox แต่วา่ต้องการกำหนด ให้กดเพิ่มได้แค่ 5 และกดลบได้เเค่ 0 ห้ามให้ติดลบ
หลักการ
Date :
2014-01-29 16:56:11By :
mangkunzo
ตอนนี้ติดอยู่ที่ว่า หลังจากที่กดปุ่มเพิ่ม หรือ ลบ ค่ามันจะไปทั้งแถวค่ะ <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// This button will increment the value
$('.qtyplus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal )&& currentVal < 5) {
// Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(5);
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
});
</script>
</head>
<body>
<form id='myform' action="save_estimate.php?sID=<?=$_GET["sID"];?>" method="post" name="form1" >
<table width="900" border="1" align="center" cellpadding="0" cellspacing="0">
<tr align="center" id="three">
<td width="50" height="37"><b>#</b></td>
<td width="120" align="center"><b>รหัสอะไหล่</b></td>
<td width="241" align="center"><b>รายการอะไหล่</b></td>
<td width="103" align="center"><b>เบิก/ทำสี</b></td>
<td width="113" align="center"><b>สาเหตุที่เบิก</b></td>
<td width="61" align="center"><b>ราคา</b></td>
<td width="121" align="center"><b>จำนวน</b></td>
<td width="73" align="center"><b>ราคารวม</b></td>
</tr>
<?
$x=0;
while($objResult = mysql_fetch_array($objQuery))
{
<tr bgcolor="<?=$bg;?>">
<td height="39" align="center"><?=$x;?><input type="hidden" name="idno[<?=$x-1;?>]" id="idno[<?=$x-1;?>]" value="<?=$x;?>"></td>
<td align="left"><?=$sp_code?></td>
<td align="left"><?=$sp_name?></td>
<input name="sp_name[<?=$x;?>]" type="hidden" value="<?=$sp_name;?>" />
<input name="sp_code[<?=$x;?>]" type="hidden" value="<?=$sp_code;?>" />
<input name="price[<?=$x;?>]" type="hidden" value="<?=$price;?>" />
<input name="group_no" type="hidden" value="<?=$group_no;?>" />
<input name="brand" type="hidden" value="<?=$brand;?>" />
<input name="class" type="hidden" value="<?=$class;?>" />
<input name="type" type="hidden" value="<?=$type;?>" />
<input name="strno" type="hidden" value="<?=$_GET["sID"];?>" />
<td align="center">
<div id="radio-demo">
<input type="checkbox" name="chk_take[<?=$x;?>]" id="chk_take<?=$x;?>_1" value="1"
onClick="javaScript:if(this.checked)
{
document.form1.total<?=$x;?>.disabled=false;
document.form1.price<?=$x;?>.disabled=false;
document.form1.take<?=$x;?>.disabled=false;
}" >
<label for="chk_take<?=$x;?>_1">เบิก</label>
<input type="checkbox" name="chk_take[<?=$x;?>]" id="chk_take<?=$x;?>_2" value="2"
onClick="javaScript:if(this.checked)
{
document.form1.total<?=$x;?>.disabled=true;
document.form1.price<?=$x;?>.disabled=true;
document.form1.take<?=$x;?>.disabled=true;
}">
<label for="chk_take<?=$x;?>_2">ทำสี</label>
</div>
</td>
<td align="center">
<div id="radio-demo">
<input type="radio" name="cause_take[<?=$x;?>]" id="cause_take<?=$x;?>_1" value="1"/>
<label for="cause_take<?=$x;?>_1">ชำรุด</label>
<input type="radio" name="cause_take[<?=$x;?>]" id="cause_take<?=$x;?>_2" value="2"/>
<label for="cause_take<?=$x;?>_2">ไม่มี</label>
</div>
</td>
<td align="center">
<?=number_format($price, 2, '.', ', ');?>
<input type="hidden" name="price<?=$x;?>" value="<?=number_format($price, 2, '.', ', ');?>" size="8" >
</td>
<td align="center">
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' size="3" />
<input type='button' value='+' class='qtyplus' field='quantity' />
</td>
<td align="center"><input type="text" name="total<?=$x;?>" id="total<?=$x;?>" value="0" readonly size="5"></td>
</tr>
<? } ?>
<tr bgcolor="#f0e79b">
<td height="33" colspan="6" align="center"><b>ราคารวม (บาท)</b></td>
<td><input type="text" name="sum" id="sum" readonly size="8"> </td>
</tr>
<tr>
<td colspan="7">
<input type="hidden" name="hdnMaxLine" value="0">
<input type="hidden" name="count" value="<?=$x;?>" />
<input type="submit" id="submit" value="บันทึกข้อมูล" style="width:75px; height:30px;"/>
</td>
</tr>
</table>
</form>
</div>
</body>
ประวัติการแก้ไข
Date :
2014-01-30 15:35:23By :
PALM26
ลองดูครับ http://jsfiddle.net/cvNTW/ <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// This button will increment the value
$('.qtyplus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
var fieldName = $(this).prev();
// Get its current value
var currentVal = parseInt(fieldName.val());
// If is not undefined
if (!isNaN(currentVal )&& currentVal < 5) {
// Increment
fieldName.val(currentVal + 1);
} else {
// Otherwise put a 0 there
fieldName.val(5);
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
var fieldName = $(this).next();
// Get its current value
var currentVal = parseInt(fieldName.val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
fieldName.val(currentVal - 1);
} else {
// Otherwise put a 0 there
fieldName.val(0);
}
});
});
</script>
<form id='myform' method='POST' action='#'>
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' />
<input type='button' value='+' class='qtyplus' field='quantity' /><br />
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' />
<input type='button' value='+' class='qtyplus' field='quantity' /><br />
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' />
<input type='button' value='+' class='qtyplus' field='quantity' />
</form>
Date :
2014-01-30 15:52:53By :
sakuraei
Server 00
Load balance : Server 00
