Checkbox waardes naar php array

Door Loek Lemmens op 15-01-2020 21:31

2.360 views

Goede avond,

Met AJAX will ik checkbox waardes in een array sturen naar php.


<label>1 <input type="checkbox" class="ids" name="ids[]" value="1"></label>
<label>2 <input type="checkbox" class="ids" name="ids[]" value="2"></label>
<label>3 <input type="checkbox" class="ids" name="ids[]" value="3"></label>
<label>4 <input type="checkbox" class="ids" name="ids[]" value="4"></label>
<label>5 <input type="checkbox" class="ids" name="ids[]" value="5"></label>
<label>6 <input type="checkbox" class="ids" name="ids[]" value="6"></label>
<button id="submit">Submit</button>
<div id="response"></div>

<script>
$(document).ready(function(){
	$('#submit').click(function() {
		var input = $('.ids:checked').serialize();
		$.ajax({
			url: "/testajax.php",
			type: "GET",
			data: ({what:input}),
			success: function(data) {
				$('#response').html(data);
			}
		});
	});
});
</script>


<?php
$arr = $_GET['what'];
var_dump ($arr);
?>

De uitkomst isstring(11) "ids%5B%5D=6"

Doe ik de code zoals hieronder dan krijg ik de array wat ik wil


<script>
$(document).ready(function(){
	$('#submit').click(function() {
		//var input = $('.ids:checked').serialize();
		$.ajax({
			url: "/testajax.php",
			type: "GET",
			data: $('.ids:checked').serialize(),
			success: function(data) {
				$('#response').html(data);
			}
		});
	});
});
</script>


<?php
$arr = $_GET['ids'];

var_dump ($arr);
?>

De uitkomst array(1) { [0]=> string(1) "6" }

Waarom word met de bovenste code een string terug gegeven?

- Ariën -

15-01-2020 22:35

Omdat het standaard de value is die je ophaalt uit de GET. En dat is standaard een string.
Bedoel je geen $_GET? Dan krijg je een mooie array te zien.

Jop B

15-01-2020 22:39

Probeer eens .serializeArray() te gebruiken ipv serialize()

var input = $('.ids:checked'). serializeArray();

Loek Lemmens

15-01-2020 23:03

Dan krijg ik dit als resultaat
array(1) { [0]=> array(2) { ["name"]=> string(5) "ids[]" ["value"]=> string(1) "6" } }

Vervolgens wil ik een loop maken in php en dat heb ik zo


<?php
$arr = $_GET['what'];


foreach($arr as $as){
	foreach($as as $a=>$key){
		echo 'Hello '.$key.'<br>';
	}
}
?>

Het resultaat is dan


Hello ids[]
Hello 6

Wat moet ik nu nog doen om Hello ids[] weg te krijgen en enkel Hello 6 te tonen?

Jop B

16-01-2020 00:15


<?php
foreach($arr as $as){ 
echo 'Hello '.$as['value'].'<br>';
 }
?>

Michael -

16-01-2020 00:35 gewijzigd op 16-01-2020 00:52

Of
<?php
foreach($_GET['ids'] as $val) {
echo $val . '<br>';
}
?>

EDIT:
De toevoeging van 'checked' heeft hier trouwens geen enkel nut.
Alleen checkboxes die geselecteerd zijn worden doorgestuurd.
data: $('.ids').serializeArray() is daarom voldoende.
Je zou alles ook nog in een <form> kunnen zetten zoals dat normaal hoort bij een formulier, dan kun je $('form').serializeArray() gebruiken.

EDIT2:
Mocht je de form tag gebruiken, moet je wel het submitten 'opvangen'.
Voorbeeldje:


<form>
<label>1 <input type="checkbox" class="ids" name="ids[]" value="1"></label>
<label>2 <input type="checkbox" class="ids" name="ids[]" value="2"></label>
<label>3 <input type="checkbox" class="ids" name="ids[]" value="3"></label>
<label>4 <input type="checkbox" class="ids" name="ids[]" value="4"></label>
<label>5 <input type="checkbox" class="ids" name="ids[]" value="5"></label>
<label>6 <input type="checkbox" class="ids" name="ids[]" value="6"></label>
<button id="submit">Submit</button>
</form>
<div id="response"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
    $('#submit').click(function(e) {
		$.get( "testajax.php", $('form').serializeArray(), function( data ) {
			$( "#response" ).html( data );
		});
		(e.preventDefault)?e.preventDefault():e.returnValue=false; // Voorkomt het submitten van het formulier
    });
});
</script>

<?php
//testajax.php

foreach($_GET['ids'] as $val) {
echo $val . '<br>';
}
?>

Reageren

Inloggen om te reageren