Checkbox waardes naar php array
Met AJAX will ik checkbox waardes in een array sturen naar php.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
<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>
De uitkomst isstring(11) "ids%5B%5D=6"
Doe ik de code zoals hieronder dan krijg ik de array wat ik wil
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
$(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>
De uitkomst array(1) { [0]=> string(1) "6" }
Waarom word met de bovenste code een string terug gegeven?
Bedoel je geen $_GET? Dan krijg je een mooie array te zien.
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
Code (php)
Het resultaat is dan
Wat moet ik nu nog doen om Hello ids[] weg te krijgen en enkel Hello 6 te tonen?
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
<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>
Gewijzigd op 16/01/2020 00:52:36 door Michael -