2017-08-29 2 views
0

J'ai une table avec mesure - largeur et hauteur (image ci-jointe). La rangée rouge est la largeur et la colonne jaune est la hauteur. Pour la largeur 400 et la hauteur 700 le prix est 1025. La largeur maximale est de 600, et la hauteur maximale est de 900. Je l'ai fait avec des sélections, mais j'ai un problème pour créer des calculs avec des entrées et si l'utilisateur peut écrire des valeurs entre ces chiffres - par exemple, si un client écrit 750 * 450mm, le prix devrait être 1325 car il faut arrondir au prix plus élevé après 700x400.Calculatrice hauteur largeur

jQuery('.calc-btn').click(function(e) { 
 
    e.preventDefault(); 
 
    var pricePerDoor = 725, 
 
    widthInc = 225, 
 
    heightInc = 75, 
 
    oneDoorPrice, 
 
    wert1 = jQuery('#width').prop('selectedIndex') + 1, 
 
    wert2 = jQuery('#height').prop('selectedIndex') + 1, 
 
    oneDoorPrice = (pricePerDoor + (wert1 * widthInc) + (wert2 * heightInc)); 
 
    jQuery('.total').val(oneDoorPrice); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<select id="width"> 
 
<option value="400">400mm</option> 
 
<option value="500">500mm</option> 
 
<option value="600">600mm</option> 
 
</select> 
 
<select id="height"> 
 
<option value="700">700mm</option> 
 
<option value="800">800mm</option> 
 
<option value="900">900mm</option> 
 
</select> 
 
<input type="text" name="total" class="total"> 
 
<input type="submit" class="calc-btn" value="Submit">

image

+0

où est le code que vous avez essayé jusqu'à présent? –

+0

https://jsfiddle.net/wr66dcfo/6/ – alexanderstanchev

+0

Si la réponse ci-dessous vous aide, veuillez marquer comme une réponse –

Répondre

0

Vous pouvez vérifier de la largeur et la hauteur index array du tableau le plus élevé sous forme de nombre le plus proche et attribuer l'index qui vous logique.

for (var i = widthArr.length - 1; i >= 0; i--) { 
    if (widthArr[i] >= wert1) 
     widIndex = i + 1; 
} 

échantillon de travail

jQuery('.calc-btn-input').click(function(e) { 
 
    e.preventDefault(); 
 
    var pricePerDoor = 725, 
 
    widthInc = 225, 
 
    heightInc = 75; 
 

 
    var widthArr = [400, 500, 600]; 
 
    var heightArr = [700, 800, 900]; 
 

 
    var widIndex = widthArr.length; 
 
    var heightIndex = heightArr.length; 
 

 
    var wert1 = parseInt(jQuery('#width_input').val()); 
 
    var wert2 = parseInt(jQuery('#height_input').val()); 
 

 
    for (var i = widthArr.length - 1; i >= 0; i--) { 
 
    if (widthArr[i] >= wert1) 
 
     widIndex = i + 1; 
 
    } 
 

 
    for (var i = heightArr.length - 1; i >= 0; i--) { 
 
    if (heightArr[i] >= wert2) 
 
     heightIndex = i + 1; 
 
    } 
 

 
    var oneDoorPrice = (pricePerDoor + (widIndex * widthInc) + (heightIndex * heightInc)); 
 
    jQuery('.total-input').val(oneDoorPrice); 
 
}); 
 

 
jQuery('.calc-btn').click(function(e) { 
 
    e.preventDefault(); 
 
    var pricePerDoor = 725, 
 
    widthInc = 225, 
 
    heightInc = 75, 
 
    oneDoorPrice, 
 
    wert1 = jQuery('#width').prop('selectedIndex') + 1, 
 
    wert2 = jQuery('#height').prop('selectedIndex') + 1, 
 
    oneDoorPrice = (pricePerDoor + (wert1 * widthInc) + (wert2 * heightInc)); 
 
    jQuery('.total').val(oneDoorPrice); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select id="width"> 
 
    <option value="400">400mm</option> 
 
    <option value="500">500mm</option> 
 
    <option value="600">600mm</option> 
 
</select> 
 
<select id="height"> 
 
    <option value="700">700mm</option> 
 
    <option value="800">800mm</option> 
 
    <option value="900">900mm</option> 
 
</select> 
 

 
<input type="text" name="total" class="total"> 
 
<input type="submit" class="calc-btn" value="Submit"> 
 
<br> 
 
<br> 
 
<input id="width_input"> 
 
<input id="height_input"> 
 

 
<input type="text" name="total" class="total-input"> 
 
<input type="submit" class="calc-btn-input" value="Submit">