Change value on each click jquery

Question

I want to be able to change the value of class="downloadtext" with the span elements text. you can see how I am writing it below but its appending/changing the value with all the spans text - instead of changing the just one span tags text at a time.

Any help would be appreciated. Thanks

http://jsfiddle.net/breezy/nzw05xm3/

$(function(){


     var eachspan = $('.download-table span');
     var eachtext = $('.download-table span').text();

    eachspan.each(function(i){


        $(this).click(function(){

            $('.downloadtext').val(eachtext);


        });
    });

});

HTML

<div id="download-file" class="dialog">

  <div class="dialog-head">
    Save as
  </div>

  <div class="dialog-content">

    <div class="file">
      <p>File name:</p>
      <input type="text" name="text" class="downloadtext">
    </div>
    <!-- eo // file name -->

    <div class="location">
      <p>Location:</p>
      <select>
        <option value="1">/</option>
        <option value="2">/home</option>
        <option value="3" selected="selected">/home/guest</option>
      </select>
      <span class="save-icon"><i class="fa fa-floppy-o"></i></span>

    </div>
    <!-- eo // location -->

    <div class="list-files">

      <table>
        <thead>
          <tr>

            <td>Name</td>
            <td>Type</td>
            <td>Date Modified</td>

          </tr>

        </thead>

        <tbody class="download-table">
          <tr>
            <td><i class="fa fa-file"></i> <span>Budget by Region - Area Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Budget to Actual Comparison by Region - Scatter Plot</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Sales by Country - Data Bar</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Top 20 Countries by Quantities - Bar Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>

          <tr>
            <td><i class="fa fa-file"></i> <span>Top 5 Department Spend - Pie Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>

        </tbody>


      </table>



    </div>
    <!-- eo // list-files -->




    <div class="buttons">

      <a href="#" class="primary button left">Save</a> <a href="#" class="primary button right colorbox-close" data-value="true">Cancel</a>

    </div>
  </div>
  <!-- eo // dialog-content -->

</div>
<!-- eo //  dialog-content -->

rahul · Accepted Answer · 2015-12-07 20:54:22Z

2

Get the text of the span inside the click event of that particular element.

$(function(){
     var eachspan = $('.download-table span');

     eachspan.click(function(){
         var spanText = $(this).text();
         $('.downloadtext').val(spanText);
     });    
});

Updated fiddle

edited Dec 7, 2015 at 20:54

answered Dec 7, 2015 at 20:51

rahul

188k50 gold badges239 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sean Wessell · Accepted Answer · 2015-12-07 21:04:52Z

0

$(function() {
  $('.download-table tr').each(function(i) {
    var $this = $(this)
    $this.click(function() {
      $('.downloadtext').val( $this.find('span').text() );
    });
  });
});

I would attach the event to the row. That way users can click anywhere in the row. Based off the row that is clicked you can find the span and populate the input with the class downloadtext.

http://jsfiddle.net/SeanWessell/9n9ywmxa/

answered Dec 7, 2015 at 21:04

Sean Wessell

3,5201 gold badge15 silver badges20 bronze badges

Collectives™ on Stack Overflow

Change value on each click jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related