How to return the value of type radio

1

Good morning!

I'm having a problem I'm trying to return the value of a radio field by printing on the screen to give a type of return to the user before clicking the send. I'm currently testing on top of a script I found, but without much success is returning me NaN, I tried changing 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>
    
asked by anonymous 28.05.2018 / 16:12

3 answers

3

Instead of using% complex% to do this, just use for 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();

Change the querySelector and onblur by onfocus , otherwise the event will be executed 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>
    
28.05.2018 / 17:03
1

If I understand correctly, you want to bring a pre-selected item, so the checked has been added to the first item and the load page is already called by the method that returns the value selected. I also changed the function to get radios by name and check which one is selected. As for the event that triggers, I have switched to onclick because so, when the user selects the item, the function will be triggered.

(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>
    
28.05.2018 / 16:58
-1

I did a test and it kind of worked the way I want, but I do not think it's the right way and it will work if I have more fields or I would have to fill up with if.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><p>Now,withCSS3:</p><divclass="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>
    
28.05.2018 / 16:49