How to recover an input value by button

Asked

Viewed 105 times

0

function getValor(){
	var valor = $('.produtos').val();
	 alert(valor)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="valor[]" class="produtos" type="text"><button onclick="getValor()">GetValor</button>
<input value="2" name="valor[]" class="produtos" type="text"><button onclick="getValor()">GetValor</button>
<input value="3" name="valor[]" class="produtos" type="text"><button onclick="getValor()">GetValor</button>
<input value="4" name="valor[]" class="produtos" type="text"><button onclick="getValor()">GetValor</button>
<input value="5" name="valor[]" class="produtos" type="text"><button onclick="getValor()">GetValor</button>

javascript

2 answers

2

For your scenario use the Jquery function Prev(). This function returns the previous sibling element.

function getValor(button) {
    const $button  = $(button); //Convertendo objeto JS para objeto JQuery
    const value = $button.prev().val(); //Utilizando método prev() e val() do JQuery
    alert(value);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="valor[]" class="produtos" type="text"><button onclick="getValor(this)">GetValor</button><br>
<input value="2" name="valor[]" class="produtos" type="text"><button onclick="getValor(this)">GetValor</button><br>
<input value="3" name="valor[]" class="produtos" type="text"><button onclick="getValor(this)">GetValor</button><br>
<input value="4" name="valor[]" class="produtos" type="text"><button onclick="getValor(this)">GetValor</button><br>
<input value="5" name="valor[]" class="produtos" type="text"><button onclick="getValor(this)">GetValor</button>

  • +1 I had forgotten the .prev()

  • Thank you Victor Carnaval

  • No @frodrigues. If the answer was helpful, mark it as Best answer to close the question. Pleasure!!!

  • 1

    @Icaromartins, now learned little reading the documentation kkk, never got to use more I already have a letter up my sleeve.

1

A way to do this and putting a container outside the input and button to group, and modifying your javascript a little see below

function getValor(button){
   var $button = $(button),
       $input = $button.parent().find("input"),
/// ;                     ^             ^ buscar por input
/// ;                     pega a div que esta agrupando
       valor = $input.val();
   alert(valor)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <input value="1" name="valor[]" class="produtos" type="text">
    <button onclick="getValor(this)">GetValor</button>
</div>
<div>
    <input value="2" name="valor[]" class="produtos" type="text">
    <button onclick="getValor(this)">GetValor</button>
</div>
<div>
    <input value="3" name="valor[]" class="produtos" type="text">
    <button onclick="getValor(this)">GetValor</button>
</div>
<div>
    <input value="4" name="valor[]" class="produtos" type="text">
    <button onclick="getValor(this)">GetValor</button>
</div>
<div>
    <input value="5" name="valor[]" class="produtos" type="text">
    <button onclick="getValor(this)">GetValor</button>
</div>

  • 1

    Thank you Icaro Martins

Browser other questions tagged javascript

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