I cant ajax post checkbox value in laravel 5.1 - php

I have many checkbox and other input like text,select ,textarea ,... in my form
I post all data of inputs but checkbox not post data
I saw this link
In Laravel 5.1 Can't post value of checkbox
But I do not want to use hidden button
Is there another way ?????
My form
<form id='test-form'>
<input name='text1'>
<input name='text2'>
<textarea name='text3'></textarea>
<input type="checkbox" name="test1" >
<input type="checkbox" name="test2" >
<input type="checkbox" name="test3" >
<input type="checkbox" name="test4" >
<input type="checkbox" name="test5" >
<input type="checkbox" name="test6" >
<input type="button" id='send'>
</form>
<script>
$(document).on("click", "#send", function () {
$.ajax({
type: 'post',
url: 'add',
data: $("#test-form").serialize(),
success: function (result) {
$('#ajax_div').html(result);
},
})
})
</script>

Your checkboxes will not send any data because they do not have the value attribute.
Change your html to:
<input type="checkbox" name="test[]" value="1" >
<input type="checkbox" name="test[]" value="2" >
<input type="checkbox" name="test[]" value="3" >
<input type="checkbox" name="test[]" value="4" >
<input type="checkbox" name="test[]" value="5" >
<input type="checkbox" name="test[]" value="6" >
<input type="button" id='send'>
Note that I also changed the names to test[], this will send an array of all the checkboxes that are checked.
For example: I check checkbox 1 and checkbox 3, the value that the server will receive is in $_REQUEST['test'] (either POST or GET), and will be an array with content [1,3].
If none of the checkboxes is marked, the $_REQUEST['test'] will be not set which you can check server side using isset().

Related

I want to get result of each checkbox in PHP POST by ajax on real time checkbox selection

I want to get result of each checkbox in PHP POST by ajax on real time checkbox selection
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$("input[type='checkbox']").on("click", showValues);
showValues();
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<form>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" id="ch2">
<label for="ch2">check2</label>
<input type="checkbox" name="check" value="check3" id="ch3">
<label for="ch2">check3</label>
<input type="checkbox" name="check" value="check4" id="ch4">
<label for="ch2">check4</label>
<input type="checkbox" name="check" value="check5" id="ch5">
<label for="ch2">check5</label>
</form>
<tt id="results"></tt>

How to add each of checked checkboxes to a signle row in MySQL

I have several checkboxes that contain names (ids as referrence to database) - see code below. How can I select all checked values and add them to database (via MySQL) each row for each checked?
<input type="checkbox" value="1" name="names[]">John
<input type="checkbox" value="2" name="names[]">Peter
<input type="checkbox" value="3" name="names[]">Mike
<input type="checkbox" value="4" name="names[]">Kattie
<input type="submit" value="Send" name="send">
After clicking "send" with requiered checked names, the result in database should look like this (I selected John and Mike):
Id
1
3
(only selected ones)
How can I achieve that?
You need to wrap your inputs in a <form> element and give this form a method of post:
<form method="post">
<input type="checkbox" value="1" name="names[]" />John
<input type="checkbox" value="2" name="names[]" />Peter
<input type="checkbox" value="3" name="names[]" />Mike
<input type="checkbox" value="4" name="names[]" />Kattie
<input type="submit" value="Send" name="send" />
</form>
This will allow you to post submitted data from your form inputs to your PHP.
Note: If your HTML is in a different file (ie not in the same file as your form) you can add the action attribute to your form (eg: action="fileWithPHP.php")
Now you can access all checked checkboxes in your PHP using $_POST['names']. This will allow you to get your array of checked values. You can then use a foreach loop to loop through every value in your array:
<?php
if(isset($_POST['names'])) {
$names = $_POST['names'];
foreach($names as $name) {
echo "Add " . $name . " to db here<br />"; // add $name to db
}
}
?>
You can wrap the inputs around a <form> and send it to php and retrieve using $_GET or $_POST and update the database.
I have used POST method here.
HTML:
<form action="test.php" method="post">
<input type="checkbox" value="1" name="names[]">John
<input type="checkbox" value="2" name="names[]">Peter
<input type="checkbox" value="3" name="names[]">Mike
<input type="checkbox" value="4" name="names[]">Kattie
<input type="submit" value="Send" name="send">
</form>
PHP:
if(!empty($_POST['names'])) {
foreach($_POST['names'] as $check) {
echo $check; //instead of echo you can insert it to the database
}
}

get the values of checked items with data-code value = '1' using .map in jQuery

