I have a purchase order in which I would like to be able to retrieve the value of the button so that I can send it by POST But it doesn't work I get this error when I validate the data with the command button
Uncaught TypeError: document.getElementByName is not a function
here is the radio button syntax and processing in 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,);
});
In the example below there two (of many) ways to get the value of a radio button group.
Figure I - jQuery
let $promo = $('.promotion').val()
Figure II - JavaScript (need a <form>)
const all = document.forms.main.elements;
let promo = all.promotion.value;
Concerning the syntax error mentioned in comments from Mina:
.getElementByName()
.getElementsByName()
The following line will not work:
var promotion = document.getElementByName("promotion").innerHTML;
Besides the method .getElementByName() previously mentioned, .innerHTML should not work for void elements like <input>. Void elements are elements that have no end tag. .innerHTML will work on an element that has an end tag like <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>