how to Disable click on btn after first or do not send action-CodePudding

I have tried different solutions but what I want to achivie is:

When you press the button (a tag / h:commandlink ) I want to disable the button or do no action at the second click because the first one is loading. Right now I have a issue that you can double click on the button and it can give me error.

I have this code:

 <h:commandLink id="btn" styleClass="link"
  onclick="test()"
  action="#{use.enterAgentMode(user, myBean.guardEnum)}">
</h:commandLink>

for example is it possible to create a variable and set it to true/false and set condition inside of action=... if true do the code else nothing

I also tried with JQuery and document.getElement to set attr.disabled true but did not work. I saw it disabled with inspect but it was still clickable

I have tried different stuff, tried to add some debounce on the button.. any advices please

CodePudding user response：

Unfortunately there is no disabled property on a tag You should use CSS to disable the button

This first code snippet to reproduce your problem :

function test() {
document.getElementById("log").innerHTML ="Button clicked !!!"
}

<h:commandLink id="btn" styleClass="link" onclick="test()" action="#{use.enterAgentMode(user, myBean.guardEnum)}">
    Click Me
</h:commandLink>
<div id="log"/>

And that's how I solved the problem using CSS

function test() {
document.getElementById("log").innerHTML ="Button clicked !!!"
 document.getElementById("btn").classList.add("disabled") 

}

    .disabled {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        color: black;
    }

<h:commandLink id="btn" styleClass="link" onclick="test()" action="#{use.enterAgentMode(user, myBean.guardEnum)}">
        Click Me
</h:commandLink>
<div id="log"/>

Once you need your button click back just remove the disabled class from the classlist.

CodePudding user response：

You can use button syntax to your html if you want to disable or enable button. Try this

function test() {
    document.getElementById("test").innerHTML  = "Posted";
    document.getElementById("btn").disabled = true;
    document.getElementById("btn").setAttribute("class", "bdisable");
}

function enables() {
    document.getElementById("btn").setAttribute("class", "blink");
    document.getElementById("btn").disabled = false;
}

 .blink    {
     background-color: #cccccc;
     color           : black;
 }
   
.bdisabled {
     background-color: #4d4d4d;
     color           :grey;
 }

 <button id="btn" Class="blink" onclick="test()" action="#{use.enterAgentMode(user, myBean.guardEnum)}">
    Submit
 </button>
 <div id="test"/>
 <button id="btne" onclick="enables()" action="">
    enable
 </button>