How would I POST from HTML using a button not a form for a MySQL database?

Question

I posed a question previously but I think in the wrong way.

Currently I have a form submit that works to post "toggle_LED" but I want to avoid a form and only use a button to post from my HTML or PHP if possible? As I have a setup that checks for the post of "toggle_LED" for both a readout of what state the LED is in and another that switches the LED if the MySQL database is updated via a POST.

This is one place I want to use it for a little ESP_8266 project.

if (isset($_POST['toggle_LED'])) {
    $sql = "SELECT * FROM LED_status;";
    $result   = mysqli_query($conn, $sql);
    $row  = mysqli_fetch_assoc($result);
    
    if($row['status'] == 1){
        $update = mysqli_query($conn, "UPDATE LED_status SET status = 0 WHERE id = 1;");        
    }       
    else{
        $update = mysqli_query($conn, "UPDATE LED_status SET status = 1 WHERE id = 1;");        
    }
}

Why are you unable to use a form? You can make a form that is completely invisible that is still able to do the POST request — Morten H
– Morten H, Commented Jun 18, 2022 at 7:16
A form can be resubmitted on refresh and I would like for that not to be possible in a cleaner way. Plus using a button generally seems cleaner but Im not too sure... Really am clueless on that front. — Pavlov Propagandalf
– Pavlov Propagandalf, Commented Jun 18, 2022 at 8:05

Professor Abronsius · Accepted Answer · 2022-06-20 11:29:25Z

2

If you assign a dataset attribute to your button you can easily toggle the value between 0 and 1 with a very simple piece of algebra - such as state = 1 - state

With that modified status value then send an ajax request to your php script to update the db.

<?php

    $sql = "SELECT * FROM LED_status;";
    $result   = mysqli_query($conn, $sql);
    $row  = mysqli_fetch_assoc($result);
    
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['status'], $_POST['task'] ) ){
        ob_clean();
        if( $_POST['task']=='toggle_led' ){
            
            if( intval( $row['status'] ) == 1){
                $update = mysqli_query($conn, "UPDATE LED_status SET status = 0 WHERE id = 1;");        
            }else{
                $update = mysqli_query($conn, "UPDATE LED_status SET status = 1 WHERE id = 1;");        
            }
            
            exit( 'Database updated - status=' . $_POST['status'] );
        }
        
        exit();
    }
?>

<input type='button' name='toggle' value='Toggle LED' data-state=1 />

<script>
    let fd=new FormData();
    let bttn=document.querySelector('input[type="button"][name="toggle"]');
        bttn.addEventListener('click',function(e){
            this.dataset.state = 1 - this.dataset.state;
            
            fd.set('status', this.dataset.state );
            fd.set('task', 'toggle_led');   // <---------- removed space!!!
            
            fetch( location.href, { method:'post', body:fd })
                .then(r=>r.text())
                .then(text=>alert(text))
            
            
        });
</script>

An alternative might be to do that same algebra in the database and not worry about the variable being sent.

ie:

$sql='UPDATE `LED_status` SET `status` = 1 - `status` WHERE `id` = 1';

edited Jun 20, 2022 at 11:29

answered Jun 18, 2022 at 7:27

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Pavlov Propagandalf Over a year ago

The fact that your answer went straight over my head regarding the <script> for the button is maybe a sign that I need to study alot more. >_> Ill try and put it to use but if possible could you explain why you cant directly "post" with a button like you can with a form? I understand it is what it is but im not sure why...

Professor Abronsius Over a year ago

"you cant directly "post" with a button like you can with a form" - a button is, by default, a submit button for a form. It's sole purpose is to submit a form - there can be no submission if there is no form which is why AJAX is your friend as there is no need for a form

Pavlov Propagandalf Over a year ago

AJAX sounds interesting will try and look into it. Hopefully thats a good solution.

Pavlov Propagandalf Over a year ago

I might be an idiot, but trying to get your solution to work always ends up with me having an error on my browser side with a popup that shows what the <script> portion of your solution states.

Professor Abronsius Over a year ago

can you amend your question to show the new code or create a pastebin paste and share the link?

|

Collectives™ on Stack Overflow

How would I POST from HTML using a button not a form for a MySQL database?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related