Take the identifier of the SPAN tag and add some value to the text field field according to which the tag was clicked

Question

I tried to capture the identifier of the SPAN tag when the user clicked it.
Since the identifier of each tag contains two digits, they will be used to refer
to the value of the corresponding field of the hidden text field,
but I am stuck on this issue.

Here is part of the code I wrote.
I need your help to finish it, because I don’t know how to move on.

<script type="text/javascript">
    $(document).ready(function(){ 
           $("#^=content").click(function(event){
        // var digit = extract the last two digit of the id
           var id_of_the_hidden_field = "hidden"+digit;
           $("#show").val()=$("#hidden").val();
            });
        });
</script>
<div id="test22">
<span id="content22">Click to add the value</span>
<input type="hidden" id="hidden22" value="hello">
</div>

<div id="test33">
<span id="content33">Click to add the value</span>
<input type="hidden" id="hidden33" value="world">
</div>

<input type="text" id="show">

Answer 1

It will look like this:

$("[id^=content]").click(function(event){
  $("#show").val($("#" +   this.id.replace('content', 'hidden')).val());
});​

. , start-with selector ([attr^=value]), ( .class). , 'content' 'hidden' string.replace() . .val(value), .val() = value :)

, , , <input type="hidden" /> <span> :

$("[id^=content]").click(function(event){
    $("#show").val($(this).next().val());
});​

---

, , , , , :

<div id="test22">
  <span id="content22" class="clickable">Click to add the value</span>
  <input type="hidden" id="hidden22" value="hello">
</div>    
<div id="test33">
  <span id="content33" class="clickable">Click to add the value</span>
  <input type="hidden" id="hidden33" value="world">
</div>    
<input type="text" id="show">​​​​​​

jQuery:

$(".clickable").click(function(event){
  $("#show").val($(this).next().val());
});​

Answer 2

<script type="text/javascript">
$(document).ready(function(){ 
    $("[id^=content]").click(function(event){
        var digit = this.id.replace("content","");
        $("#show").val($("#hidden" + digit).val());
    });
});
</script>
<div id="test22">
<span id="content22">Click to add the value</span>
<input type="hidden" id="hidden22" value="hello">
</div>

<div id="test33">
<span id="content33">Click to add the value</span>
<input type="hidden" id="hidden33" value="world">
</div>

<input type="text" id="show">

: http://jsfiddle.net/vNAEd/

Answer 3

 var digit = $(this).attr(id).substring(7, 9);

Answer 4

your selector is wrong. Use $("span[id^=content]")instead

$(document).ready(function(){ 
           $("span[id^=content]").click(function(event){
           var id = this.id;
           var digit = id.substring(id.length -2 , id.length);
           var id_of_the_hidden_field = "#hidden"+digit;
           $("#show").val( $( id_of_the_hidden_field  ).val() );
            });
        });

Answer 5

This one will work for you:

$("[id^=content]").click(function(){
  $("#show").val($("#hidden"+this.id.substr(-2)).val());
});

Here's the code in action .