Search code examples
jqueryinputsend

jQuery send multiple value in another input

I have created a loop for displaying a shop's identity card.

The card's content contains information about the shop (phone, address...). the card has a button for selecting the shop, and I want send the multiple values to another input.

<li>

<span onclick="doSomething()" value="3">Select this Shop</span>
<input class="info-1" type="hidden" value="footlocker">
<input class="info-2" type="hidden" value="13 street 1000">
<input class="info-3" type="hidden" value="new york city">
<input class="info-4" type="hidden" value="00 22 55 66 33">
<input class="info-5" type="hidden" value="ID shop 6">

</li>


<li>
<span onclick="doSomething()" value="5">Select this Shop</span><br/>
<input class="info-1" type="hidden" value="Mc Donald">
<input class="info-2" type="hidden" value="256 avenue clint">
<input class="info-3" type="hidden" value="San Diego">
<input class="info-4" type="hidden" value="31 64 21 54 12">
<input class="info-5" type="hidden" value="ID shop 34">
</li>
...

The information is send in the input here

<input id="info-1" value="">
<input id="info-2" value="">
<input id="info-3" value="">
<input id="info-4" value="">
<input id="info-5" value="">

My jQuery

function doSomething(){


    var text= $('.info-1').attr('value');
    $( "#info-1" ).val(text);

    var text =  $('.info-2').attr('value');
    $( "#info-1" ).val(text);

    var text =  $('.info-3').attr('value');
    $( "#info-1" ).val(text);

    var text =  $('.info-4').attr('value');
    $( "#info-1" ).val(text);

    var text =  $('.info-5').attr('value');
    $( "#info-1" ).val(text);
}

This code doesn't work and if does work it sends only the value of the first shop :(.

Thanks for your help

https://jsfiddle.net/zjo1y4vv/3/

Solution

  • JSFIDDLE DEMO

    Html should look like this

    <li>
  <span onclick="doSomething(this)" value="3">Select this Shop</span>
  <input class="info-1" type="hidden" value="footlocker">
  <input class="info-2" type="hidden" value="13 street 1000">
  <input class="info-3" type="hidden" value="new york city">
  <input class="info-4" type="hidden" value="00 22 55 66 33">
  <input class="info-5" type="hidden" value="ID shop 6">
</li>
<li>
  <span onclick="doSomething(this)" value="5">Select this Shop</span>
  <br/>
  <input class="info-1" type="hidden" value="Mc Donald">
  <input class="info-2" type="hidden" value="256 avenue clint">
  <input class="info-3" type="hidden" value="San Diego">
  <input class="info-4" type="hidden" value="31 64 21 54 12">
  <input class="info-5" type="hidden" value="ID shop 34">
</li>
<br/> 
My container where is send the value :
<input id="info-1" value="">
<input id="info-2" value="">
<input id="info-3" value="">
<input id="info-4" value="">
<input id="info-5" value="">

    JAVASCRIPT

      function doSomething(el) {
    var infomag = $(el).siblings('.info-1').val();
    $("#info-1").val(infomag);

    var text2 = $(el).siblings('.info-2').val();
    $("#info-2").val(text2);

    var text3 = $(el).siblings('.info-3').val();
    $("#info-3").val(text3);

    var text4 = $(el).siblings('.info-4').val();
    $("#info-4").val(text4);

    var text5 = $(el).siblings('.info-5').val();
    $("#info-5").val(text5);
  }

    There are a bunch of things wrong with your fiddle.

    1. doSomething(this) - add a parameter this in your html
    2. you have the id info-4 twice.
    3. Use .siblings to find the text