1

Si uso la librería jQuery yo puedo alcanzar el primer input que está antes de cualquiera de estos dos botones:

$('.my-class button').click(function() {
  var elInput = $(this).parent().parent().find('input');
  console.log(`jQuery -> Botón presionado: ${$(this).prop('id')} \nValor del input adyacente: ${elInput.val()}`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="my-class">
  <input id="ibxOne"  type="text" value="test value" />
  <button id="btnOne" type="submit">Action 1</button>
  <button id="btnTwo" type="submit">Action 2</button>
</div>

Pero si quiero hacer lo mismo con Javascript puro no puedo.

Usando previousElementSibling puedo alcanzar el input al presionar el Botón1, pero si presiono el Botón2 ya el input no es alcanzado.

document.querySelectorAll('.my-class button').forEach(el =>
  el.addEventListener('click', () => {
    var elInput = el.previousElementSibling;

    console.log(`Javascript -> Botón presionado: ${el.id} \nValor del input adyacente: ${elInput.value}`);

  }))
<div class="my-class">
  <input id="ibxOne"  type="text" value="test value" />
  <button id="btnOne" type="submit">Action 1</button>
  <button id="btnTwo" type="submit">Action 2</button>
</div>

La pregunta

Si son varios inputs seguidos:

<div class="my-class">
  <input id="ibxOne"    type="text" value="test value" />
  <button id="btnOne"   type="submit">Action 1</button>
  <button id="btnTwo"   type="submit">Action 2</button>
  <hr />
  <input id="ibxTwo"    type="text" value="test value 2" />
  <button id="btnThree" type="submit">Action 1</button>
  <button id="btnFour " type="submit">Action 2</button>

</div>

y quiero obtener el valor del input que está inmediatamente antes del botón presionado, ¿cómo puedo hacerlo, tanto en jQuery como en Javascript?

Por ejemplo, si presiono el btnFour quiero alcanzar a ibxTwo.

La idea es poder alcanzar el input para poder modificar su valor.

2 respuestas 2

1

Segun el boton presionado se tiene que buscar el hermano previo mas cercano que sea de tipo 'INPUT'.

El tipo de elemento se verifica con .nodeName

document.querySelectorAll('.my-class button').forEach(el =>
  el.addEventListener('click', () => {

    let inputCercano = getHermanosPrevious(el, 'INPUT');
    //console.log('hermano input mas cercano', inputCercano);
        console.log(`Javascript -> Botón presionado: ${el.id} \nValor del input adyacente: ${inputCercano.value}`);

  }))

function getHermanosPrevious(elem, tag) {

  while (elem = elem.previousSibling) {
    if (elem.nodeType === 3) continue;
    if (elem.nodeName == tag) {
      return elem;
    }
  }
  return null;
}
<div class="my-class">
  <input id="ibxOne" type="text" value="test value" />
  <button id="btnOne" type="submit">Action 1</button>
  <button id="btnTwo" type="submit">Action 2</button>
  <hr />
  <input id="ibxTwo" type="text" value="test value 2" />
  <button id="btnThree" type="submit">Action 1</button>
  <button id="btnFour " type="submit">Action 2</button>

</div>

1
  • ¡Genial! Justo lo que necesitaba. Muchas gracias.
    – A. Cedano
    el 16 jul. 2018 a las 0:08
1

De esta manera vas a obtener el ultimo input del document

var inputs = document.getElementsByTagName('input');
var elInput = Array.prototype.slice.call(inputs).slice(-1);

console.log(elInput)
1
  • ¿El último input del documento? Yo quiero el input más anterior al botón presionado, sabiendo que puede haber más inputs antes o después... Ahora edito la pregunta para que se entienda mejor.
    – A. Cedano
    el 15 jul. 2018 a las 21:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.