How to return type radio value

Question

Good morning !

I’m having a little problem I’m trying to return the value of a radio field printing on the screen to give a return type to the user before making the upload click. I’m currently testing on a script I found, but without much success is returning me Nan, I tried to change from parseint to parseFlot but still unsuccessful.

<form>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input id="visa" type="radio" name="credit-card" value="20" onfocus="calcularPrimeiro()" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="30" onblur="calcularPrimeiro()" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
</form>

<div id="resultado"></div>

<script type="text/javascript">
function calcularPrimeiro() {
  var n1 = parseFloat(document.getElementsByClassName('credit-card').value, 0);
  document.getElementById('resultado').innerHTML = n1;
}
</script>

Answer 1

Instead of using a for complex to do this, just use querySelector to get the item you want, like this:

document.querySelector('input[name="credit-card"]:checked').value;

If it’s jQuery, like this:

$('input[name="credit-card"]:checked').val();

---

Exchange the onblur and onfocus for onchange, because if not the event will run before changing the value

function calcularPrimeiro() {
  var input = document.querySelector('input[name="credit-card"]:checked');
  var n1 = parseFloat(input.value, 0);
  document.getElementById('resultado').innerHTML = n1;
}

<div id="resultado"></div>

<form>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input id="visa" type="radio" name="credit-card" value="20" onchange="calcularPrimeiro()" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="30" onchange="calcularPrimeiro()" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
</form>

Answer 2

If I understand correctly, you want to bring a preselected item, so was added the checked in the first item and load page is already made the call of the method that returns the selected value. I also changed the function to take the radios by name and check which one is selected. As for the event that fires, I changed to the onclick because thus, when the user selects the item, the function will be fired.

(function() {
      calcularPrimeiro()
})();

function calcularPrimeiro() {

	var radios = document.getElementsByName('credit-card');
	for (var i = 0, length = radios.length; i < length; i++)
	{
		if (radios[i].checked)
		{
			var n1 = radios[i].value;
      var itemId = radios[i].id;
			document.getElementById('resultado').innerHTML = itemId + " - " + n1;
			break;
		}
	}  
}

<form>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input id="visa" type="radio" checked name="credit-card" value="20" onclick="calcularPrimeiro()" />
        <label class="drinkcard-cc visa" for="visa">20</label>
        <input id="mastercard" type="radio" name="credit-card" value="30" onclick="calcularPrimeiro()" />
        <label class="drinkcard-cc mastercard"for="mastercard">30</label>
    </div>
</form>

</br>
</br>

<div>Resultado: <div id="resultado"></div></div>
<div id="resultado"></div>

Answer 3

I performed a test and a half that worked the way I want, but I believe it is not the right way and whether it will work if I have more fields or I would have to fill if.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input id="visa" type="radio" name="credit-card" value="10" onfocus="calcularPrimeiro()" />
        <label class="drinkcard-cc visa" for="visa" ></label>
        <input id="mastercard" type="radio" name="credit-card" value="20" onblur="calcularPrimeiro()" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
</form>

<div id="resultado"></div>

<script type="text/javascript">
function calcularPrimeiro() {
  var n1 = document.getElementById("visa").value;
  var n2 = document.getElementById("mastercard").value;
  if($(visa).prop("checked")){
  document.getElementById("resultado").innerHTML = n1;
}else{
    document.getElementById("resultado").innerHTML = n2;
}
}
</script>