noblemfd's avatar

How to Disable a href after submit until action is complete

I am using "a href" as a button in my Laravel-5.8 project:

<form  action="{{route('hr.departments.store')}}" method="post" class="form-horizontal" enctype="multipart/form-data">
   {{csrf_field()}}
   <div class="card-body">
    <div class="form-body">
    <div class="row">

      <div class="col-sm-6">
        <div class="form-group">
            <label>Department Name<span style="color:red;">*</span></label>
            <input  type="text" name="dept_name" placeholder="Enter department name here" class="form-control" value="{{old('dept_name')}}">
        </div>
      </div>
        

   </div>
 </div>
</div>          
<!-- /.card-body -->
   <div class="card-footer">
&nbsp;&nbsp;&nbsp;<a href ="{{ route('post.publish.all')}}" class="btn btn-success float-left"><i class="fas fa-arrow-right"></i> Publish</a> 
        <button type="submit" class="btn btn-primary">Save</button>

   </div>           
   
    </form>

Since this is not a button, I want to disable:

<a href ="{{ route('post.publish.all')}}" class="btn btn-success float-left"><i class="fas fa-arrow-right"></i> Publish</a>

after it is clicked untill the action is complete.

How do I achieve this?

Thank you.

0 likes
5 replies
Snapey's avatar

so you dont submit any changes on this form?

noblemfd's avatar

so that the user don't click it twice or more

Snapey's avatar

What I mean is;

If someone keys in new value for Department name and then presses publish, you don't care that the new value is not saved?

Tray2's avatar

Why the heck are you using a href as a button to submit the form?

Use a real button for that instead and disable it after the first click.

DennisEilander's avatar

@noblemfd you shouldn't use an a href button to submit forms.. Just change the a href to a real button.

Then to achieve this, you can add an event listener on that button like so:

<button id="publishButton" type="submit" class="btn btn-primary" onclick="disableButton(this)">Publish</button>


function disableButton(btn){
    document.getElementById(btn.id).disabled = true;
}

Please or to participate in this conversation.