How to disable an href after one click using JQuery

Question

I am working on a project in Laravel-5.8,

When the user clicks on the href it posts all respondents:

Controller:

public function submit_all_respondents(){
     ...
  Notification::route('mail', $details['employee_respondent_email'])
                                ->notify(new \App\Notifications\RespondentSubmit($details));
  Session::flash('success', 'Email sent to respondents successfully');
  return redirect()->back();
}

View

<a href ="{{ route('post.respondent.all')}}" class="btn btn-primary float-left"><i class="fas fa-arrow-right"></i> Post All Respondents</a>

After just a single click, I want the href to be disabled and becomes "Processng ..." until it is done.

How do I achieve this

Until what is done? With what is shown all that happens is you load that new route when clicking on that <a>. — charlietfl
– charlietfl, Commented Oct 26, 2020 at 13:25

Derek Wang · Accepted Answer · 2020-10-26 13:10:41Z

1

You can disable the href using CSS. If you add CSS style pointer-events: none;, that selector won't accept any pointer events. (So same as disabled.)

So it's good to create a new class called .processing and add it to selector when the user clicks it.

function processing(event) {
  event.target.className += " processing";
}

.processing {
  pointer-events: none;
  opacity: 0.5;
}

<a href ="#" class="btn btn-primary float-left" onclick="processing(event)"><i class="fas fa-arrow-right"></i> Post All Respondents</a>

answered Oct 26, 2020 at 13:10

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

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

Comments

Obzi · Accepted Answer · 2020-10-26 13:59:45Z

0

Simple solution :

$(...).click(function(e) {
    if ($(this).is(':disabled')) {
        e.preventDefault();
    }

    $(this).prop('disabled', true)
        .html('<i class="fas fa-arrow-right"></i> Processng ...');
});

edited Oct 26, 2020 at 13:59

answered Oct 26, 2020 at 13:10

Obzi

2,3901 gold badge12 silver badges23 bronze badges

5 Comments

user11352561 Over a year ago

I used this: <script type="text/javascript"> $(#review_comment_btn-submit).click(function() { $(this).prop('disabled', true) .html('<i class="fas fa-arrow-right"></i> Processng ...'); }); </script> but didn't work id=review_comment_btn-submit

Obzi Over a year ago

You're missing quotes arround #review_comment_btn-submit in your sample.

user11352561 Over a year ago

It changes to processing... but did not disable the href. It still allows users to be able to click

user11352561 Over a year ago

It changes to processing... but did not disable the href. It still allows users to be able to click on href

user11352561 Over a year ago

Still not disabled

Collectives™ on Stack Overflow

How to disable an href after one click using JQuery

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related