11548 sujets

JavaScript, DOM et API Web HTML5

Checkbox / bouton grisé : valeur Null ou n'est pas un objet

Tout est dans le titre.
J'ai utilisé un script sommes toutes assez simple pour faire en sorte que le bouton ne soit pas cliquable tant que la checkbox n'est pas cochée.

Le problème étant que le bouton reste grisé même lorsque je coche la checkbox...

document.donnee.agree' a la valeur Null ou n'est pas un objet.


Niveau code, dans le header : 

<script language="javascript" type="text/javascript">
function Agree(Terms)
{
checkobj = Terms;
if(document.donnee.agree.checked==false) {
document.donnee.btn_valid.disabled = true;
} else {
document.donnee.btn_valid.disabled = false;
}
}
</script>


Ensuite dans ma page :

<form name="donnee" action="Agree" method="post">
<input name="agree" type="checkbox" onClick="Agree(this)"> J'accepte les Termes et Conditions <br>
<p style="font-size:13px;"><a href="toto.html"  target="_blanck"><i>Conditions g&eacute;n&eacute;rales de vente</i></a></p>
<input name="btn_valid" type="submit" value="Envoyer ma commande" onclick="self.location.href='envoie.php'" disabled="true">
</form>


Quand je regarde l'erreur indiquée par IE, cela m'indique que l'erreur se situe au premier caractère de cette ligne 
<script language="javascript" type="text/javascript">


Par contre il suffit que je mette ca pour que cela fonctionne sans problème sur tous les navigateurs :

<form name="donnee" action="Agree" method="post">
<input name="agree" type="checkbox" onClick="Agree(this)">
</form>
<form name="donnee" action="Agree" method="post">
<input name="agree" type="checkbox" onClick="Agree(this)"> J'accepte les Termes et Conditions <br>
<p style="font-size:13px;"><a href="toto.html"  target="_blanck"><i>Conditions g&eacute;n&eacute;rales de vente</i></a></p>
<input name="btn_valid" type="submit" value="Envoyer ma commande" onclick="self.location.href='envoie.php'" disabled="true">
</form>


Z'avez pas une idée de la solution ?
A noter que je n'utilise pas d'autre fonction JS dans ma page (HTML/php).
J'ai essayé d'autres petits scripts trouvés sur le web et le problème est exactement le même à chaque fois...
Salut,

plusieurs problèmes dans ton code :

* il faut écrire
<script type="text/javascript">
* si le JavaScript est désactivé il sera impossible de soumettre le formulaire donc il faut toujours renseigner l'attribut action de l'élément FORM.

* même si le JavaScript est activé on ne déclenche pas une action sur l'évènement onclick du submit (car il n'est pas déclenché si on navigue au clavier) mais sur l'évènement onsubmit de l'élément FORM.

* il est préconisé d'associer les élément INPUT à des éléments LABEL (cf. http://openweb.eu.org/articles/formulaire_accessible ).

Ce qui donne (exemple simplifié) :
<body>
<form action="envoi.php" method="post">
	<p>
		<input name="agree" id="agree" type="checkbox" />
		<label for="agree">J'accepte les Termes et Conditions</label><br />
		(lire les <a href="toto.html">Conditions générales de vente</a>)
	</p>
	<p>
		<input type="submit" id="submit" value="Envoyer ma commande" />
	</p>
</form>
<script type="text/javascript">
	function toggleSubmit() {
		document.getElementById('submit').disabled = !document.getElementById('agree').checked;
	}
	document.getElementById('agree').onclick = toggleSubmit;
	toggleSubmit(); // Déclenchement au premier affichage
</script>
</body>
En complément lire Comment bien coder en JavaScript.
Modifié par Heyoan (29 Aug 2010 - 15:48)
Merci beaucoup ! Je suis vraiment une chèvre en Js dsl ^^
Je regarde les liens que tu as mis, merci pour ton aide, les liens semblent hyper claires.

Bon dimanche Smiley smile
Bonjour, voilà THE solution qu'il me fallait, sauf que je suis sérieusement débutante et que je n'arrive pas à me dépatouiller

j'ai :

{% if cart.items != blank %}

