Tengo una orden de compra en la que me gustaría poder recuperar el valor del botón para poder enviarlo por POST Pero no funciona Me sale este error cuando valido los datos con el botón de comando
TypeError no detectado: document.getElementByName no es una función
aquí está la sintaxis y el procesamiento del botón de opción en ajax
<fieldset> <div> <input type="radio" id="huey" Name="promotion" class="promotion" value="huey"checked > <label for="huey">Huey</label> </div> <div> <input type="radio" id="dewey" Name="promotion" class="promotion" value="dewey"> <label for="dewey">Dewey</label> </div> <div> <input type="radio" id="louie" Name="promotion" class="promotion" value="louie"> <label for="louie">Louie</label> </div> </fieldset> function commander(nom, prenom, adresse,detail_livraison,promotion) { $.ajax({ url: 'mail.php', type: 'POST', data: 'nom=' + nom + '&prenom=' + prenom + '&adresse=' + adresse + '&detail_livraison=' + detail_livraison + '&promotion=' + promotion , dataType: 'html', success: function(reponse) { if(reponse == "1") { //MonPanier.clearpanier(); afficherpanier(); document.body.scrollTop = 0; document.documentElement.scrollTop = 0; $('#mymodal').modal('show'); } if(reponse == "0-1") { $('#mymodal_erreur_1').modal('show'); } if(reponse == "0-2") { $('#mymodal_erreur_2').modal('show'); } if(reponse == "0-3") { $('#mymodal_erreur_3').modal('show'); } if(reponse == "0-4") { $('#mymodal_erreur_4').modal('show'); } if(reponse == "0-5") { $('#mymodal_erreur_5').modal('show'); } } }); } $('#commander').click(function() { var nom = document.getElementById("nom").value; var prenom = document.getElementById("prenom").value; var adresse = document.getElementById("adresse").value; var detail_livraison = document.getElementById("livraison-detail").innerHTML; var promotion = document.getElementByName("promotion").innerHTML; commander(nom, prenom, adresse,detail_livraison,promotion,); });En el siguiente ejemplo, hay dos (de muchas) formas de obtener el valor de un grupo de botones de opción.
Figura I - jQuery
let $promo = $('.promotion').val() Figura II - JavaScript (necesita un <form> )
const all = document.forms.main.elements; let promo = all.promotion.value;Con respecto al error de sintaxis mencionado en los comentarios de Mina:
.getElementByName()
.getElement s ByName()
La siguiente línea no funcionará:
var promotion = document.getElementByName("promotion").innerHTML;
Además del método .getElementByName() mencionado anteriormente, .innerHTML no debería funcionar para elementos vacíos como <input> . Los elementos vacíos son elementos que no tienen etiqueta final. .innerHTML funcionará en un elemento que tenga una etiqueta final como <div> INNER HTML </div> .
const log = data => console.log(JSON.stringify(data)); let $promo = $('.promotion').val(); const all = document.forms.main.elements; let promo = all.promotion.value; log($promo); log(promo); <form id='main'> <fieldset> <div> <input type="radio" id="huey" name="promotion" class="promotion" value="huey" checked> <label for="huey">Huey</label> </div> <div> <input type="radio" id="dewey" name="promotion" class="promotion" value="dewey"> <label for="dewey">Dewey</label> </div> <div> <input type="radio" id="louie" name="promotion" class="promotion" value="louie"> <label for="louie">Louie</label> </div> </fieldset> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> const log = data => console.log(JSON.stringify(data)); let $promo = $('.promotion').val(); const all = document.forms.main.elements; let promo = all.promotion.value; log($promo); log(promo); <form id='main'> <fieldset> <div> <input type="radio" id="huey" name="promotion" class="promotion" value="huey" checked> <label for="huey">Huey</label> </div> <div> <input type="radio" id="dewey" name="promotion" class="promotion" value="dewey"> <label for="dewey">Dewey</label> </div> <div> <input type="radio" id="louie" name="promotion" class="promotion" value="louie"> <label for="louie">Louie</label> </div> </fieldset> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>