Picking up text field content via ID using Javascript

Asked

Viewed 3,219 times

2

I have a checkbox that at the time I select and search the value in the field type="text", one of the fields is working perfectly but the second field does not work.

function pega(){
	var opcao = document.getElementById("opcao");
	var numero1 = document.getElementById("number1").value;
	var numero2 = document.getElementById("number2").value;

	if (opcao.checked == true){
		document.getElementById("total").innerHTML = numero1;
	}
  /*

	if (opcao.checked == true){
		document.getElementById("total").innerHTML = numero2;
	}*/

}
<input type="checkbox" id="opcao" name="Pacote" value="primeira opcao" onclick ="pega()">
<input type="text" id="number1" />

<input type="checkbox" id="opcao" name="Pacote" value="primeira opcao" onclick ="pega()">
<input type="text" id="number2" />
<div id="total"></div>

My idea later is to calculate the two fields, but I need to know if this way I am doing I will be able?

javascript html
  • 1

    You’re using the same id for two different elements, don’t do it. Name each one as option 1 and option 2, then check if they are checked, as you are already doing.

  • First, I think you had to accept @Sergio’s reply. Then, why don’t you use jQuery? Why don’t you put Labels us checkbox and takes the value with $("input[type='checkbox']").val();or another jQuery variant, such as $(#idCheckbox).val();? If when selecting a checkbox the other should be unchecked, why not use input[type="radio"]?

2 answers

6


In HTML the Ids must be unique. To group elements use classes (class) and to identify in a unique way is used id.

So the problem with your code is that .getElementById("opcao") will only return an element, the first one you find.

You can fix this by giving different Ids, or you can use the fact that when the function pega can receive the argument event which is the event that triggers this onclick. And then the property .target what tells you which the element clicked. Thus opção = e.target;

Another option is to do so, which reads the values of all checkbox regardless of how many:

var opcoes = document.querySelectorAll('input[type="checkbox"]');
var inputs = document.querySelectorAll('input[type="text"]');

function lerValores(els) {
  return [].map.call(els, function (el) {
    return el.checked;
  });

}

function pega(e) {
  var total = 0;
  lerValores(opcoes).forEach(function (checked, i) {
    if (checked) total += parseInt(inputs[i].value, 10);;
  });
  document.getElementById("total").innerHTML = total;
}

Example: http://jsfiddle.net/pfb7sw78/

  • Sergio solved my problem, but I don’t understand what this guy does ? Function levarValores(Els){ Return [].map.call(Els, Function(el) { Return el.checked; }); }

  • @Diboa This function takes the values of the checkbox marked. These values will be used in the other function pega ()

0

I believe what you want is this:

function pega(){
    if (document.getElementById("opcao1").checked == true) {
        document.getElementById("total").innerHTML = document.getElementById('number1').value;
      }
    if (document.getElementById("opcao2").checked == true) {
        document.getElementById("total").innerHTML = document.getElementById('number2').value;;
      }
    
}
<input type="checkbox" id="opcao1" name="pacote1" value="number1" onclick ="pega()">
<input type="text" id="number1" />

<input type="checkbox" id="opcao2" name="pacote2" value="number2" onclick ="pega()">
<input type="text" id="number2" />

<div id="total"></div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.