Actually I want to append to div only checked values but it is appending unchecked values also. I used in_array function to check conditions if value is checked means append only checked value not all but it is appending all the values but its checking only value please somebody help me out..
Below is HTML and PHP code:-
<div class="flDrop">
<div class="flDropDiv">
<?php
foreach ($filter_group['filter'] as $filter) { ?>
<?php
if(in_array($filter['filter_id'],$filter_category))
{ ?>
<input name="filter[]" type="checkbox" value="<?php echo $filter['filter_id']; ?>" checked> <?php echo $filter['name'];?>
<?php } else {?>
<input name="filter[]" type="checkbox" value="<?php echo $filter['filter_id']; ?>"> <?php echo $filter['name'];?>
<?php }?>
<?php }?>
</div>
</div>
Jquery code:-
setTimeout(function(){
var filter_len = $('input[name^=\'filter\']:checked').length
// alert(filter_len);return false;
$("#auto_filter_values").empty();
if(filter_len>1){
/*$("#auto_filter_values").append('<div class="afr clearall">Clear All filters</div>');*/
}
$('input[name^=\'filter\']:checked').each(function(element) {
$("#auto_filter_values").append('<div class="afr fSbtn" id="fSfilter'+this.value+'" data-val="'+this.value+'">'+$(this).parent().text().replace(/\(([A-Za-z0-9 ]+?)\)/, '')+'<span class="fSc"></span></div>');
});
}, 100);
Working fine with some small changes (an example code):-
setTimeout(function(){
$.each($("input[name='filter[]']:checked"), function(){ //change here
$("#auto_filter_values").append('<div class="afr fSbtn" id="fSfilter'+this.value+'" data-val="'+this.value+'">'+$(this).attr('data-id')+'<span class="fSc"></span></div>'); // changes here
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flDrop">
<div class="flDropDiv">
<input name="filter[]" type="checkbox" value="1" data-id ="Black" checked> Black <br>
<input name="filter[]" type="checkbox" value="2" data-id ="Black">Red<br/>
<input name="filter[]" type="checkbox" value="3" data-id ="Pink" checked>Pink<br/>
<input name="filter[]" type="checkbox" value="4" data-id ="Blue">Blue<br/>
</div>
</div>
<div id = "auto_filter_values" style ="margin-top:30px;"></div>
Note:- you need to add data-id attribute with you color name on check-boxes and then you can get easily
Related
I'm trying to Show/hide my input after check/uncheck a checkbox but I getting this info from DB so, I'm using PHP to add 'checked' attribute to my input.
jQuery code is working, but when I refresh the page, my input doesn't show even with attribute checked "enabled".
PHP code
<label>Send cash?</label>
<input class="reg_cash" type="checkbox" name="reg_cash" value="1"
<?php echo ($configs->reg_cash) ? 'checked' : '' ?>>
<div class="reg_cash_amount">
<label>Amount of cash</label>
<input type="text" name="reg_cash_amount" id="coupon_field"/>
</div>
Jsfiddle: https://jsfiddle.net/qmmg3qwo/
try this to hide/show the input field based on database values.
php code
<label>Send cash?</label>
<input class="reg_cash" type="checkbox" name="reg_cash" value="1"
<?php echo ($configs->reg_cash) ? 'checked' : '' ?>>
<?php if($configs->reg_cash) { ?>
<div class="reg_cash_amount">
<label>Amount of cash</label>
<input type="text" name="reg_cash_amount" id="coupon_field"/>
</div>
<?php } ?>
Jquery code
$(".reg_cash").click(function () {
if ($(this).is(":checked")) {
$(".reg_cash_amount").show();
} else {
$(".reg_cash_amount").hide();
}
});
Ive saved form data with ajax and php, reusing the data from the database.
However the way I am approaching this is different, there is no database, so some insight would be great.
I am emailing form data, all the data is just simple checkboxes, the values are either 0 or 1. When the user refreshes the page id like to keep the checked values.
I guess without a database I would need to use cookies, and the only way to avoid cookies would be ajax and a database (strictly my logic, not sure if true), this is why I am asking, I just want a simple solution.
Form snippet:
<input name="sharks" type="hidden" value="0">
<input name="sharks" type="checkbox" value="1" id="sharks" '.$VALUE ? ' checked="checked"' : ''.'>
The php part of that input is shaky, Id like to question whether the value is 0 or 1, if its 1 then its checked if its 0 then empty.
Getting it from the database would be easier but not so sure since there is no database, Im guessing cookies would come into place.
Sorry if this last part is shaky but im a little unsure and dont know where to look.
Using Sessions:
session_start();
if(isset($_POST['submit'])) {
if(isset($_POST['personalization_result'])) {
$_SESSION['value'] = $_POST['personalization_result']; }
else {
$_SESSION['value'] = '';
}
}
Form
<form action="<?php the_permalink(); ?>" method="post" id="question-form">
<input type="hidden" name="submit" value="1">
<?php
if ($_SESSION['value'] == 1) {
$checked = 'checked="checked"'; }
?>
<li>
<input name="personalization_result[memory_0]" type="hidden" value="0">
<input name="personalization_result[memory_0]" type="checkbox" value="1" id="personalization_result_memory_0" <?php $checked ?> >
</li>
<li>
<input name="personalization_result[memory_1]" type="hidden" value="0">
<input name="personalization_result[memory_1]" type="checkbox" value="1" id="personalization_result_memory_1" <?php $checked ?> >
</li>
<li>
<input name="personalization_result[memory_2]" type="hidden" value="0">
<input name="personalization_result[memory_2]" type="checkbox" value="1" id="personalization_result_memory_2" <?php $checked ?> >
</li>
This code stores the data in a session:
<?php
session_start();
if(isset($_POST['submit']))
{
if(isset($_POST['sharks']))
{
$_SESSION['value'] = $_POST['sharks'];
}
else
{
$_SESSION['value'] = '';
}
}
?>
<form action="" method="POST">
<?php
print '<input name="sharks" type="checkbox" value="1" id="sharks" ';
if ($_SESSION['value'] == 1)
{
print ' checked="checked"';
}
print ">";
?>
<br>
<input type="submit" name="submit" value="Save" />
</form>
Worked for me, keeping the checkbox checked after I closed and opened the browser again. After some testing I added a rather complex if to avoid the undefined variable notice. Now the set part seems robust.
You can either use session or cookie. Basically you will access using $_COOKIE or $_SESSION. I would rather say that this is easier than using a database.
For cookies have a look at setcookie (http://www.php.net/setcookie)
For sessions: http://php.net/manual/en/book.session.php
I would use local storage or session storage, this is a client side memory storage location that persists even if the page is refreshed, it is integrated into html5.
Here is a nice tutorial about it:
http://www.w3schools.com/html/html5_webstorage.asp
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Persist checkboxes 1</title>
<script>
window.jQuery || document.write("<script src='jquery-.1.1.js'><\/script>");
</script>
<script>
$(document).ready(function()
{
$('#me').click(function()
{
var seloption = $('input[type="checkbox"]:checked');
if (seloption.length > 0)
{
var abc = seloption.length + "checked \n";
//alert(abc);
i = 0;
seloption.each(function()
{
abc = abc + $(this).text(seloption[i]) + "<br>";
}
);
$('#msg').html(abc);
}
}
);
}
);
</script>
</head>
<body>
<div>
<label for="option1">Option 1</label>
<input type="checkbox" id="option1">
</div>
<div>
<label for="option2">Option 2</label>
<input type="checkbox" id="option2">
</div>
<div>
<label for="option3">Option 3</label>
<input type="checkbox" id="option3">
</div>
<div>
<label for="option4">Option 4</label>
<input type="checkbox" id="option4">
</div>
<div>
<label for="option5">Option 5</label>
<input type="checkbox" id="option5">
</div>
<div>
<label for="option6">Option 6</label>
<input type="checkbox" id="option6">
</div>
<div>
<label for="option7">Option 7</label>
<input type="checkbox" id="option7">
</div>
<div>
<label for="option8">Option 8</label>
<input type="checkbox" id="option8">
</div>
<div>
<label for="option9">Option 9</label>
<input type="checkbox" id="option9">
</div>
<button type="button" id="me">Submit</button>
<div id="msg">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script>
$(":checkbox").on("change", function() {
var checkboxValues = {};
$(":checkbox").each(function() {
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, {expires: 1, path: '/'});
});
function repopulateCheckboxes() {
var checkboxValues = $.cookie('checkboxValues');
if (checkboxValues) {
Object.keys(checkboxValues).forEach(function(element) {
var checked = checkboxValues[element];
$("#" + element).prop('checked', checked);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();
</script>
</body>
</html>
Ok here is my problem, and all of my 'dirty' code. This isn't my production code but just trying to make it work at the moment.
Basically what I need is when a user selects the Not Ok radio button it displays the textarea for that unique set which it doesn't do right now when I select Not Ok it gives the textarea's for all the entries which right now is about 13 sets of questions that get generated dynamically from a mysql database at the moment. I have a feeling it has to do something with unique id's that are either in the wrong place in my code now, or just simply aren't there at all. Any help is appreciated greatly.
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h3>Vehicle Check Information</h3>
<?php
$query = mysql_query("SELECT * FROM vehicle_q");
while($row = mysql_fetch_array($query)) {
$q_title = $row['title'];
$q_id = $row['id'];
?>
<div data-role="fieldcontain" style="border:0;">
<fieldset data-role="controlgroup">
<legend><?php echo $q_title; ?>:</legend>
<input type="radio" name="help[]" id="checkbox-1a" value="Ok" />
<label for="checkbox-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-2a" value="Not Ok" />
<label for="checkbox-2a">Not Ok</label>
</fieldset>
<div id="hidden_text-<?php echo $q_id; ?>" style="display:none;">
<script>
$(document).ready(function(){
$(":radio:eq(1)").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").show(500);
});
$(":radio:eq(0)").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").hide(500);
});
});
</script>
<fieldset data-role="fieldcontain">
<label for="<?php echo $q_title; ?>_t">Explain the Deficiency(If any):</label>
<textarea name="text_a[]" id="<?php echo $q_title; ?>_t"></textarea>
</fieldset>
</div>
</div>
<input type="hidden" name="q_title1[]" value="<?php echo $q_title; ?>" />
<?php
}
?>
</div>
The other 2 answers are ways to fix your issue. As a side, here is possibly why it is happening. When you are using -
$(":radio:eq(1)").click(function()
$(":radio:eq(0)").click(function()
You are using a click listener that just checks for if 'any' radio button with that index position was clicked on your page. So any button with 1 index position will make every $(":radio:eq(1)").click(function() execute.
Edit -
You would want to change your radio button ids, as (1) they will not be unique as you repeat them with each while() loop, and (2) you could use it to check if that specific radio buttton was clicked.
Try changing it to -
...
<input type="radio" name="help[]" id="checkbox-1a-<?php echo $q_id; ?>" value="Ok" />
<label for="checkbox-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-2a-<?php echo $q_id; ?>" value="Not Ok" />
<label for="checkbox-2a">Not Ok</label>
</fieldset>
<div id="hidden_text-<?php echo $q_id; ?>" style="display:none;">
<script>
$(document).ready(function(){
$("#checkbox-2a-<?php echo $q_id; ?>").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").show(500);
});
$("#checkbox-1a-<?php echo $q_id; ?>").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").hide(500);
});
});
</script>
The easiest way that I have found to show hide elements based off of radio values is to serve up an onchange event based on the id of the element (which you already have). In your case, since you only have two radios based off the same name, the easiest way is a simple if/else statement. Something like:
<script type="text/javascript">
$(function(){
$('#checkbox-1a').change(function(){
if($(this).attr('checked')){
$('#hidden-text-<?php echo $q_id;?>').hide(500);
}else{
$('#hidden-text-<?php echo $q_id;?>').show(500);
}
});
});
</script>
Where we state when #checkbox-1a is changed: if the element is checked (selected), then do something (in your case hide something), otherwise do something else (in your case show something).
Try something like:
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h3>Vehicle Check Information</h3>
<?php
$query = mysql_query("SELECT id,title FROM vehicle_q");
while($row = mysql_fetch_array($query)) {
$q_title = $row['title'];
$q_id = $row['id'];
?>
<div data-role="fieldcontain" style="border:0;" class="groupings">
<fieldset data-role="controlgroup">
<legend><?=$q_title?>:</legend>
<input type="radio" name="help[]" id="checkbox-<?=$q_id?>-1a" value="Ok" />
<label for="checkbox-<?=$q_id?>-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-<?=$q_id?>-2a" value="Not Ok" />
<label for="checkbox-<?=$q_id?>-2a">Not Ok</label>
</fieldset>
<div id="hidden_text-<?=$q_id?>" class="hiddenText" style="display:none;">
<fieldset data-role="fieldcontain">
<label for="<?=$q_title?>_t">Explain the Deficiency(If any):</label>
<textarea name="text_<?=$q_id?>_a[]" id="<?=$q_title?>_t"></textarea>
</fieldset>
</div>
</div>
<input type="hidden" name="q_title1[]" value="<?php echo $q_title; ?>" />
<?php
}
?>
</div>
<script>
$(document).ready(function(){
$(".groupings input:radio").click(function(){
if (this.value == "Ok") {
$(this).parent().next('.hiddenText').show(500);
} else {
$(this).parent().next('.hiddenText').hide(500);
}
});
});
</script>
This is untested, but the script only needs to be declared once and it will apply to the rest relative to the radio button.
I have a web app (PHP) and I have to make this change. I am more of a database, scripting guy, please bear with me on this one!
I have 8 check boxes (think numbered 1~8) in a form. I have to implement a condition where in :
If one of the first 4 checkboxes are checked (only one checkbox can be checked in the first 4),
Then the next 4 checkboxes should be disabled
Else the next 4 checkboxes should be enabled.
My solution :
Make the first 4 checkboxes radiobuttons to confirm to the only one
checkbox can be selected condition.
Disable/Enable the next 4 checkboxes based on the above action. So,
if the radiobutton is not selected, then the next 4 checkboxes should
be available for selection.
I have to actually disable the checkboxes rather than hide using jQuery, so the checkboxes should be solidgray (uncheckable) when disabled.
Sample code (stripped off some formatting mess for others looking for a similar solution) :
<div>
<input type="checkbox" name="check1" value="1" id="check1" <?php if (!empty($rows['check1'])) { echo 'checked="checked"'; } ?> />
<input type="checkbox" name="check2" value="1" id="check2" <?php if (!empty($rows['check2'])) { echo 'checked="checked"'; } ?> />
<input type="checkbox" name="check3" value="1" id="check3" <?php if (!empty($rows['check3'])) { echo 'checked="checked"'; } ?> />
<input type="checkbox" name="check4" value="1" id="check4" <?php if (!empty($rows['check4'])) { echo 'checked="checked"'; } ?> />
<input type="checkbox" name="check5" value="1" id="check5" <?php if (!empty($rows['check5'])) { echo 'checked="checked"'; } ?> />
<input type="checkbox" name="check6" value="1" id="check6" <?php if (!empty($rows['check6'])) { echo 'checked="checked"'; } ?> />
<input type="checkbox" name="check7" value="1" id="check7" <?php if (!empty($rows['check7'])) { echo 'checked="checked"'; } ?> />
<input type="checkbox" name="check8" value="1" id="check8" <?php if (!empty($rows['check8'])) { echo 'checked="checked"'; } ?> />
</div>
My requests :
What is the most efficient way of doing this? (simple without complicating the problem)
Any sample code is greatly appreciated.
I think this is what you're looking for. You can achieve it using .index() to get current clicked checkbox. .slice() is used to get all elements at index 4 and after.
$('input[type=checkbox]').change(function(){
var $linputs = $('input[type=checkbox]').slice(4);
var $this = $(this);
$linputs.prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$linputs.prop('checked',false);
}
});
FIDDDLE
Or is it something like this that you want? Where only one of the first four checkboxes can be checked. If one is checked then all the others will be disabled.
$('input[type=checkbox]').change(function(){
var $this = $(this);
$(linputs).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$(linputs).prop('checked',false);
}
});
http://jsfiddle.net/h5wDr/
EDIT:
if you have other checkboxes in the page and want to be able to separate them from this logic, you can add context in the selector so it keeps this code isolated to only those within this div like so
<div id='test'>
<input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</div>
Then just add the context
var $inputs = $('input[type=checkbox]', $('#test'));
// this will only select checkboxes within the element with id=test
http://jsfiddle.net/h5wDr/2/
<div>
<input type="checkbox" name="check1" value="1" id="check1" />
<input type="checkbox" name="check2" value="1" id="check2" />
<input type="checkbox" name="check3" value="1" id="check3" />
<input type="checkbox" name="check4" value="1" id="check4" />
<input type="checkbox" name="check5" value="1" id="check5" />
<input type="checkbox" name="check6" value="1" id="check6" />
<input type="checkbox" name="check7" value="1" id="check7" />
<input type="checkbox" name="check8" value="1" id="check8" />
</div>
<script>
$(document).ready(function () {
var $firstFourChecks = $("#check1,#check2,#check3,#check4");
var $lastFourChecks = $("#check5,#check6,#check7,#check8");
$firstFourChecks.on('click', function (e) {
var isCheck = $(this).is(':checked');
$firstFourChecks.not($(this)).prop('checked', false);
$(this).prop('checked', isCheck);
if (isCheck) {
$lastFourChecks.prop("disabled", true).prop('checked', false);
} else {
$lastFourChecks.prop("disabled", false);
}
});
});
</script>
This is entirely done in javascript, and is agnostic to the fact you are using php. Essentially, we make sure in the first four for you have not selected, they are set to false. Then we toggle the state of the one clicked.
If you clicked something on in your first four the last four are turned off and disabled, otherwise they are renabled. This matches the posted pseudocode.
You should be able to paste this directly in. The selectors are cached for speed reasons.
http://jsfiddle.net/L4qeN/ see it here.
Edit: wow looks like someone beat me to the punchline by only a few minutes. We did use very different methods; however.
You would have to try it yourself, but I would do something like (using javascript):
Add a class to every checkbox of the first group and another class to every checkbox of the second group;
Check for change events for the first class, turn off all of the first group but the clicked one;
Check if any of the first group is selected and activate / deactivate the second class group accordingly.
Give your first four checkboxes one class and then your second four a second class and then add onclick handlers to all the first checkboxes:
$('.firstfour_class').click(
if $('input:checkbox:checked.firstfour_class').length > 1){
//code to turn OFF the second four and make them unchecked
} else {
//code to turn ON the second four
}
})
Check out the jQuery :checked selector.
HI
i'm using a php page and i need to keep the value of and check box and radio button (checked or not checked) after post page.
how could i make it?
thanks
First get the radio button value.
$radiobuttonvalue = $_POST['radiobuttoname']
Then for each radio button with the same name, do this
<input type="radio" name="radiobuttonname" value="value" id="radiobuttonname" <?php if($radiobuttonvalue == "value") { echo 'checked="checked"';} ?>
You need something like:-
<?php
$postCheckboxName = '';
if (isset($_POST['checkbox_name']) || 'any_value' == $_POST['checkbox_name']) {
$postCheckboxName = ' checked="checked"';
}
?>
<input type="checkbox" name="checkbox_name" value="any_value"<?php echo $postCheckboxName;?> />
<?php
$postRadioName = '';
if (isset($_POST['radio_name']) || 'any_other_value' == $_POST['radio_name']) {
$postRadioName = ' checked="checked"';
}
?>
<input type="checkbox" name="radio_name" value="any_other_value"<?php echo $postRadioName;?> />
This code should get you going. I'm basically checking whether the POST value of either the checkbox / radio element is set or not & whether the corresponding element's value matches with my respective element's value or not.
Hope it helps.
Something like this:
<?php if (isset($_POST['checkbox_name']))?>
<input type="checkbox" checked="checked" value="<?php echo $_POST['checkbox_name'];?>" />
<?php} ?>
<?php if (isset($_POST['radio_name']))?>
<input type="radio" checked="checked" value="<?php echo $_POST['radio_name'];?>" />
<?php} ?>
What happens is that you check if the input variables are in the $_POST and if so you add checked="checked" to the input fields to make them checked.
This worked for me, and is self explanatory
sample code usage:
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="time" value="lunch" <?php if (isset($_POST[ 'time']) && $_POST[ 'time']=='lunch' ){echo ' checked="checked"';}?>>Lunch</label>
<label class="radio-inline">
<input type="radio" name="time" value="dinner" <?php if (isset($_POST[ 'time']) && $_POST[ 'time']=='dinner' ){echo ' checked="checked"';}?>>Dinner</label>
</div>