Button Text Change on click for a loop buttons

Question

When a user clicks on "receiver list" button, the button text should change to "loading...". The buttons are in a For loop. I guess the id attribute method is not going to work. The logic is when a user clicks on "receiver list" button, the button will change to "loading..." and load the page it goes to.

@foreach($groups as $group)
  <div class="col-lg-4 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-header card-header-success card-header-icon">
         <div class="card-icon">
            <i class="material-icons">store</i>
         </div>
         <a class="btn btn-info p-2" href="{{action('ReceiverController@index', $group)}}">
           <i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
               Receiver List
         </a>
      </div>                                    
    </div>
  </div>

Umm...I tried various ways a couple weeks ago, and deleted all of them...I can write some code again, give me some time. Thx. — Yuze Sun
– Yuze Sun, Commented Sep 5, 2018 at 15:02

TalESid · Accepted Answer · 2018-09-05 15:42:00Z

1

just use inline onclick event of javascript:

<a class="btn btn-info p-2" onclick="this.innerHTML='loading...'" href="{{ action('ReceiverController@index', $group) }}">
    <i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
    Receiver List
</a>

if you want button icon as well:

<a class="btn btn-info p-2" onclick="clickfunc(this)" href="{{ action('ReceiverController@index', $group) }}">
    <i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
    Receiver List
</a>

<script>
clickfunc = function(obj) {
    obj.innerHTML = '<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i> loading...';
}
</script>

answered Sep 5, 2018 at 15:42

TalESid

2,5541 gold badge25 silver badges47 bronze badges

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

Comments

James · Accepted Answer · 2018-09-05 15:18:30Z

0

Assuming the p-2 class is unique to these buttons, this should work simple enough:

$(document).on('click', '.p-2', function(){
    let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
           Loading...`
    $(this).html(html);
});

If p-2 is not unique, then just add some other unique class name.

Or without jquery:

function load(){
     let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
           Loading...`
    this.innerHTML = html;
}
document.getElementsByClassName('.p-2').addEventListener("click", load);

edited Sep 5, 2018 at 15:18

answered Sep 5, 2018 at 15:06

James

4552 gold badges6 silver badges19 bronze badges

3 Comments

Pete Over a year ago

jquery has neither been mentioned nor tagged, please do not answer with libraries that are not requested - javascript does not automatically mean jquery

Yuze Sun Over a year ago

Great! You are awesome! What is this method called? JavaScript is a headache for me as always.

James Over a year ago

These are just two ways (1 jquery and 1 normal JavaScript) to add an event listener to some html DOM element. There are a lot more events than just click. Read more about them from w3schools.

Collectives™ on Stack Overflow

Button Text Change on click for a loop buttons

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related