Taking value from an input

Asked

Viewed 850 times

4

I have two inputs, and each input has a span.

Follow the code below.

    $('.textInput').on('keyup', function(){
       console.log($(this).val());
      $(".val").attr("date", $('.textInput').val()); 
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input class="textInput" type="text" value="teste">
    <span date='' class='val'></span>

    <input class="textInput" type="text" value="teste">
    <span date='' class='val'></span>

The jQuery takes the input value and writes inside the span date attribute. However when executing it is taking the value and putting in the two span, I need that when writing in the input it writes in the span corresponding to the input.

jquery

  • Because the id is unique, it can only be referenced to an element, use class, exchange id="textInput" to class="textInput" => $('. textInput').

  • It is to appear the value of the first input in a span and the other input in the other span ?? I did not understand very much not

  • 2

    if I type in input 2 he writes in span 2 if I write in input 1 he writes in span 1 the way that if I write in input he writes in both span

3 answers

4

This occurs because that id is a unique reference to an element, so it only considers the first element created, but you can use class which can be used for several elements.

<input class="textInput" type="text" value="teste">

<input class="textInput" type="text" value="teste">

$('.textInput').on('keyup', function(){
   console.log($(this).val());
});

To better understand the attribute id read the MDN documentation and class MDN documentation

To set the value on your property date would be as follows


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <script
    src="https://code.jquery.com/jquery-3.4.0.js"
    integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
    crossorigin="anonymous"></script>
</head>
<body>
    <div class="col-xs-4 offset-xs-4">
       <input id="textInput1" class="textInput" type="text" value="teste">
       <span date="" id="date1"></span>

       <input id="textInput2" class="textInput" type="text" value="teste">
       <span date="" id="date2"></span>
    </div>
</body>
</html>
<script type="text/javascript">

   $('#textInput1').on('keyup', function () {
     console.log('input1 valor: ' + $(this).val());
     $("#date1").attr("date", $('#textInput1').val());
   });

   $('#textInput2').on('keyup', function () {
     console.log('input2 valor: ' + $(this).val());
     $("#date2").attr("date", $('#textInput2').val());
   });

</script>

Obs:

I started using the identifier id in the elements since you want the values of the specific element.

  • thanks for the answer your example worked for me i edited the question could review the answer

  • @diogoDsa está ae man

  • thanks for the reply I realized that for each input I must create a code for it more as the form is within a foreach there may be more than one input can be 2 3 4 5 and so on has some way to create a for to create automatically

  • @diogoDsa mas ae would already be another pegunta man, specifying what you really want :D

  • @diogoDsa if you mark the correct answer would be very grateful :D

3


It does not need id’s. Excessive use of id’s is common for those who do not have broader knowledge of the methods provided by the framework. Inflates HTML and lets bad code work and maintain.

Since each span is adjacent (comes right after) to each input, use the method .next() jQuery. The .next() will select the element adjacent to the input entered (in this case, the span):

$('.textInput').on('keyup', function(){
   $(this).next().attr("date", $(this).val());
   // só para exemplo. apague a linha abaixo
   $(this).next().text($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="textInput" type="text" value="teste">
<span date='' class='val'></span>

<input class="textInput" type="text" value="teste">
<span date='' class='val'></span>

  • @Diogo Dsa, this would probably already solve your question with the "dynamic" form that is implemented in a foreach as commented in @Joan Marcos' reply.

  • thanks for the explanation I started a short time ago in Jquery had made a gambiarra here to make work with these four lines of code solved all problems.

  • Nice master, did not know that there was the next() method:D, Up the/

2

Use the event .keyup() jquery call the function that will pick up the data, every digit. And use the function .attr("atributo", "valor do atributo"), to change the value of an HTML element.

Example: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <script
    src="https://code.jquery.com/jquery-3.4.0.js"
    integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
    crossorigin="anonymous"></script>
</head>
<body>
    <div class="col-xs-4 offset-xs-4">
        <input class="textInput form-control" type="text" id="input1">
        <span date='' class='val' id="span1"></span>
    </div>
</body>
</html>
<script type="text/javascript">
    $("#input1").keyup(function(){
        $("#span1").attr("date", $(this).val());
    });
</script>

  • If you inspect the elements you will see working!

  • Thank you for the reply .

Browser other questions tagged jquery

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