2014-08-28 210 views
0

因此,我正在为一个学校项目制定一个计算器,这个想法是,您可以输入数字并自动生成一个价格。当我使用滑块时它工作正常,但我希望能够输入自己的数字。计算器的最小值和最大值没有提交

如何让计算器检查表单,如果didgits超过最大值和最小值而没有提交按钮。比如,如果我将最大值设置为200,那么例如,您不能填写230。它可以与箭头按钮一起工作,但是当你自己填写时,你可以填写任何你想要的内容。

它需要检查某种方式,但我不知道如何,看看代码。

$(".priceslider").change(function() { 

     var width = $("#width").val(); 
     var height = $("#height").val(); 
     var number = $("#number").val(); 

     var sale = (110 - (10 * number))/100; 

     var pricex = ((width * height/100) * sale) * number; 

     if (pricex < 30) { 
      var price = 30; 
     } else { 
      var price = pricex; 
     } 

     $("#txtWidth").text(width + ' cm'); 
     $("#txtHeight").text(height + ' cm'); 
     $("#txtNumber").text(number + ' st'); 
     $("#txtPrice").text('$' + price.toFixed(0)); 
    }); 

回答

1

你需要手动限制出界值,如下图所示:

脚本:

if (parseInt($(this).val()) > parseInt($(this).attr("max"))) { 
    $(this).val($(this).attr("max")); 
} else if (parseInt($(this).val()) < parseInt($(this).attr("min"))) { 
    $(this).val($(this).attr("min")); 
} 

Working Demo

0

检查更改事件中的最大值。如果有溢出,除去最后的数字位数

<body> 

<div> 
    <label id="lblBreedte">Breedte:</label> 
    <input class="prijsslider" type="number" id="sliBreedte" value="30" min="30" max="200" /> 
    <label id="txtBreedte">30 cm</label> 
</div> 
<div> 
    <label id="lblHoogte">Hoogte:</label> 
    <input class="prijsslider" type="number" id="sliHoogte" value="61" min="61" max="134" /> 
    <label id="txtHoogte">61 cm</label> 
</div> 
<div> 
    <label id="lblAantal">Aantal:</label> 
    <input class="prijsslider" type="number" id="sliAantal" value="1" min="1" max="4" /> 
    <label id="txtAantal">1 st</label> 
</div> 
<hr /> 
<div> 
    <label id="lblPrijs">Prijs:</label> 
    <label id="txtPrijs">€30</label> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script> 
    $(".prijsslider").change(function() { 

     if (parseInt($(this).val()) > parseInt($(this).attr("max"))) { 

     $(this).val($(this).val().substr(0, strlen($(this).val()) - 1)); 

     } 

     var breedte = $("#sliBreedte").val(); 
     var hoogte = $("#sliHoogte").val(); 
     var aantal = $("#sliAantal").val(); 

     var korting = (110 - (10 * aantal))/100; 

     var prijsx = ((breedte * hoogte/100) * korting) * aantal; 

     if (prijsx < 30) { 
      var prijs = 30; 
     } else { 
      var prijs = prijsx; 
     } 

     $("#txtBreedte").text(breedte + ' cm'); 
     $("#txtHoogte").text(hoogte + ' cm'); 
     $("#txtAantal").text(aantal + ' st'); 
     $("#txtPrijs").text('€' + prijs.toFixed(0)); 
    }); 
</script> 

</body>