Capable de sélectionner la valeur du bouton radio sélectionné mais impossible de la passer à l'endroit souhaité qui est la valeur d'un type d'entrée (id = redirect).
<label>Transaction Mode</label>
<br>
<input type="radio" name="mode" id="bank" value="Bank"
onclick="myFunction()"> Direct Bank Transfer
<br>
<input type="radio" name="mode" id="online" value="Online"
onclick="myFunction()"> Credit Card / Paypal
<br>
<input type="radio" name="mode" id="cheque" value="Cheque"
onclick="myFunction()"> Cheque / Pay Order
<br>
<input type="radio" name="mode" id="cash" value="Cash"
onclick="myFunction()"> Cash
<input type=hidden name="redirect" id="redirect" value="">
<script>
function myFunction() {
$(document).ready(function(){
$("input[type='radio']").click(function(){
var x = $("input[name='mode']:checked").val();
if($(x).val == "Bank"){
alert("bank.php");
}
});
});
}
</script>
L'alerte n'affiche pas la valeur radio sélectionnée
3 Réponses :
Vous avez déjà la valeur (sous forme de chaîne) dans votre variable x lorsque vous faites
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>Transaction Mode</label> <br> <input type="radio" name="mode" id="bank" value="Bank"> Direct Bank Transfer <br> <input type="radio" name="mode" id="online" value="Online"> Credit Card / Paypal <br> <input type="radio" name="mode" id="cheque" value="Cheque"> Cheque / Pay Order <br> <input type="radio" name="mode" id="cash" value="Cash"> Cash <input type=hidden name="redirect" id="redirect" value="">
Donc, testez simplement si c'est == = 'Bank' :
document.addEventListener('change', ({ target }) => {
if (!target.name === 'mode') {
return;
}
const val = target.value;
if (val === 'Bank') {
console.log("bank.php");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>Transaction Mode</label> <br> <input type="radio" name="mode" id="bank" value="Bank"> Direct Bank Transfer <br> <input type="radio" name="mode" id="online" value="Online"> Credit Card / Paypal <br> <input type="radio" name="mode" id="cheque" value="Cheque"> Cheque / Pay Order <br> <input type="radio" name="mode" id="cash" value="Cash"> Cash <input type=hidden name="redirect" id="redirect" value="">
N'hésitez pas à utiliser les méthodes DOM standard, il n'y a pas besoin d'une grande bibliothèque comme jQuery pour quelque chose d'aussi trivial:
$("input[type='radio']").click(function() {
var x = $("input[name='mode']:checked").val();
if (x === "Bank") {
console.log("bank.php");
}
});
var x = $("input[name='mode']:checked").val();
Y a-t-il une raison pour obscurcir de manière oblitérante Événement ? Il ne sera certainement pas brisé de toute façon;) Vous économiseriez même quelques octets en faisant simplement e => ou le evt => préféré de l'homme
Tout le monde sait déjà que l'argument du rappel addEventListener est l'événement, non? Je n'aime pas définir un objet entier dans une portée si je ne vais utiliser qu'une seule propriété de l'objet, la déstructuration immédiate signifie moins de bagages pour la portée restante du rappel IMO. (bien que je suppose que cela n'a pas tellement d'importance pour quelque chose d'aussi court)
Pensez à apporter les modifications suivantes à votre code:
onclick = "myFunction ()" ) dans votre HTML. Déléguez plutôt la liaison d'événement à JQuery (c'est-à-dire comme vous l'avez fait avec le gestionnaire .click () . .ready () dans une fonction appelée par un événement utilisateur. Le gestionnaire .ready () est appelé lorsque le DOM de la page peut être interagi en toute sécurité avec - encapsuler le gestionnaire .ready () avec une fonction déclenchée par l'utilisateur (c'est-à-dire myFunction () ) convolute le point de déclenchement prévu de ce gestionnaire. >
Les modifications de code suggérées ressembleraient à ceci:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <label>Transaction Mode</label> <br> <!-- remove onclick event bindings --> <input type="radio" name="mode" id="bank" value="Bank"> Direct Bank Transfer <br> <input type="radio" name="mode" id="online" value="Online"> Credit Card / Paypal <br> <input type="radio" name="mode" id="cheque" value="Cheque"> Cheque / Pay Order <br> <input type="radio" name="mode" id="cash" value="Cash"> Cash <input type=hidden name="redirect" id="redirect" value="">
/* Don't enclose this in another function - it is run once page is ready */
$(document).ready(function() {
$("input[type='radio']").click(function() {
if ($(this).is(':checked') &&
$(this).val() === 'Bank') {
/* If the clicked radio is checked and the value matches 'Bank'
show alert() */
alert("bank.php");
}
});
});
J'espère que cela vous aidera!
Ça a marché. Pouvez-vous expliquer pourquoi éviter les liaisons d'événements en ligne? J'exécute également d'autres fonctions avec. Merci.
Salut @haroon heureux d'entendre que cela a aidé. Bien sûr - bien que ce que vous avez actuellement ne soit pas nécessairement faux, le $ .ready () à l'intérieur de votre myFunction () ajoute une complexité qui peut être évitée par ce que j'ai montré ci-dessus. De plus, l'intention de $ .ready (fn) est d'appeler fn une fois que la page est «prête à être interagie avec jquery» - en exécutant $. ready () à un moment ultérieur, (c'est-à-dire après l'interaction de l'utilisateur) est un peu déroutant - c'est presque pour suggérer que la page ne sera pas prête au moment où l'utilisateur interagira avec la page.
Je l'ai déjà fait la première fois mais cela dit que mon vote est enregistré mais non publié en raison de moins de 15 réputations
Vous pouvez simplement simplifier la logique et simplement ajouter .php à la valeur du bouton radio sur lequel vous avez cliqué (ce qui signifie par définition qu'il est coché). Cela vous donnera l'URL de la page souhaitée pour cette entrée radio vérifiée.
Je passe également cette redirectLocation à la valeur de votre entrée cachée, ce qui, je suppose, est le but de ceci.
Au nom d'un meilleur code - vous devriez avoir le texte de chaque bouton radio dans un élément d'étiquette qui encapsule l'entrée radio ou y fait référence avec l'attribut for = "id". p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>Transaction Mode</label> <br> <input type="radio" name="mode" id="bank" value="Bank"> Direct Bank Transfer <br> <input type="radio" name="mode" id="online" value="Online"> Credit Card / Paypal <br> <input type="radio" name="mode" id="cheque" value="Cheque"> Cheque / Pay Order <br> <input type="radio" name="mode" id="cash" value="Cash"> Cash <input type=hidden name="redirect" id="redirect" value="">
$(document).ready(function(){
$("input[type='radio']").click(function(){
var redirectLocation = $(this).val().toLowerCase() + '.php';
$('#redirect').val(redirectLocation);
alert(redirectLocation);
});
})
Vous avez réussi! Simple et parfait. Puisqu'il y a d'autres boutons radio dans le code, j'ai changé $ (this) en $ ("input [name = 'mode']: checked"). Est-ce correct ou il existe un moyen plus simple que celui-ci. Merci pour le conseil.