TO CLARIFY I'VE GOT THE VALUES OF THE CHECKED CHECKBOXES. I NEED TO ORGANIZE THEM IN AN ARRAY SIMILAR TO THE PHP EXAMPLE GIVEN. THANKS
I'm trying to build an array of checked checkboxes to be sent over AJAX for processing by PHP. Originally I got the selected checkboxes by PHP but I'm having trouble converting this process to Javascript.
There are three different groups of checkboxes ('first', 'second', 'third') and for each of these groups there are 4 different checkboxes that can be checked.
The html of the checkboxes followings the same pattern up to value 4.
<input type="checkbox" name="first" class="selection first" value="1" />
<input type="checkbox" name="second" class="selection second" value="1" />
<input type="checkbox" name="third" class="selection third" value="1" />
<input type="checkbox" name="first" class="selection first" value="2" />
<input type="checkbox" name="second" class="selection second" value="2" />
<input type="checkbox" name="third" class="selection third" value="2" />
and so on....
The PHP code would return an array of the checked checkboxes like such.
$selections => array(
['first'] => array(
[0] => 1,
[1] => 3,
[2] => 4),
['second'] => array(
[0] => 2),
['third'] => array(
[0] => 1,
[1] => 4)
);
I've been trying and trying to replicate this in JavaScript but I keep getting errors such as cannot convert undefined to object and the likes. I loop the available positions to create arrays, then loop all the checkboxes and if checked, I get the value.
console.log() prints the position ('first', 'second' or 'third') and the number of the selection (1 - 4). That's all I need, but how do I put this in an array similar to the PHP one?
function getSelections() {
var selections = new Array();
$('.position').each(function() {
selections[$(this).attr('value')] = new Array;
});
$('.selection').each(function() {
if( $(this).prop('checked') == true ) {
position = $(this).attr('name');
selection = $(this).attr('value');
console.log(position + ' - ' + selection);
}
});
return selections;
}
It's to be sent to a PHP script as JSON and I need to decode it as an array like the PHP one.
Nothing fancy needed.... change to this and view the posted arrays.
<input type="checkbox" name="first[]" class="selection first" value="1" />
<input type="checkbox" name="second[]" class="selection second" value="1" />
<input type="checkbox" name="third[]" class="selection third" value="1" />
<input type="checkbox" name="first[]" class="selection first" value="2" />
<input type="checkbox" name="second[]" class="selection second" value="2" />
<input type="checkbox" name="third[]" class="selection third" value="2" />
Then serialize this as normal to submit via ajax instead.
Jquery :checked Selector may help
Related
Trying to create a search function using multiple checkboxes, but seem to be only finding information related to $_POST requests.
<input type="checkbox" name="fruit" value="1">
<input type="checkbox" name="fruit" value="2">
<input type="checkbox" name="fruit" value="3">
<input type="checkbox" name="fruit" value="4">
<input type="checkbox" name="fruit" value="5">
What is the best way to get the query to look like this
search?fruit=1,2,3,4
Is there a way to do this non ajax?
Just to clarify...
Each value represents a different fruit.
Originally I did this
search?apple=1&orange=1
As I added more checkboxes, the query seemed inefficient.
I know that I can add the checkboxes into the array using the $_POST method
<input type="checkbox" name="fruit[]" value="1">
<input type="checkbox" name="fruit[]" value="2">
As a few have suggested using this technique for a $_GET query would look something like this
search?fruit[]=1&fruit[]=2&fruit[]=5
So the question is really how to clean it up (comma seperated)
NOTE: As others have pointed out, it isn't necessary to pass a single parameter with a comma-separated value to end up with an array or a comma-separated value on the server. Frameworks like PHP can handle this with no JavaScript required. You can simply give each checkbox the same "name" attribute. That will cause multiple parameters with the same name to be passed to the server, which is just fine. In fact, it is the same result you would get if you used a <select multiptle="multiple"> element.
In PHP, if you use a name with square brackets at the end, like fruit[], you can then get an array on the server with:
$_GET['fruit']
And if you want a comma-separated value on the server, you can use:
implode(',', $_GET['fruit'])
But if you really want a single parameter with a comma-separated value, here is how you can do it:
You can use a form with a hidden input. Set the form's "method" to "get" and the hidden input's "name" to "fruit". Then add an event handler that sets the value of the hidden input to the comma-separated string when the form is submitted.
HTML:
<form id="fruitForm" action="search" method="get">
<input type="hidden" name="fruit" />
<label><input type="checkbox" value="1" />apple</label><br />
<label><input type="checkbox" value="2" />banana</label><br />
<label><input type="checkbox" value="3" />orange</label><br />
<label><input type="checkbox" value="4" />pineapple</label><br />
<label><input type="checkbox" value="5" />grapefruit</label><br />
<button type="submit">submit</button>
</form>
JQuery:
$('#fruitForm').submit(function() {
var fruits = $('#fruitForm').find('input:checkbox:checked').map(function() {
return $(this).val();
}).get().join(',');
$('#fruitForm').find('input[name=fruit]').val(fruits);
});
Note: The checkbox elements do not have "name" attributes, so they do not get included in the form submission.
jsfiddle
Use fruit[] as the input name
<input type="checkbox" name="fruit[]" value="1">
<input type="checkbox" name="fruit[]" value="2">
<input type="checkbox" name="fruit[]" value="3">
<input type="checkbox" name="fruit[]" value="4">
<input type="checkbox" name="fruit[]" value="5">
You will get the following:
echo "<pre>", print_r($_GET["fruit"], true);
Output
Array
(
[0] => 1
[1] => 2
[2] => 3
[3] => 4
[4] => 5
)
Try this, Use checkbox name as fruit[]. In php get the fruit array and converted as string using implode()
<?php
echo $fruits = implode(",",$_GET['fruit']); //1,2,3,4,5
?>
<form>
<input type="checkbox" name="fruit[]" value="1">
<input type="checkbox" name="fruit[]" value="2">
<input type="checkbox" name="fruit[]" value="3">
<input type="checkbox" name="fruit[]" value="4">
<input type="checkbox" name="fruit[]" value="5">
<input type="submit">
</form>
I have a form that has a set of radio buttons, and I am sending the value of the checked button to another page with php. The form has the option to add another set of the same radio buttons, so if I use the following method of giving name attributes:
<div>
<input type="radio" name="food[]" value="apple" /> Apple
<input type="radio" name="food[]" value="orange" /> Orange
</div>
And add a clone of the above,
$_POST['food'];
This would give me the value of each input, and that would total 4. I'm trying to use the bracket incrementing method but still keep the functionality of returning the value of the radio button that was checked.
So my question is, is there a way to use the square brackets to do auto incrementing on the name attribute, but when sending the values to php make sure each div grouping of radio buttons only returns one of the values for whichever one is checked? Please let me know if this question is too vague, this is my first question here.
May i don't understand your question. You can not Auto Incremented the name cause you use radio buttons. By Choosing apple on the first page and orange on the second you will loose your first choose (apple). You can do it with checkboxes instead of radio buttons:
Page 1:
<form method="post" action="page2.php">
<div>
<input type="checkbox" name="numberofapples" value="1" /> Apple
<input type="checkbox" name="numberoforanges" value="1" /> Orange
</div>
<input type="submit" value="go">
</form>
Page 2:
<form method="post" action="result.php">
<div>
<?if($_POST['numberofapples']){?><input type="hidden" name="numberofapples" value="1" /> <?}?>
<input type="checkbox" name="numberofapples" value="<?=($_POST['numberofapples'])?2:1?>" /> Apple
<?if($_POST['numberoforanges']){?><input type="hidden" name="numberoforanges" value="1" /> <?}?>
<input type="checkbox" name="numberoforanges" value="<?=($_POST['numberoforanges'])?2:1?>" /> Orange
</div>
<input type="submit" value="go">
</form>
Result page:
Apples: <?=($_POST['numberofapples'])?$_POST['numberofapples']:0?>
Oranges: <?=($_POST['numberoforanges'])?$_POST['numberoforanges']:0?>
But why don't you do the counting after posting your second page? (add the post values from page 1 as hidden fields to the form of page 2)
If you want to use several div groups with the same input names, I would create them like this:
<div>
<input type="radio" name="food[0][]" value="apple" /> Apple
<input type="radio" name="food[0][]" value="orange" /> Orange
</div>
<div>
<input type="radio" name="food[1][]" value="apple" /> Apple
<input type="radio" name="food[1][]" value="orange" /> Orange
</div>
<div>
<input type="radio" name="food[2][]" value="apple" /> Apple
<input type="radio" name="food[2][]" value="orange" /> Orange
</div>
So, in your PHP, you will have each group in separated keys. For example
print_r( $_POST['food'] );
Should return something like this:
array(
[0] => array(
[0] => 'apple'
),
[1] => array(
[0] => 'orange'
),
[2] => array(
[0] => 'apple',
[1] => 'orange'
)
)
)
I have 42 checkboxes in my form as im programming a page where the user is choosing their interests.
By naming all the checkboxes "interest", is there any way of making an array of values?
Example:
<input type="checkbox" name="interest" value="34" />
<input type="checkbox" name="interest" value="19" />
//values in array
$interestArray[0] = 34;
$interestArray[1] = 19;
You're looking for this?
<form method="POST" action="">
<input type="checkbox" name="interest[]" value="34" />
<input type="checkbox" name="interest[]" value="19" />
<input type="checkbox" name="interest[]" value="56" />
//values in array
$_POST['interest'][0] = 34;
$_POST['interest'][1] = 19;
$_POST['interest'][2] = 56;
Specifying an arrays key is optional in HTML. If you do not specify the keys, the array gets filled in the order the elements appear in the form.
From PHP manual: How do I create arrays in a HTML ?
Yes you can:
<input type="checkbox" name="formDoor[]" value="A" />Acorn Building<br />
<input type="checkbox" name="formDoor[]" value="B" />Brown Hall<br />
Then use the array:
<?php
$aDoor = $_POST['formDoor'];
.....
}
?>
Use PHP's array shortcut notation: name="interest[]". The [] tell PHP to treat multiple values as part of an array. Each checked checkbox will get its own entry in that array.
I have a php array containing the mysql values of checkboxes, which has been selected previously. I am trying to do an edit page of sorts which will show the already selected checkboxes, but seem to be having issues with it. I've tried different ways but can't seem to get it working.
Here's my php array of previously selected checkboxes:
Array
(
[0] => 1
[1] => 3
)
And here's my checkboxes:
<input type="checkbox" name="company[]" id="company[]" value="1">
<input type="checkbox" name="company[]" id="company[]" value="4">
<input type="checkbox" name="company[]" id="company[]" value="2">
<input type="checkbox" name="company[]" id="company[]" value="3">
I can't seem to work out how to get the checkboxes (from the php array - value 1 and 3) to already be selected..
Here's a server side solution to do it when the page is created.
<?php
function check_checked($index,$check_array){
if (in_array($index,$check_array)){ echo 'checked="checked"';}
}
$checked=array(1,3);
?>
<input type="checkbox" name="company[]" id="company[]" value="1" <?php check_checked(1,$checked);?>>
<input type="checkbox" name="company[]" id="company[]" value="4" <?php check_checked(4,$checked);?>>
<input type="checkbox" name="company[]" id="company[]" value="2" <?php check_checked(2,$checked);?>>
<input type="checkbox" name="company[]" id="company[]" value="3" <?php check_checked(3,$checked);?>>
If you were going to do it with JavaScript, I'd suggest printing the array into a JS var with json_encode and going from there. Server side makes more sense, though, since you already have the data to start with.
<input type="checkbox" name="company[]" id="company[]" value="1" checked>
If you specifically want jQuery to do it:
http://www.electrictoolbox.com/check-uncheck-checkbox-jquery/
The simpliest way is to do it on the server side:
foreach ($array as $value) {
$che = $value? "checked":"";
print '<input type="checkbox" name="company[]" id="company[]" value="1" '.$che.'>';
}
So that in PHP I can deal with them as :
foreach($_POST['checkboxname'] as $i => $value)
...
Do something like this:
<input type="checkbox" name="checkboxArray[]" />
Note the [] in the name.
Like this:
<input type="checkbox" name="checkboxname[]" />
<input type="checkbox" name="checkboxname[]" />
<input type="checkbox" name="checkboxname[]" />
<input type="checkbox" name="checkboxname[]" />
<input type="checkbox" name="checkboxname[]" />
Just append [] to their names.
If you use an array for the checkboxes, you should add a value option as identifier for the single checkboxes, because then the returned array changes from
Array ( [0] => on, [1] => on) to Array ( [0] => value1, [1] => value5 ), which let you identify the checked checkboxes.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(even){
$("button").click(function(){
var checkvalue = [];
$.each($("input[name='1']:checked"), function(){
checkvalue.push($(this).val());
});
alert("checkvalue: " + checkvalue.join(", "));
});
});
</script>
<body>
<input type="checkbox" name="1" value="1" > 1 <br/>
<input type="checkbox" name="1" value="2"> 2 <br/>
<input type="checkbox" name="1" value="3"> 3 <br/>
<button type="button">Get Values</button>
</body>
</html>
for those HTML form elements that can send multiple values to server (like checkboxes, or multiple select boxes), you should use an array like name for your HTML element name. like this:
<input type="checkbox" name="checkboxname[]" />
also it is recommended that you use an enctype of "multipart/form-data" for your form element.
<form enctype="multipart/form-data" action="target.php" method="post">
then in your PHP scripts you can access the multiple values data as an array, just like you wanted.