trying to hide a button

[XCalibre1]

This is so easy, but I have no clue why absolutely nothing works.  i've tried php, javascript, jquery and NOTHING is working.  For two hours now..... please someone help.  This was my last attempt to  hide the submit button when I press it.

<?php
echo" <div id = 'btn'>";
echo" <input type='submit' name='submit' id='btn' value='Submit' />";
echo" </div>";
echo" </form>";
?>

<script>
function hideButton(){
document.getElementById('btn').style.display= 'none';
}
</script>

See, that seems so simple, and it does work when I do the online examples, but it just won't work with me grrrr lol.

 

I have also tried using

<?php
echo '<p><input type="submit" name="submitted" id="send" value="Send" onclick="this.style.display='none';"></p>';
?>

using it this way of course with how I've written the form:

echo" <input type='submit' name='submit' id='submit' value='Submit' onclick='this.style.display='none'; />'";

 

Edited April 2, 2023 by XCalibre1

[kicken]

40 minutes ago, XCalibre1 said:

See, that seems so simple, and it does work when I do the online examples, but it just won't work with me grrrr lol

You have id="btn" twice in that code, which is invalid.  ID's must be unique across the elements.  You also never actually call your hideButton function anywhere.  You need to apply it to some sort of event, such as the onclick of the button, if you want to have it run.

41 minutes ago, XCalibre1 said:

I have also tried using

This has a PHP syntax error due to the single-quotes around none, you need to escape them using a backslash.

43 minutes ago, XCalibre1 said:

I've written the form:

This version has a HTML syntax error because of the single quotes as well, as the end up closing the attribute early.  Your onclick attribute value is just this.style.display=, which is invalid javascript.

 

[XCalibre1]

24 minutes ago, kicken said:

 

This has a PHP syntax error due to the single-quotes around none, you need to escape them using a backslash.

 

This totally throws my whole format off, so won't work.  It takes me to all the components all to the left of the screen and whenI click submit, it takes me back to the regular format with the submit button, which doesn't do anything when you click it, as it should hide, but doesn't.  Maybe I wrote that code wrong? 

echo" <input type='submit' name='submit' id='submit' value='Submit' onclick='this.style.display=\"none\">";

[requinix]

17 minutes ago, XCalibre1 said:

Maybe I wrote that code wrong? 

I believe that's what kicken was trying to say.

[XCalibre1]

Well, this will disable the submit button, which is fine, I would rather have it hidden, but the issue is that it doesn't enter the information in the database and show the reservation number. UGHHHHH

echo"<button type='submit' id='submitbutton' onclick=\"document.getElementById('submitbutton').disabled = true\">Confirm Reservation</button>";

 

[requinix]

Can we assume that the button is located within the form?

What's your full code right now?

[Strider64]

8 hours ago, XCalibre1 said:

Well, this will disable the submit button, which is fine, I would rather have it hidden, but the issue is that it doesn't enter the information in the database and show the reservation number. UGHHHHH

echo"<button type='submit' id='submitbutton' onclick=\"document.getElementById('submitbutton').disabled = true\">Confirm Reservation</button>";

 

Like requinix says you should show the full code as it sounds more than hiding a submit button.

For example:

    /* Success function utilizing FETCH */
    const sendUISuccess = function (result) {
        //console.log('Result', result);
        if (result) {
            document.querySelector('#recaptcha').style.display = "none";
            submit.style.display = "none";
            document.querySelector('.pen').setAttribute('src', 'assets/images/target.png');
            //messageSuccess.style.display = "block";
            document.querySelectorAll('form > *').forEach(function (a) {
                a.disabled = true;
            });
        }
    };


// Function to handle errors when sending data to the database
    const sendUIError = function (error) {
        console.log("Database Table did not load", error);
    };

// Function to handle errors when saving data to the database
    const handleSaveErrors = function (response) {
        if (!response.ok) {
            throw new Error(`Save request failed with status ${response.status}: ${response.statusText}`);
        }
        return response.json();
    };

// Function to save the data to the database
    const saveDataToDatabase = (url, onSuccess, onError, data) => {
        fetch(url, {
            method: 'POST',
            body: JSON.stringify(data)
        })
            .then(response => handleSaveErrors(response))
            .then(data => onSuccess(data))
            .catch(error => onError(error));
    };

This is a portion of my JavaScript that uses Fetch to get a response back after a user sends the message. It hides the submit button, but verifies the message was sent and a few other things.

Edited April 2, 2023 by Strider64

[ginerjm]

Seems odd to me that you want to hide a button that is submitting a form and your php script could do the hiding before the client is refreshed from the php processing.   This form goes away when you click on the button so why are you worrying about hiding it?

[requinix]

6 hours ago, ginerjm said:

Seems odd to me that you want to hide a button that is submitting a form and your php script could do the hiding before the client is refreshed from the php processing.   This form goes away when you click on the button so why are you worrying about hiding it?

To prevent accidental repeated submissions of the form. Look around the internet and you'll see this "disable on click" paradigm everywhere.