I have a number of :checkbox elements that are initialized by a wordpress.
Now i set .buttonset() function to #format but this is not work...
like this sample:http://jqueryui.com/button/#checkbox
HTML:
<div id="format">
<?php
$categories = get_categories();
foreach ($categories as $category) { ?>
<input type="checkbox" name="check" value="<?php echo $category->cat_ID; ?>">
<label><?php echo $category->cat_name;?></label><?php } ?>
</div>
JS:
$('#format').buttonset();
$('input[type=checkbox]').removeClass('ui-helper-hidden-accessible');
$(':checkbox[name=check]').each(function( i ){
var nameID = 'check'+ (i+1);
this.id = nameID;
$(this).next('label').prop('for', nameID);
});
All your checkboxes has the same name "check".
Try to do this:
<div id="format">
<?php
$i = 0;
$categories = get_categories();
foreach ($categories as $category) { ?>
<input type="checkbox" name="check<?php echo $i ?>" value="<?php echo $category->cat_ID; ?>">
<label><?php echo $category->cat_name;?></label>
<?php
$i++;
}
?>
</div>
Then in your js:
$(':checkbox[name^=check]').each(function( i ){
var nameID = 'check'+ (i+1);
this.id = nameID;
$(this).next('label').prop('for', nameID);
});
Then jQuery will find all checkboxes that start with name check, like "check1", "checkblabla", etc...
And the "$('#format').buttonset();" needs to come after the "for" change.
Fonts:
http://api.jquery.com/attribute-starts-with-selector/
Edited:
I think you dont really need to change the for with js, you can do that only with php, then:
<div id="format">
<?php
$i = 0;
$categories = get_categories();
foreach ($categories as $category) { ?>
<input type="checkbox" name="check<?php echo $i ?>" value="<?php echo $category->cat_ID; ?>">
<label for="check<?php echo $i ?>"><?php echo $category->cat_name;?></label>
<?php
$i++;
}
?>
</div>
Then in your js:
$( "#format" ).buttonset();
Related
How can I hide the original checkboxes and make the labels be clickable and act like checkboxes? I am sure there is a way to do it in JS! I am loading the labels and the checkboxes with PHP, they are loaded dynamically and can always be different, depending on what the user chooses prior to this page. Thanks!
foreach ($row as $type) { ?>
<label for="<?php echo $type['id'] ?>" class="interests-span">
<h3><?php echo $type['Type'] ?></h3>
</label>
<input id="<?php echo $type['id'] ?>" type="checkbox" style="display:block;" value="<?php echo $type['Type']?>" name="options[]"/>
<?php
}
Note: Labels should be linked with id or name.
Here is custom implementation what you want.
But I don't think it is correct to select checkbox with only values
foreach ($row as $type) { ?>
<label for="<?php echo $type['Type'] ?>" class="interests-span"
onclick="toggleCheckboxFromLabel('<?php echo $type['Type'] ?>')"
>
<h3><?php echo $type['Type'] ?></h3>
</label>
<input type="checkbox" style="display:block;" value="<?php echo $type['Type']?>"
name="options[]"/>
<?php } ?>
<script>
function toggleCheckboxFromLabel(val){
var checkbox = document.querySelector('input[type="checkbox"][value="' + val + '"]')
checkbox.checked = !checkbox.checked;
}
</script>
Just add an id equals to the for attribute.
$counter = 0;
foreach ($row as $type) { ?>
<label for="<?= 'checkbox_' . $counter ?>" class="interests-span">
<h3><?php echo $type['Type'] ?></h3>
</label>
<input type="checkbox" style="display:none;" id="<?= 'checkbox_' . $counter ?>" value="<?php echo $type['Type']?>"
name="options[]"/>
<?php
$counter++;
} ?>
I am attempting to 'check' the the 'AC:Front' box from a button click on the below website. I tried changing the checkbox to 'checked' and I also tried changing the encompassing to class="checked".
The goal is to eventually collect the inputted VIN, run it through a decoder and use the data to fill the page.
Here is the website
HTML
<div class="stm-single-feature">
<div class="heading-font">Comfort</div>
<div class="feature-single">
<label>
<input type="checkbox" value="A/C: Front" name="stm_car_features_labels[]"/>
<span>A/C: Front</span>
</label>
</div>
CSS
div.checker span.checked {
background-position: -16px 0; }
PHP
<?php
if ($items) {
if (!empty($id)) {
$features_car = get_post_meta($id, 'additional_features', true);
$features_car = explode(',', $features_car);
} else {
$features_car = array();
}
foreach ($items as $item) { ?>
<?php if(isset($item['tab_title_single'])): ?>
<div class="stm-single-feature">
<div class="heading-font"><?php echo $item['tab_title_single']; ?></div>
<?php $features = explode(',', $item['tab_title_labels']); ?>
<?php if (!empty($features)): ?>
<?php foreach ($features as $feature): ?>
<?php
$checked = '';
if (in_array($feature, $features_car)) {
$checked = 'checked';
};
?>
<div class="feature-single">
<label>
<input type="checkbox" value="<?php echo esc_attr($feature); ?>"
name="stm_car_features_labels[]" <?php echo $checked; ?>/>
<span><?php echo esc_attr($feature); ?></span>
</label>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php }
}?>
JavaScript
<script type="text/javascript">
jQuery(function($) {
$("#generateVin").on("click", function() {
var $checkbox = $("input[type=checkbox]").eq(1);
$checkbox.prop("checked", true);
$checkbox.parent().addClass("checked");
});
});
</script>
I need to set value of text box on change from select box created using jquery
<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="<?php echo 'aaa'.$i ?>">
<?php for($i=0;$i<5 ;$i++) { ?>
<option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="<?php echo 'bbb'.$i ?>" id="bbb" name="<?php echo 'bbb'.$i ?>"/>
<input type="hidden" class="<?php echo 'ccc'.$i ?>" name="<?php echo 'ccc'.$i ?>" id="ccc" />
<?php } ?>
<?php } ?>
<script>
$('.aaa').change(function () {
var otherValue=$(this).find('option:selected').attr('data-xyz');
var someOtherValue=$(this).find('option:selected').attr('data-abc');
$('.bbb').val(otherValue);
$('.ccc').val(someOtherValue);
});
</script>
How to change value class bbb0-bbb5 in jquery without using loop in jquery
Do not update the class names in php-loop, classes need not be unique.
To select input:hidden elements, no need to specify ID attribute
$('.aaa').change(function() {
var otherValue = $(this).find('option:selected').attr('data-xyz');
var someOtherValue = $(this).find('option:selected').attr('data-abc');
$(this).siblings('.bbb').val(otherValue);
$(this).siblings('.ccc').val(someOtherValue);
});
<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="aaa">
<?php for($i=0;$i<5 ;$i++) { ?>
<option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="bbb" name="<?php echo 'bbb'.$i ?>" />
<input type="hidden" class="ccc" name="<?php echo 'ccc'.$i ?>" />
<?php } ?>
<?php } ?>
reviernummer.onchange = function(){
var look=$("#reviernummer").val();
$("option[class='sorted']").hide();
$("option[title=look]").show();
};
The php code :
<label style="width:100px;float:left;">für das Revier:*</label>
<select class="required" id="reviernummer" style="width:240px;" name="verhaltenscode" ' >
<?php
$selected = $arrayAktuellerDatensatz['verhaltenscode'];?>
<option selected ="selected" value="<?php echo $selected; ?>"><?php echo $selected; ?></option>
<?php loadselect('kataster', 'Fischereibuchzahl', 'Fischereibuchzahl'); ?>
</select><br />
<select class="required" id="verhaltenscode" style="width:240px;" name="verhaltenscode">
<?php $selected = $arrayAktuellerDatensatz['verhaltenscode_neu'];?>
<option selected ="selected" value="<?php echo $selected; ?>"><?php echo $selected; ?></option>
<?php loadselect('helpbrutstatus', 'Brutstatus', 'Brutstatus');?>
</select>
loadselect function :
if ($tblname == 'kataster'){
$query = "SELECT * FROM kataster";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)){
$fieldvalue = $row['Fischereibuchzahl'];
$fieldcaption = $row['Fischereibuchzahl'];
$lat = $row['Benennung']?>
<option title="<?php echo $lat; ?>" value="<?php echo $fieldvalue;?>"><?php echo $fieldcaption .' | '.$lat?></option> <?php
}
}
else if ($tblname == 'helpbrutstatus'){
$query = "SELECT * FROM helpbrutstatus" ;
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)){
$fieldvalue = $row['Fischereibuchzahl'];
$status = $row['Fischereibuchzahl'];
$fieldcaption = $row['Brutstatus']; ?>
<option value="<?php echo $fieldvalue;?>" title="<?php echo $status;?>" class="sorted">
<?php echo $status." | ".$fieldcaption?></option> <?php
}
}
I am trying to let all options disappear so i can make just some specific options be avaiable. What am i missing here in the last row of code? Can somebody help.
And sorry i couldn't find another answered question.
Thank you for your help.
You should concatenate String with variable using plus + signs, try the following code :
reviernummer.onchange = function(){
var look=$("#reviernummer").val();
$("option[class='sorted']").hide();
$("option[title='"+look+"']").show();
};
It will be better if you can use jquery on change event, try also :
$('#reviernummer').on('change', function(){
var look=$(this).val();
$("option[class='sorted']").hide();
$("option[title='"+look+"']").show();
};
Hope this helps.
I have a form which has some text fields. Text fields may increase or decrease according to database table. If there are 3 warehouses in database it will show 3 text boxes with available quantity as place holder. Now user have to enter quantity no more than given in placeholder in each box. How can I do validation if user enter a value more than available (which will be shown as place holder) ?. Problem is validation should be according to foreach loop. My code is below,
<?php
if (!empty($ware_details)) {
foreach ($ware_details as $data) {
?>
<div class="form-group">
<label for="exampleInputEmail1"><?php echo $data->warehouse_name; ?></label>
<input type="number" id="return_pro" class="form-control" base_url="<?php echo site_url(); ?>" name="<?php echo $data->wh_warehouse_id;?>" placeholder="<?php echo $data->wh_product_qty; ?> Available">
<div class="dataDrop"></div>
<input type="hidden" id="quantity" value="<?php echo $data->wh_product_qty; ?>"/>
</div>
<?php } }?>
Here as you see text boxes number is depending upon foreach loop. So how can I validate? Javascript or Ajax is ok.
I tried something like this,
<?php foreach ($ware_details as $data) {?>
<script>
function check()
{
var stock = document.getElementById('quantity').value;
var return_stock = document.getElementById('return_pro').value;
if (parseFloat(stock) < parseFloat(return_stock))
{
alert("Return product can't be more than total stock");
document.getElementById('return_pro').focus();
return false;
}
//alert(return_stock);
return false;
}
But I know it is fully wrong. Any idea?
Try to use html5 required attribute. This set of code may help you.
<input type="number"
min="1"
max="<?php echo $data->wh_product_qty; ?>"
name="<?php echo $data->wh_warehouse_id;?>"
required="required"
placeholder="<?php echo $data->wh_product_qty; ?> Available" />
You cannot use an id multiple times in the document, it needs to be unique. Either use classes to identify/group elements, or enumerate the ids:
<?php
$i = 0;
if (!empty($ware_details)) {
foreach ($ware_details as $data) {
?>
<div class="form-group">
<label for="exampleInputEmail1"><?php echo $data->warehouse_name; ?></label>
<input type="number" id="return_pro<?php echo $i; ?>" class="form-control" base_url="<?php echo site_url(); ?>" name="<?php echo $data->wh_warehouse_id;?>" placeholder="<?php echo $data->wh_product_qty; ?> Available">
<div class="dataDrop"></div>
<input type="hidden" id="quantity<?php echo $i; ?>" value="<?php echo $data->wh_product_qty; ?>"/>
</div>
<?php
$i++;
} }?>
<script>
function check(i) {
var stock = document.getElementById('quantity'+i).value;
var return_stock = document.getElementById('return_pro'+i).value;
if (parseFloat(stock) < parseFloat(return_stock))
{
alert("Return product can't be more than total stock");
document.getElementById('return_pro'+i).focus();
return false;
}
//alert(return_stock);
return false;
}
// then in the validation trigger:
for (var i=0; i< <?php echo $i; ?>; i++)
check(i);