php Question posted in
Official manual can be found here.

Php – How to disable an HTML submit button after it has been pressed?

I’m working on a signup page in PHP and JavaScript. When the user presses the "submit" button, the page starts to load before redirecting. If the user presses "submit" again, the page throws an error because the data has already been entered into the database the first time.

Here’s a video of the problem.

I want to disable the "submit" button for 15 seconds after the first click, as long as the form information is valid. I’m using PHP and JavaScript for this.

I tried the following code, but it didn’t work and didn’t change a thing:

const submitButton = document.getElementById("submit-button");
submitButton.addEventListener("click", function(event) {
  if (<?php echo (($vemail !== null) && ($vfullname !== null) && ($vusername !== null) && ($vpassword     !== null) && ($vbirthdate !== null) && ($vgender !== null)); ?>) {
    submitButton.disabled = true;
    setTimeout(function() {
      submitButton.disabled = false;
    }, 15000); // 15 seconds
    event.preventDefault();
  }
});

The conditions for the form to be considered valid are:

(($vemail !== null) && ($vfullname !== null) && ($vusername !== null) && ($vpassword !== null) &&     ($vbirthdate !== null) && ($vgender !== null));

The submit button is:

<form method="post"> <button id="submit-button" name="submit-button" type="submit">Sign Up!</button> </form>
Tags:

2

Answers


  1. 0

    There are two main problems with your code:

    • PHP generates a page, sends it to the client, and then it’s done. The PHP code doesn’t run again until the page is re-loaded. If you want client-side input validation based on the current contents of the form, you have to do it fully in JavaScript, not with a JavaScript / PHP combo. (If you want this if statement to be based on a fixed value, known at page load time, your combo approach can be used.)

      You might prefer to use the browser’s built-in form validation functionality to achieve this specific functionality.

    • event.preventDefault(); prevents the default behaviour of the button – that is, submitting the form. You want the form submitted the first time the button is pressed!

    However, there are problems with your approach, too:

    • Disabling the form’s submit button does not prevent the form from being submitted. Hitting Enter on an input box will also submit the form, as will some assistive technology.
    • Refreshing the target page will also re-submit the form. There’s no way to prevent this, though returning an HTTP 303 See Other from the form target is good practice that goes some way towards ameliorating this issue.

    A better approach would be using an idempotent method like PUT. Unfortunately, PUT isn’t supported in HTML forms: you have to use POST. Fortunately, there’s no reason you can’t implement PUT semantics in the server-side code that handles this response.

    If the user presses "submit" again, the page throws an error because the data has already been entered into the database the first time.

    Make this page not throw an error, if the data being entered is identical. (Or, go further, and only ever show out-of-band errors, to prevent user enumeration attacks from leaking data.)

    Login or Signup to reply.
  2. 0

    The answer above explains prefectly how PHP and its component works, you can refer to that for the concept.
    here’s my suggestion to hopefully achieve what you wanted.
    in this suggestion the first thing we do is preventing the default form submission using event.preventDefault().
    then we validate using PHP validation logic that are passed to JavaScript to determine if the form is valid.
    If valid, the submit button is disabled, and a setTimeout function re-enables it after 15 seconds.
    Then, the form is submitted using form.submit().
    this will ensures that the form is submitted only if validation conditions are met.

    const submitButton = document.getElementById("submit-button");
const form = document.querySelector("form");

submitButton.addEventListener("click", function(event) {

    event.preventDefault();

    <?php
    $isValid = ($vemail !== null) && ($vfullname !== null) && ($vusername !== null) && ($vpassword !== null) && ($vbirthdate !== null) && ($vgender !== null);
    ?>

    const isValid = <?php echo json_encode($isValid); ?>;

    if (isValid) {
        submitButton.disabled = true;

        setTimeout(function() {
            submitButton.disabled = false;
        }, 15000);

        form.submit();
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search