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++;
} ?>
Related
I am trying to pass hidden value from page to another page and it work fine only for first record however for other records it's showing error
Here is the code:
$sql = "SELECT id,jdes,title FROM job";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<input type="hidden" id="hidden_user_id" value="<?php echo $row["id"] ?>">
<h3><?php echo $row["title"] ?>:</h3>
<p class="lead">
<?php echo $row["jdes"] ?>
</p>
<button type="button" id="requestthis" class="btn btn-primary">
Request
</button>
<?php
}
} else {
echo "Nothing to display Yet";
}
?>
jobs-inner.php
<?php
echo $_GET['hidden_id'];
?>
Javascript:-
$(function() { //ready function
$('#requestthis').on('click', function(e){ //click event
e.preventDefault();
var hidden_id = $('#hidden_user_id').val();
var url = "jobs-inner.php?hidden_id="+hidden_id;
window.location.replace(url);
})
})
Error:-
Undefined index: hidden_id in C:\wamp64\www\project\jobs-inner.php on line 3
It might be a simple problem but I am a beginner and I can't figure it out.
Your value is unique but the id isn't. Make the id of the input unique something like below.
<input type="hidden" id="hidden_user_<?php echo $row["id"] ?>" value="<?php echo $row["id"] ?>">
but you would have to do a count on code below to make it display base on how many rows you have.
<?php
echo $_GET['hidden_id'];
?>
Without JavaScript
$sql = "SELECT id,jdes,title FROM job";
$result = $conn->query($sql);
$count = 1;
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<input type="hidden" id="hidden_user_<?php echo $count ?>" value="<?php echo $row["id"] ?>">
<h3><?php echo $row["title"] ?>:</h3>
<p class="lead"><?php echo $row["jdes"] ?></p>
<form id="<?php echo $count ?>" action="jobs-inner.php?hidden_id=<?php echo $row["id"] ?>" method="post">
<input type="submit" vaule="Request">
</form>
<?php
$count++;
}
} else {
echo "Nothing to display Yet";
}
?>
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 } ?>
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);
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();
I'm trying to send the values that are separated by an pipe to 2 different fields. For some reason it won't work.
Any ideas?
<script type="text/javascript">
function folder(selectVeld)
{
// Stuur informatie terug
var id = (selectVeld.options[selectVeld.selectedIndex].value).split('|');
// Id
document.getElementsByName('folder_id').value = id[0];
// Naam
document.getElementsByName('folder_naam').value = id[1];
}
</script>
<tr>
<td><?php echo $lang['folder']; ?>:</td>
<td><select name="folder" onChange="folder(this)">
<option value="geen"><?php echo $lang['no_folder']; ?></option>
<?php
$sql = "SELECT id, naam FROM 2_folder ORDER BY naam ASC";
$res = mysql_query($sql,$con);
while ($row = mysql_fetch_assoc($res)){
?>
<option <?php if($row['id'].'|'.$row['naam'] == $folder){ echo 'selected="selected"'; } ?> value="<?php echo $row['id'].'|'.$row['naam']; ?>"><?php echo $row['naam'] ?></option>
<?php } ?></select>
</td>
</tr>
<input type="text" name="folder_id" value="<?php echo $folder_id; ?>" size="5" style="background-color: #e7e7e9" readonly="readonly" />
<input type="text" name="folder_naam" value="<?php echo $folder_naam; ?>" size="5" style="background-color: #e7e7e9" readonly="readonly" />
document.getElementsByName returns a array of elements, even if there is only a single element with that name.
document.getElementsByName('folder_id')[0].value = id[0];
document.getElementsByName('folder_naam')[0].value = id[1];
should do the trick. jsfiddle sample
I have avoided this problem by using only the folder_id and find the name with an seperate query after sending the form.