Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Java][MySQL][PHP]Toggle button - dynamiczne zapisanie danych do MySQL
Forum PHP.pl > Forum > Przedszkole
globalinfo
13.03.2017, 12:46:11
Witam,

Znalazłem fajny przykład animowanego przycisku Toggle button.

Dostosowałem sobie kod do swoich potrzeb.


Kod
<script type="text/javascript">
function status(){
var el = document.getElementById('status1');
$.post("uaktualnienie.php", { status1: status1 });
}
</script>


<form method="get" action="./">
    <label for="status1"> </label><input type="checkbox"  
<? if ($status1==0){echo "checked disabled";}?>
id="status1" name="status1" data-on="Aktywny" data-off="Nieaktywny" />
     </form>


I teraz chciałbym aby klikniecie przycisku spowodowało wysłanie danej do bazy.
Nie bardzo mogę sobie z tym poradzić. questionmark.gif sciana.gif
Lord
13.03.2017, 13:16:17
https://developer.mozilla.org/pl/docs/Web/A...ddEventListener

musisz jakąś akacje dać jeszcze...

http://jsbin.com/vijomefefo/edit?html,js,output

a co chcesz uzyskać?
globalinfo
13.03.2017, 13:35:07
Cytat(Lord @ 13.03.2017, 13:16:17 ) *
a co chcesz uzyskać?



Check boks ustawia się w zależności jaką wartość zmiennej $status1 pobierze z bazy danych.
Chcę aby przełączenie buttonu w drugą pozycję spowodowało wysłanie wartości tego "chekboksu" do bazy danych.
Lord
13.03.2017, 13:51:40
no to co ci podałem zadziała, w miejsce alert("zrob cos") przeslij to do bazy za pomoca ajaxa
globalinfo
13.03.2017, 14:12:46
Zrobiłem tak i nie bardzo chce działać - tj. mam taki komunikat
Cytat
Uncaught TypeError: Cannot read property 'addEventListener' of null
at VM444 kontrol.php:146

Kod
<script type="text/javascript">
function status(){
$.post("uaktualnienie.php", { status1: status1 });
}

var el = document.getElementById("status1");
el.addEventListener("change", status1, false);
</script>

<form method="post" action="./">
    <label for="status1"> </label><input type="checkbox"  
<? if ($status1==1){echo "checked disabled";}?>

id="status1" name="status1" data-on="Aktywny" data-off="Nieaktywny" />
            
    </form>





Plik uaktualnienie.php
Kod
// Connect to MySQL
include("dbconnect.php");
$status1=$_POST['status1'];
$zapytanie = "UPDATE `Sterowanie` SET `L1`='$status1' WHERE `ID`='1'";
$idzapytania = mysql_query($zapytanie);
Lord
13.03.2017, 14:28:28
Cytat(globalinfo @ 13.03.2017, 15:12:46 ) *
Kod
<form method="post" action="./">
    <label for="status1"> </label><input type="checkbox"  
<? if ($status1==1){echo "checked disabled";}?>

id="status1" name="status1" data-on="Aktywny" data-off="Nieaktywny" />
            
    </form>
<script type="text/javascript">
function status(){
$.post("uaktualnienie.php", { status1: status1 });
}

var el = document.getElementById("status1");
el.addEventListener("change", status, false);
</script>

https://developer.mozilla.org/pl/docs/Web/API/Window/onload

viking ma racje, mój bład:

https://api.jquery.com/change/
viking
13.03.2017, 14:29:31
https://api.jquery.com/ready/
albo wrzuć script pod element. Skoro korzystasz z jquery to najlepiej nie mieszaj z czystym js.
globalinfo
13.03.2017, 14:36:08
Komunikat o błędzie już nie występuje, ale dane nie zapisują się do bazy. questionmark.gif
Lord
13.03.2017, 14:39:09
pomyłka tongue.gif

i poczytaj o mysqli i pdo
viking
13.03.2017, 14:42:26
Jakieś błędy w konsoli albo po stronie PHP? mysql już dawno nie powinieneś używać tylko np PDO. Twój kod jest podatny na sql injection i mało czytelny. id = '1' - kolumna id na pewno nie jest stringiem tylko liczą zatem id = 1. Do funkcji status nigdzie nie przekazujesz status1.
globalinfo
13.03.2017, 16:16:36
Cytat(viking @ 13.03.2017, 14:42:26 ) *
Jakieś błędy w konsoli albo po stronie PHP? mysql już dawno nie powinieneś używać tylko np PDO. Twój kod jest podatny na sql injection i mało czytelny. id = '1' - kolumna id na pewno nie jest stringiem tylko liczą zatem id = 1. Do funkcji status nigdzie nie przekazujesz status1.


PHP i konsola nie wyświetla błędów.
id = '1' z tym nie mam problemu ponieważ dane mi się pobierają bezbłędnie.
status1 - nie bardzo wiem jak to uzupełnić.

viking
13.03.2017, 16:43:52
https://jsfiddle.net/omoyr6kf/

Status będzie true/false, możesz sobie choćby filter_var na 1/0 przekształcić.
globalinfo
14.03.2017, 07:42:20
Wstawiłem warunki jednak dalej dane się nie zapisują.
Wszystko wskazuje że post się nie wykonuje po kliknieciu.
Dodatkowo mam komunikat
Cytat
kontrol.php:404 Uncaught TypeError: $(...).prop is not a function
at HTMLInputElement.<anonymous> (kontrol.php:404)
at HTMLInputElement.dispatch (jquery-1.10.2.js:5095)
at HTMLInputElement.elemData.handle (jquery-1.10.2.js:4766)

Kod
<form method="post" action="">
    <label for="status1">Status1</label>
    <input type="checkbox"
id="status1" name="status1" data-on="Aktywny" data-off="Nieaktywny" />
     </form>
<script type="text/javascript">
$('#status1').on('change', function(e) {
    e.preventDefault();
    $.post("uaktualnienie.php", { status1: $(this).prop('checked') });
});
</script>


plik uaktualnienie.php
Kod
// Connect to MySQL
include("dbconnect.php");

if(isset($_POST['status1'])){
if ($_POST['status1']==TRUE){$status1=1;}
if ($_POST['status1']==FALSE){$status1=0;}
$zapytanie = "UPDATE `Sterowanie` SET `L1`='$status1' WHERE `ID`='1'";
$idzapytania = mysql_query($zapytanie); }
viking
14.03.2017, 07:53:48
Jak widzisz kod działa na jsfiddle i wysyła żądanie. Tak w ogóle to mamy już jquery 3.1. Spróbuj attr()
globalinfo
14.03.2017, 11:30:34
No udało wreszcie zapisać do bazy.
Z takim kodem udało się zapisać daną do bazy
Kod
     <input type="checkbox" <? if ($status1==1){echo "checked disabled";}?>
id="status1" name="status1" data-on="Aktywny" data-off="Nieaktywny" />
     </form>
<script type="text/javascript">
$('#status1').on('change', function(e) {
    e.preventDefault();
    var bufor = $(this).attr("checked");
alert('dana przekazana to -  '+bufor);
    $.post("uaktualnienie.php", { status1: bufor });
});
</script>

Ale teraz gdy mam wartość 1 dla $status1 przycisk mam w pozycji "Aktywny" i teraz funkcja nie działa.
Jak z tym sobie poradzić aby funkcja działała przy $status1=1 czy $status1=0 sciana.gif questionmark.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.