Dynamiczne przesłanie zmiennej - toggle button

Kombinuje sobie jak przesłać zmienną do bazy danych zaraz po kliknięciu w checkbox.
Fajny przykład znalazłem na Better Check Boxes
Dostosowałem go do swoich potrzeb - sam przysisk działa bez problemu ale przekazanie zmiennej mi nie wychodzi bo otrzymuje komunikat:

Uncaught TypeError: $(...).prop is not a function
at HTMLInputElement.<anonymous> (kontrol.php:404)
at HTMLInputElement.dispatch (jquery-3.1.1.min.js:3)
at HTMLInputElement.q.handle (jquery-3.1.1.min.js:3)

Może mnie naprowadzicie na własciwa ścieżkę.

 <form method="post" action="">
    <label for="status1">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">
$('#status1').on('change', function(e) {
    e.preventDefault();
    $.post("uaktualnienie.php", { status1: $(this).prop('checked') });
});
</script> 

Kod dla uaktualnij.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); }

W ajaxie nie masz dostępu do this

Musisz przed zapytaniem zapisać w jakimś buforze np. var bufor = $(this).prop('checked'); $.post(... bufor...

stivens napisał(a):

Musisz przed zapytaniem zapisać w jakimś buforze np. var bufor = $(this); $.post(... bufor.prop('checked') ...

Nie jestem w tym mocny - możesz podpowiedzieć jak ma wyglądać prawidłowy kod.

Tak nie chce działać dalej ten sam błąd

 <script type="text/javascript">
$('#status1').on('change', function(e) {
    e.preventDefault();
var bufor = $(this).prop('checked');
    $.post("uaktualnienie.php", { status1: $bufor.prop('checked') });
});
</script> 

Przepraszam jestem teraz z telefonu i raczej źle się koduje. I chyba moja poprzednia odpowiedź jest prawidłowa ale nie dotyczy tego przypadku (this jest w argumencie ajaxa a nie w jego funkcji)

Zobacz proszę jeszcze .is(":checked") lub .attr("checked")

Up: Ej ale boola już masz w buforze, to nie jest obiekt

Nigdzie przecież nie masz zdefiniowanej zmiennej $bufor.

Teraz mam tak

 <script type="text/javascript">
$('#status1').on('change', function(e) {
    e.preventDefault();
    var bufor = $(this).prop('checked');
    $.post("uaktualnienie.php", { status1: bufor });
});
</script>

i dalej jest błąd po kliknięciu

Uncaught TypeError: $(...).prop is not a function
at HTMLInputElement.<anonymous> (kontrol.php:404)
at HTMLInputElement.dispatch (jquery-3.1.1.min.js:3)
at HTMLInputElement.q.handle (jquery-3.1.1.min.js:3)

teraz chodzi o ta linię

 var bufor = $(this).prop('checked');

stivens napisał(a):

Zobacz proszę jeszcze .is(":checked") lub .attr("checked")

stivens napisał(a):

Zobacz proszę jeszcze .is(":checked") lub .attr("checked")

W obydwu przypadkach błąd nie wyskakuje, ale dane nie zostały zapisane do bazy.
jak sprawdzić co zostało wysłane do uaktualnienie.php

console.log tej wartości przed wysłaniem
A z back-endu odpowiedz tą wartością i w metodzie success ajaxa daj alerta np.

Albo zakładka network w narzędziach developerskich

PS. Sprawdź jeszcze ze slashem przed adresem skryptu

No udało wreszcie zapisać do bazy.
Dziękuję za pomoc.
Dana została zapisana do bazy.

    <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

** UŻYWAJ PDO **

<?php

if (!isset($_POST['status1'])) {
    // jeżeli ktoś nie podał statusu, to zwracamy kod błędu
    // 422 - Unprocessable Entity i kończymy skrypt
    http_response_code(422);
    echo json_encode(["error" => ["message" => "Niepoprawne dane"]]);
    exit;
}

// dane do połączenia się z bazą
$user = 'root';
$password = '';
$dbname = 'testowa_baza';

// tworzymy połączenie z bazą danych - od dzisiaj uzywaj takiego!!
$connection = new PDO("mysql:host=localhost;dbname=$dbname", $user, $password);

$sql = "UPDATE `Sterowanie` SET `L1` = :l1 WHERE `ID`='1'";
$statement = $connection->prepare($sql);

$status = $_POST['status1'] ? 1 : 0;
// bindujemy parametr, a nie wpieprzamy do zapytania
// poczytaj o SQL injection
$statement->bindValue(':l1', $status);

// wykonujemy zapytanie
if(!$statement->execute()) {
    // jeżeli update się nie powiódł, to zwracamy kod błędu
    // 500 - Internal Server Error i kończymy skrypt
    http_response_code(500);
    echo json_encode(["error" => ["message" => "Błąd podczas zapisu do bazy"]]);
    exit;
}

// wszystko ok, ustawiamy 204 - No Content i nic nie zwracamy
http_response_code(204);
exit;

const $statusCheckbox = $('#status1');

$statusCheckbox.change(function() {
  $.post('update_sterowanie.php', {
    status1: $(this).prop('checked')
  }).done(function(res) {
    alert("Success");
  }).fail(function(res) {
    const error = JSON.parse(res.responseText);
    alert(error.error.message);
  });
});

Dziękuję za pomoc.
No udało wreszcie zapisać do bazy.

     <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

dałeś echo disabled dla true

stivens napisał(a):

dałeś echo disabled dla true

Tak chciałem aby przy załadowaniu strony przycisk był ustawiony w pozycję "Aktywny" jeżeli wcześniej była zapisana 1 do bazy.
jak z tym sobie poradzić?

Ale jeśli jest disabled to nie można go kliknąć i striggerować onclicka

stivens napisał(a):

Ale jeśli jest disabled to nie można go kliknąć i striggerować onclicka

No to jak mogę z tego wybrnąć - przycisk musi się ustawiać zgodnie z wartością pobraną z bazy.

Disabled to wyłączony - nie wiem co to tutaj robi
Checked - zaznaczony - to chyba wystarczy?

stivens napisał(a):

Disabled to wyłączony - nie wiem co to tutaj robi
Checked - zaznaczony - to chyba wystarczy?

Na początku pisałem że kod przerobiłem pod swoje potrzeby.
Bez "checked disabled" przycisk się nie przestawi w pozycję "Aktywny" przy $status1==1

Pliki które pobrane były ze strony
jquery.tzCheckbox.js

 (function($){
	$.fn.tzCheckbox = function(options){
		
		// Default On / Off labels:
		
		options = $.extend({
			labels : ['ON','OFF']
		},options);
		
		return this.each(function(){
			var originalCheckBox = $(this),
				labels = [];

			// Checking for the data-on / data-off HTML5 data attributes:
			if(originalCheckBox.data('on')){
				labels[0] = originalCheckBox.data('on');
				labels[1] = originalCheckBox.data('off');
			}
			else labels = options.labels;

			// Creating the new checkbox markup:
			var checkBox = $('<span>',{
				className	: 'tzCheckBox '+(this.checked?'checked':''),
				html:	'<span class="tzCBContent">'+labels[this.checked?0:1]+
						'</span><span class="tzCBPart"></span>'
			});

			// Inserting the new checkbox, and hiding the original:
			checkBox.insertAfter(originalCheckBox.hide());

			checkBox.click(function(){
				checkBox.toggleClass('checked');
				
				var isChecked = checkBox.hasClass('checked');
				
				// Synchronizing the original checkbox:
				originalCheckBox.attr('checked',isChecked);
				checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
			});
			
			// Listening for changes on the original and affecting the new one:
			originalCheckBox.bind('change',function(){
				checkBox.click();
			});
		});
	};
})(jQuery);

script.js

 $(document).ready(function(){
	
	$('input[type=checkbox]').tzCheckbox({labels:['Enable','Disable']});
});