php "Enable Disable" button form help Php Html (Javascript?)

[Joveice]

Hello,

 

I want to create a "enable and disable" function. I did create a form that submited the post "status" with enable or disable. This works but is it the way to go?

 

I want to use this themes switch which is a checkbox to enable or disable. But then I'm in need of the form auto submitting each update and how I would create the backend to work with that (simple if this then code goes here).

 

How would you go about this? I also wanna move over to ajax later as I think it's cool not to update the page. (should I go with Vue or just pure javascrupt?)

[leodaniel]

So you just want a theme toggle? Here is a really simple solution

<input type="checkbox" id="awesomeDarkThemeToggle" onchange="changeTheme() /* Reload your page */" />
<label for="awesomeDarkThemeToggle">Awesome Dark Theme</label>

Just set a Cookie / save it in the session / save it to the Users Settings (database,...)

 

[Joveice]

Just now, leodaniel said:

So you just want a theme toggle? Here is a really simple solution

<input type="checkbox" id="awesomeDarkThemeToggle" onchange="changeTheme() /* Reload your page */" />
<label for="awesomeDarkThemeToggle">Awesome Dark Theme</label>

Just set a Cookie / save it in the session / save it to the Users Settings (database,...)

 

Nono, I have a Toggle button in my Theme that is a Checkbox. So click it and it slides (Checks) click it again and it slides back (unchecks)

[leodaniel]

Just now, Joveice said:

Nono, I have a Toggle button in my Theme that is a Checkbox. So click it and it slides (Checks) click it again and it slides back (unchecks)

Okey and what is about this? What do you  need, the ability add a CSS class on change? I don't understand your question

[Joveice]

Just now, leodaniel said:

Okey and what is about this? What do you  need, the ability add a CSS class on change? I don't understand your question

I'm gonna disable or enable a webpage so I need a way to tell the backend "enable" "disable". This is what I have from before.

 

<form method="post" action="/update">
  <button name="status" value="enable" class="btn btn-info btn-xs">Enable</button>
  <button name="status" value="disable" class="btn btn-info btn-xs">Disable</button>
</form>

Then the backend checks what the value of status is and I wanna move this to a checkbox (the toggle) so if I check it the enable gets triggered somehow and visa versa

[leodaniel]

12 minutes ago, Joveice said:

I'm gonna disable or enable a webpage so I need a way to tell the backend "enable" "disable". This is what I have from before.

 

<form method="post" action="/update">
  <button name="status" value="enable" class="btn btn-info btn-xs">Enable</button>
  <button name="status" value="disable" class="btn btn-info btn-xs">Disable</button>
</form>

Then the backend checks what the value of status is and I wanna move this to a checkbox (the toggle) so if I check it the enable gets triggered somehow and visa versa

So if I'm getting it right, you just want a live update as soon as someone changes the value of the checkbox, right?

You have the onchange hook for that, as you see in my first post

<input type="checkbox" onchange="" onclick="" />

Or add listener in Javascript

document.getElementById('mybox').onchange = (e) => {
  /* Perform update using ... */
  alert(e.target.checked);
  
  /* Perfom Update with Axios or Ajax ... I use axios */
  axios.post('/your_end_point', {enable:e.target.checked})
    .then( (response) => {
    
    })
  	.catch((error)=>{
    
    });
}

 

[Joveice]

3 minutes ago, leodaniel said:

So if I'm getting it right, you just want a live update as soon as someone changes the value of the checkbox, right?

You have the onchange hook for that, as you see in my first post

<input type="checkbox" onchange="" onclick="" />

Or add listener in Javascript

document.getElementById('mybox').onchange = (e) => {
  /* Perform update using ... */
  alert(e.target.checked);
}

 

Okey thanks!

[leodaniel]

Just now, Joveice said:

Okey thanks!

I updated my post and added axios for the request, you are anyway free to use any HTTP client