i have the input in which attribute data-code has different values and i need the ids of only those items whose data-code value is '1' and its checked by user:
Here is my code:
<input class="options_ids" type="checkbox" data-code='*ids_of_the_items*'>
var student_ids = $('input:checked.student_ids').map(function () {
return this.value;
}).get().join(",");
now in this jquery function i also need to check the attribute data-code value is '1' or null, if 1 then store it in var else exclude.
You can use the attributes selector
var student_ids = $('.options_ids[data-code="1"]:checked').map(function() {
return this.value;
}).get();
console.log(student_ids)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="options_ids" type="checkbox" data-code='1' value="1" checked="checked">
<input class="options_ids" type="checkbox" data-code='5' value="2" checked="checked">
<input class="options_ids" type="checkbox" data-code='1' value="3" checked="checked">
<input class="options_ids" type="checkbox" data-code='6' value="4" checked="checked">
<input class="options_ids" type="checkbox" data-code='1' value="5" checked="checked">
var student_ids = $('.student_ids[data-code="1"]:checked').map(function() {
return this.value;
}).get().join(",");
console.log(student_ids);
<!-- use the right class -->
<input class="student_ids" type="checkbox" data-code='1' value="Dog" checked>
<input class="student_ids" type="checkbox" data-code='3' value="Hammer" checked>
<input class="student_ids" type="checkbox" data-code='1' value="Cat" checked>
<input class="student_ids" type="checkbox" data-code='14' value="Dance" checked>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Select all checkbox with jQuery form POST for multiple checkboxes

For a project I want to implement a nice filtering mechanism with multiple checkboxes. I get the checkboxes to work correctly as well as a jQuery function to automatically POST the form when checking a checkbox.
Now I want to add a "select all" checkbox above the checkboxes, but I cannot seem to find the correct way. I have tried a dozen solutions for (somewhat) similar questions but I cannot get it to work correctly and consistent.
The HTML part is something like this:
<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
<input type="checkbox" /> Select All colors<br/>
<label> <input type="checkbox" name="color[]" value="yellow"> Yellow</label><br/>
<label> <input type="checkbox" name="color[]" value="blue"> Blue</label><br/>
<label> <input type="checkbox" name="color[]" value="red"> Red</label><br/>
<label> <input type="checkbox" name="color[]" value="green"> Green</label><br/><br/>
<input type="checkbox" /> Select All brands<br/>
<label> <input type="checkbox" name="brand[]" value="Nike"> Nike</label><br/>
<label> <input type="checkbox" name="brand[]" value="Adidas"> Adidas</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeBrand"> SomeBrand</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeOtherBrand"> SomeOtherBrand</label><br/>
</form>
The jQuery part I use to post the form on each click on the checkbox (is not sufficient):
$('input:checkbox:').live('click',function() {
$(this).closest('form').submit();
});
My question now is what do I need for the jQuery part to make sure this works correctly?
I want to be able to click the label to deselect all from that group and select only that one checkbox. It also needs to POST the form for the array values. And lastly if all checkboxes are checked manually the "select all" one has to be checked as well.
Hopefully someone can help me out as I am stuck with this for a long time...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#colorall").click(function()
{
var checked_status = this.checked;
$(".color").each(function()
{
this.checked = checked_status;
});
});
$(".color").click(function(){
if($(".color").length == $(".color:checked").length) {
document.getElementById("colorall").checked = true;
} else {
$("#colorall").removeAttr("checked");
}
});
$("#brandall").click(function()
{
var checked_status = this.checked;
$(".brand").each(function()
{
this.checked = checked_status;
});
});
$(".brand").click(function(){
if($(".brand").length == $(".brand:checked").length) {
document.getElementById("brandall").checked = true;
} else {
$("#brandall").removeAttr("checked");
}
});
});
</script>
<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
<input type="checkbox" id="colorall" /> Select All colors<br/>
<label> <input type="checkbox" name="color[]" value="yellow" class="color"> Yellow</label><br/>
<label> <input type="checkbox" name="color[]" value="blue" class="color"> Blue</label><br/>
<label> <input type="checkbox" name="color[]" value="red" class="color"> Red</label><br/>
<label> <input type="checkbox" name="color[]" value="green" class="color"> Green</label><br/><br/>
<input type="checkbox" id="brandall"/> Select All brands<br/>
<label> <input type="checkbox" name="brand[]" value="Nike" class="brand"> Nike</label><br/>
<label> <input type="checkbox" name="brand[]" value="Adidas" class="brand"> Adidas</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeBrand" class="brand"> SomeBrand</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeOtherBrand" class="brand"> SomeOtherBrand</label><br/>
</form>

If a radio value is ==1 then request ajax

I have a registration form that i'm creating. In my html file, I have two radio boxes,
<input type="radio" name="whatever" value="0" id="whatever" checked//> No
<input type="radio" name="whatever" value="1" id="whatever"> Yes
If the value is 1 it should send an email using ajax, here is what I have,
if($("input[name='whatever']").val()=='2'){
$.ajax({
type: 'POST',
url: base + 'email',
data: vData,
success: function() {
// alert( "I'm the callback")
}
});
}
Thanks in advance for the help.
Start by fixing your markup so that you don't have duplicate ids:
<input type="radio" name="whatever" value="0" checked="checked" /> No
<input type="radio" name="whatever" value="1" /> Yes
and then you could use the :checked selector to detect the value of the currently selected radio button:
if($(':radio[name="whatever"]:checked').val() == '1') {
// the Yes radio button was checked =>
// you could do your AJAX request here ...
}
or give your radio buttons unique ids:
<input id="no" type="radio" name="whatever" value="0" checked="checked" /> No
<input id="yes" type="radio" name="whatever" value="1" /> Yes
and then:
if($('#yes').is(':checked')) {
// the Yes radio button was checked =>
// you could do your AJAX request here ...
}

Categories