J'ai une forme d'asp classique pour ajouter des produits à un site. Le formulaire comporte 3 champs 'Prix', 'Prix de vente' et une case à cocher pour 'En vente'. Ce que j'essaye de faire est, quand un utilisateur entre un «prix» et coche la case «en vente», une certaine javascript compléterait le «prix de vente» avec une valeur qui est «prix» - 10% . Vous vous demandez si quelqu'un peut savoir comment faire cela? : DForm onChange de calcul
Merci.
HTML:
Price:<br>
<input type="text" name="price" id="price"><br>
<br>
Sale price:<br>
<input type="text" name="sale_price" id="sale_price"><br>
<br>
<input type="checkbox" name="on_sale" onchange="calculate_sale_price(this);"> On sale
Javascript:
function calculate_sale_price(checkbox)
{
price = document.getElementById('price');
sale_price = document.getElementById('sale_price');
sale_price.value = checkbox.checked ? price.value * 0.9 : price.value;
}
Si vous voulez prix de vente à être vide si la case est décochée, changer cette ligne:
sale_price.value = checkbox.checked ? price.value * 0.9 : price.value;
à:
sale_price.value = checkbox.checked ? price.value * 0.9 : '';
serait plus facile avec le HTML;), quelque chose comme ça ferait l'affaire:
$('#yourCheckBox').change(function(){
if($("#yourCheckBox option:selected").length){
$('#yourSalePrice').val(
$('#yourPrice') - (($('#yourPrice').val()/100)*10)
);
}
});
Vous pouvez également ajouter un certain contrôle s'il y a une valeur dans le prix avant de calculer quoi que ce soit
J'ai posté une démo sur au: jsbin, sur la base le balisage suivant:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#onSale').change(
function() {
var salePrice = $('#price').val() * 0.9;
$('#salePrice').val(salePrice);
}
);
}
);
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<label for="price">Price:</label>
<input type="text" id="price" name="price" />
<input type="text" name="salePrice" id="salePrice" disabled="disabled" />
<input type="checkbox" name="onSale" id="onSale" />
</fieldset>
</form>
</body>
</html>
Je vous suggère que vous auriez besoin de construire dans la validation pour le prix entré par l'utilisateur (assurez-vous qu'il est un prix numérique, fo r un début). J'ai désactivé le #salePrice afin que les utilisateurs soient moins enclins à entrer des données (bien que ce ne soit pas impossible).
Edité en réponse au commentaire de l'OP.
Pour effacer le champ après la non coche la case utilisateur:
$(document).ready(
function() {
$('#onSale').change(
function() {
if ($('#onSale').is(':checked')) {
var salePrice = $('#price').val() * 0.9;
$('#salePrice').val(salePrice);
}
else {
$('#salePrice').val('');
}
}
);
}
);
Notez le nouveau if/else, et est ici the revised demo
Merci beaucoup. : D Serait-il assez facile de faire en sorte que le champ sale_price soit vide si la case n'est pas cochée, au lieu de mettre le prix? :) – doubleplusgood
Voulez-vous dire vide * avant * la case à cocher est cochée? Ou d'une autre manière? –
Salut David. Comme dans le cas où ils décochent à nouveau la case à cocher, le champ du prix de vente pourrait revenir à vide. – doubleplusgood
Comme d'autres l'ont montré par leur code, vous pouvez le faire en ajoutant un écouteur d'événement à la case à cocher. C'est propre et n'obstrue pas le code du formulaire ASP. Depuis que vous avez mis jQuery, voici mon point de vue; il y a bien sûr d'autres solutions mais je me sens comme ça une bonne combinaison de concis et lisibles. Bonne chance!
$('#chkbox').bind('click', function(evt){
var sale = (evt.target.checked);
var price = $('#fullprice').val();
var disc = (+price > 0 && sale) ? price*.9 : ''
$('#saleprice').val(disc);
});
Merci beaucoup. : D Serait-il assez facile de faire en sorte que le champ sale_price soit vide si la case n'est pas cochée, au lieu de mettre le prix? :) – doubleplusgood
Oui, il est facile de le rendre vide si la case n'est pas cochée. Voir ma réponse mise à jour ci-dessus. – Mischa
vous voudrez peut-être ajouter une validation au cas où l'utilisateur met quelque chose d'idiot comme un mot. Probablement le moyen le plus facile est de faire quelque chose comme (+ prix> 0 && checkbox.checked) – cm2