Put value to an input text when you select a radio input

Question

Put value to an input text when you select a radio input

Navigation

#1 by (2 votes)

5

As the title says, I would like that when selecting a value, in this case "European" or "American", it shows a numeric value in the "long", "high" and "wide" fields.

I give you the code:

var D = document.getElementById("D");
var P = document.getElementById("P");
var S = document.getElementById("S");

S.onclick = function() {
  document.getElementById('tipoenvio').style.display = "block";
}
P.onclick = function() {
  document.getElementById('tipoenvio').style.display = "none";
}
D.onclick = function() {
  document.getElementById('tipoenvio').style.display = "none";
}

<input type='radio' name='tipo-envio' value='D' tabindex="1" id="D" /><span> Docs</font></span>&nbsp
<input type='radio' name='tipo-envio' value='P' tabindex="1" id="P" checked="checked" /><span> Paquetes</span>&nbsp
<input type='radio' name='tipo-envio' value='S' tabindex="1" id="S" />
<span> Palé </span><br />
<div id="tipoenvio" style="display:none">
  <input type="radio" name="tipo-envio" id="1" value="P">
  <font color="black" size="1x">Europeo</font> &nbsp
  <input type="radio" name="tipo-envio" id="2" value="P">
  <font color="black" size="1x">Americano</font> &nbsp
  <input type="radio" name="tipo-envio" id="3" value="P">
  <font color="black" size="1x">Otros</font>
</div>


<span class="pl_bloq_titulo">Peso:</span>
<div class="bloq_cuadro">
  <input type="text" name="peso_1" id="peso_1" class="validar_imput" maxlength="6" autocomplete="off" tabindex="7" /><span class="form_label1">kg</span>
</div>

<span class="pl_bloq_titulo">Largo:</span>
<div class="bloq_cuadro">
  <input type="text" name="largo_1" id="largo_1" class="validar_imput" maxlength="6" autocomplete="off" tabindex="8" /><span class="form_label1">cm</span>
</div>

<span class="pl_bloq_titulo">Ancho:</span>
<div class="bloq_cuadro">
  <input type="text" name="ancho_1" id="ancho_1" class="validar_imput" maxlength="6" autocomplete="off" tabindex="9" /><span class="form_label1">cm</span>
</div>

<span class="pl_bloq_titulo">Alto:</span>
<div class="bloq_cuadro">
  <input type="text" name="alto_1" id="alto_1" class="validar_imput" maxlength="6" autocomplete="off" tabindex="10" /><span class="form_label1">cm</span>
</div>

javascript html

asked by Eduardo Leon 18.05.2018 в 01:03

source

1 answer

div to be placed on top of the div that contains it? Get all javascript errors

score 2 · Accepted Answer

You can do it with .value like this:

var D = document.getElementById("D");
var P = document.getElementById("P");
var S = document.getElementById("S");

S.onclick = function(){
        document.getElementById('tipoenvio').style.display="block";
        document.getElementById('largo_1').value = 1
        document.getElementById('ancho_1').value = 1
        document.getElementById('alto_1').value = 1
}
P.onclick = function(){
        document.getElementById('tipoenvio').style.display="none";
        document.getElementById('largo_1').value = 2
        document.getElementById('ancho_1').value = 2
        document.getElementById('alto_1').value = 2
}
D.onclick = function(){
        document.getElementById('tipoenvio').style.display="none";
        document.getElementById('largo_1').value = 3
        document.getElementById('ancho_1').value = 3
        document.getElementById('alto_1').value = 3
}

<input type='radio' name='tipo-envio' value='D' tabindex="1" id="D"/><span> Docs</font></span>&nbsp
<input type='radio' name='tipo-envio' value='P' tabindex="1" id="P" checked="checked"/><span> Paquetes</span>&nbsp
<input type='radio' name='tipo-envio' value='S' tabindex="1" id="S"/>
<span> Palé </span><br />
<div id="tipoenvio" style="display:none">
<input type="radio" name="tipo-envio" id="1" value="P" > <font color="black" size="1x">Europeo</font> &nbsp
<input type="radio" name="tipo-envio" id="2" value="P" > <font color="black" size="1x">Americano</font> &nbsp
<input type="radio" name="tipo-envio" id="3" value="P" > <font color="black" size="1x">Otros</font>
</div>


<span class="pl_bloq_titulo">Peso:</span>
<div class="bloq_cuadro">
<input type="text" name="peso_1" id="peso_1" class="validar_imput"  maxlength="6" autocomplete="off" tabindex="7"/><span class="form_label1">kg</span>
</div>

<span class="pl_bloq_titulo">Largo:</span>
<div class="bloq_cuadro">
<input type="text" name="largo_1" id="largo_1" class="validar_imput" maxlength="6" autocomplete="off" tabindex="8"/><span class="form_label1">cm</span>
</div>

<span class="pl_bloq_titulo">Ancho:</span>
<div class="bloq_cuadro">
<input type="text" name="ancho_1" id="ancho_1" class="validar_imput" maxlength="6" autocomplete="off" tabindex="9"/><span class="form_label1">cm</span>
</div>

<span class="pl_bloq_titulo">Alto:</span>
<div class="bloq_cuadro">
<input type="text" name="alto_1" id="alto_1" class="validar_imput" maxlength="6" autocomplete="off" tabindex="10"/><span class="form_label1">cm</span>
</div>