如何将类添加到html中的Submit类型的输入中，例如添加后将不会将其删除？

Question

I am trying to add a class to an input of type submit I tried using javascript input is inside a form

<input type='submit' name='$emri" . "$mbiemri" . "submit" . "$depart'" . " value='Vlereso' onclick='disable(this)'>

where disable is a function :

 function disable(element)
          {
            element.classList.add('disabled');
          }

when the input is clicked it adds the class but when the action is sent the class is removed again , what I want to do is when I click the input I don't want it to be clickable anymore so I am trying to add class disabled and I don't want it to be removed , is it possible to do it with JS or PHP is needed ?

Answer 1

When you click on the submit button, it will submit the form data (if present) to the target url, which is the current url by default. What you see is that the page is being reloaded afresh, so the class that you added will not be there anymore, because technically, it's a new page.

What you need to do is to disable the button right at the page load, if it's not to be used again. (Arguably you could remove the button altogether, because it's no use to have a disabled button that is never to be used again.)

To disable the <input ... , just add the attribute disabled to the tag.

Answer 2

You can store a boolean inside sessionStorage and when the page loads check if the boolean is true and if so disable the button.

sessionStorage will delete itself once the window gets closed.

Example:

pagescript.js:

let shouldDisableInput = sessionStorage.getItem('shouldDisableInput')
if(shouldDisableInput !== undefined){
    $('#input-id').classList.add('disabled') //or $('#input-id').prop('disabled', true);
}
function disable(element){
    element.classList.add('disabled');
    sessionStorage.setItem('shouldDisableInput', 'true')
}

page.html:

<input id="input-id" type='submit' name='$emri" . "$mbiemri" . "submit" . "$depart'" . " value='Vlereso' onclick='disable(this)'>

don't forget to add the pagescript.js inside the body of the html.

More info on sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Answer 3

您可以从php页面发送具有某些值的隐藏变量，并在html页面中检查该变量是否存在，然后打印disable标签。