Bonjour,
j'ai créé un formulaire avec 2 boutons radio, donc on peut choisir soit l'un ou l'autre.
Le soucis c'est que je ne sais pas comment faire qu'au chargement de ma page, les boutons ne soient pas cocher par défaut.
HELP ME , pleaseeeeeeeee ????
cordialement,
11 réponses
Normalement aucun des deux ne devrait être check par défaut, mis à part si tu précises l'attribut checked.
Beh tu as un attribut checked="checked" sur le premier input, c'est normal qu'il soit checked.
$(document).ready(function () {
$("input[name='client']").removeAttr('checked');
// OU
$("input[name='client']").prop('checked', false);
});
voilà mon code :
<!-- Radio box -->
<div class="radio-client">
<div>
<input type="radio" class="btn-radio" name="client" value="Oui" id="oui-client" />
<label for="oui-client"></label><p>Je suis déjà client KONE</p>
</div>
</div>
<div class="radio-client">
<div>
<input type="radio" class="btn-radio" name="client" value="Non" id="non-client"/>
<label for="non-client"></label><p>Je ne suis pas encore client KONE</p>
</div>
</div>C'est ce qui m'étonne ...
Voilà le css :
.btn-radio{
display:none;
}
[type="radio"] + label {
background: none repeat scroll 0 0 #ffffff;
border-radius: 2px;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 0px;
width: 16px;
cursor:pointer;
}
[type="radio"]:checked + label:after {
content: url(../img/arrow-checkbox.png);
position: absolute;
top: -0px; left: 1px;
font-size: 14px;
color: #99a1a7;
transition: all .2s;
}
[type="radio"]:checked + label {
background: none repeat scroll 0 0 #ffffff;
border-radius: 2px;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 0px;
width: 16px;
}
[type="radio"] + label:active, .btn-radio:checked + label:active {
box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.5) inset;
transition: all .2s;
}Et je récupère la valeur comme ça en ajax :
var client = $("input[name='client']:checked").val();Fait nous un jsfiddle parce que la c'est compliqué à dire.
Mais je pencherai sur le CSS qui foire. Essaie en le supprimant et si ça fonctionne toujours pas met sur jsfiddle po0ur voir si tu arrives à reproduire le problème.
Alors je pense ça vient du css aussi. Sinon voici le lien de mon jsfiddle : fichier.jsfiddle
Par contre j'ai pas mis tout le code html, css et js
T'a raison :) , maintenant ça fonctionne mais qu'au premier chargement de la page.
Mais si je remplis le formulaire et que je recharge la page, l'input reste checked.
Est ce qu'il y a un moyen de reset cela après le rechargement de la page ??
lol, je l'avais en tete en plus le code mais j'étais pas sur de moi lol.....
Merci bcp en tous cas :)
Juste une dernière question les gars :
En fait j'aimerais afficher un message d'erreur si aucun input type="radio" name="client" n'est pas checked en ajax ?
Pour mes autres champs il n'y pas de soucis, le message d'erreur s'affiche sans problème si un ou aucun des champs n'est pas rempli.
Voilà mon code ajax pour afficher l'erreur :
$(function(){
$("#form").submit(function(event){
var alert = $("#alert");
var societe = $("#societe").val();
var nom = $("#nom").val();
var prenom = $("#prenom").val();
var adresse = $("#adresse").val();
var codePostal = $("#codePostal").val();
var ville = $("#ville").val();
var email = $("#email").val();
var telephone = $("#telephone").val();
var contact = $("#contact").val();
// permet de recup la valeur de l'input radio
var client = $("input[name='client']:checked").val();
//Vérification email
var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var validEmail = emailReg.test(email);
//verification téléphone
var regex = new RegExp(/^(0|\+33)[1-9]([-. ]?[0-9]{2}){4}$/);
var validNumber = regex.test(telephone);
//Captcha
var captcha = $("#age").val();
var nb_caract = captcha.length;
var dataString = societe + nom + prenom + adresse + codePostal + ville + email + telephone;
var show_message = alert.stop(true, false).fadeIn(300).delay(2000).fadeOut(300);
if(dataString == "")
{
alert.html("Veuillez remplir le formulaire");
show_message;
}
else if(societe == "")
{
alert.html("Veuillez indiquer votre société, étude, ...");
show_message;
}
else if(nom == "")
{
alert.html("Veuillez indiquer votre nom");
show_message;
}
else if(prenom == "")
{
alert.html("Veuillez indiquer votre prénom");
show_message;
}
else if(adresse == "")
{
alert.html("Veuillez indiquer votre adresse");
show_message;
}
else if(codePostal == "")
{
alert.html("Veuillez indiquer votre code postal");
show_message;
}
else if(ville == "")
{
alert.html("Veuillez indiquer votre ville");
show_message;
}
else if(email == "")
{
alert.html("Veuillez indiquer votre email");
show_message;
}
else if(!validEmail)
{
alert.html("Votre email n'est pas valide !");
show_message;
}
else if(telephone == "")
{
alert.html("Veuillez indiquer votre téléphone");
show_message;
}
else if(client == "")
{
alert.html("merci de cocher une case");
}
else if(!validNumber)
{
alert.html("Votre numéro de téléphone n'est pas valide !");
show_message;
}
else if(nb_caract > 0)
{
alert.html("");
}
else
{
$.ajax({
type : "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
success : function(){
show_message;
alert.html("Message envoyé !");
},
error: function(){
show_message;
alert.html("Erreur lors de l'envoi !");
}
});
}
return false;
});x
j'ai penser à ça, mais ça ne me fait rien :
else if(client == $("input[name='client']:not(:checked)"))
{
alert.html("merci de cocher une case");
}