HTML Submit button hide on press-CodePudding

In my web application, I want to hide the submit button when the user clicks it.

Normally that option wasn't there earlier and when clicking the submit button, the request was submitted.

Then I add this code to hide the submit button on click

<input type="submit" value="Submit Request"  onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;" />

Now the issue is it's hidden but the request has not been submitted to the controller.

CodePudding user response：

Are you able to run some Javascript against this code? If so you could use this for html:

<form id="my-form" action="/whatever action">
    <input type="submit" value="Submit Request" id="btn-show" 
       />
</form>

this script :

<script type="text/javascript">
    var button = document.getElementById('btn-show')
    button.addEventListener('click',hideshow);

    function hideshow() {
       document.getElementById('btn-show').style.display = 'block'; 
        this.style.display = 'none'
       document.getElementById("my-form").submit();
       document.getElementById('btn-show').disabled=true; 
       document.getElementById('btn-show').value='Sending...';
       return false
    }   
</script>

look at the codepen for how you could fit this into your project: https://codepen.io/bolti95/pen/qBpxgOQ