<div id="cart-content">
<form id="cart-form" method="post" action="/cart">
<table id="cart-table">
<colgroup>
<col id="col-item" />
<col id="col-price" />
<col id="col-qty" />
<col id="col-total" />
<col id="col-options" />
</colgroup>
<thead id="cart-head">
<tr>
<th id="head-item" scope="col"><span>Produits</span></th>
<th id="head-price" scope="col"><span>Prix</span></th>
<th id="head-qty" scope="col"><span>Qtté</span></th>
<th id="head-total" scope="col"><span>Total</span></th>
<th id="head-options" scope="col"><span>Options</span></th>
</tr>
</thead>
<tbody id="cart-body">
{% for item in cart.items %}
<tr id="item-{{ item.id }}" class="{% cycle 'row', 'row-alt' %}">

<td class="item-name">
<img class="item-image" width="50" height="50" src="{{ item.product.image | product_image_url size:"thumb" }}" />
<a href="{{ item.product.url }}"><span>{{ item.name }}</span></a>
</td>

<td class="item-price"><span>{{ item.unit_price | money_with_sign }}</span></td>
<td class="item-qty">{{ item | item_quantity_input }}</td>
<td class="item-total"><span>{{ item.price | money_with_sign }}</span></td>
<td class="item-options"><a href="#" onclick="Store.removeItem({{ item.id }}); return false" class="remove-btn" title="Remove item"><span>Supprimer</span></a></td>
</tr>
{% endfor %}
</tbody>
</table>

<div id="cart-footer">
<a href="http://www.amedeau.com/products"><img src="http://savonnerie.amedeau.com/public/tweet.png"/></a>

<div class="cart-update">
<button id="update-btn-footer" class="update-btn" name="update" type="submit" title="Calculer le total"><span>Calculer le total</span></button>
</div>


{% if cart.shipping.strict %}
<div class="cart-shipping">
<label for="country"><span>Shipping to:</span></label> {{ store.country | country_select }}
</div>
{% endif %}

{% if cart.discount.enabled %}
<div class="cart-discount">
{% if cart.discount.pending %}
<label>Discount code (optional): {{ cart.discount | discount_code_input }}</label>
{% else %}
<p><span class="discount">Discount {{ cart.discount.percent }}%: </span><span class="total-discount">-{{ cart.discount.amount | money_with_sign }}</span></p>
{% endif %}
</div>
{% endif %}

<div class="cart-total">
{% if cart.shipping.enabled %}
<div id="cart-shipping-tax">
{% unless cart.shipping.pending %}<p class="shipping-amount"><span class="shipping">Shipping: </span><span class="total-shipping">{{ cart.shipping.amount | money_with_sign }}</span></p>{% endunless %}
</div>
<h3><span class="total">Total: </span><span class="total-price">{{ cart.total | money_with_sign }}</span></h3>
{% else %}
<h3><span class="total">Total: </span><span class="total-price">{{ cart.price | money_with_sign }}</span></h3>
<p><span>+ frais de port</span></p>
{% endif %}
</div>
<div class="cart-options">
<button class="checkout-btn" type="submit" title="Commander" onclick="Store.checkout(); return false"><span>Commander</span></button>
</div>

</div>
</form>
</div>

{% else %}

<p class="alert-noitems"><span>Mon panier est vide <a href="/"> . . . . commander </a></span></p>

{% endif %}

Si j'ai bien compris, mon bouton commander, c'est le code en rouge, mais comment faire pour lui appliquer ?

<body>
<form action="envoi.php" method="post">
<p>
<input name="agree" id="agree" type="checkbox" />
<label for="agree">J'accepte les Termes et Conditions</label><br />
(lire les <a href="toto.html">Conditions générales de vente</a>)
</p>
<p>
<input type="submit" id="submit" value="Envoyer ma commande" />
</p>
</form>
<script type="text/javascript">
function toggleSubmit() {
document.getElementById('submit').disabled = !document.getElementById('agree').checked;
}
document.getElementById('agree').onclick = toggleSubmit;
toggleSubmit(); // Déclenchement au premier affichage
</script>
</body>

Bon j'arrive tard et ne sait pas si je vais avoir une réponse.
Si d'aventure quelqu'un passe par là, merci ;o)
Sujet clos
Aller à