How to disable an input and enable through button click if the ID is something like this id="qty_<?php echo $x; ?>" not a normal id="qty"
<input type="number" name="qty[]" min="0" id="qty_<?php echo $x; ?>" class="form-control" required onclick="getTotal(<?php echo $x; ?>)" onkeyup="getTotal(<?php echo $x; ?>)" value="<?php echo $val['qty'] ?>" autocomplete="off">
javascript - how to use this kind of id? id="qty_<?php echo $x; ?>
function enablebutton(){
$('*#my_field').prop( "disabled", false );
}
the normal id like id="qty" is working but i need the solution on how to use this kind of id id="qty_<?php echo $x; ?>" when enable/disable an input
Assuming that you have the following button:
<input type=button value="Disable" onclick='javascript:disablebutton(<?php echo $x; ?>)'>
Then the JS function to disable the element with id ="qty_<?php echo $x; ?> will be
function disablebutton(var1){
$('#qty_' + var1).prop( "disabled", true );
}
Note: for enablebutton, it will be
function enablebutton(var1){
$('#qty_' + var1).prop( "disabled", false );
}
So, put them all together, will be like
<script
src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
<?php $x=1; ?>
<input id="qty_<?php echo $x; ?>" value=10>
<input type=button value="Disable" onclick='javascript:disablebutton(<?php echo $x; ?>)'>
<input type=button value="Enable" onclick='javascript:enablebutton(<?php echo $x; ?>)'>
<script>
function disablebutton(var1){
$('#qty_' + var1).prop( "disabled", true );
}
function enablebutton(var1){
$('#qty_' + var1).prop( "disabled", false );
}
</script>
You may click this sandbox to see the effect:
http://www.createchhk.com/SOanswers/testSO26Nov2022.php
Of course in practice, you may have multiple input boxes with multiple buttons, so changing the $x value dynamically (e.g use the database key) will be the usual way to do it.
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 have a table that populated with mysql data. I want to change the textbox value based on the value of the drop down. What I've done is only the first row changes its value but the following row doesn't work.
Below is my code.
//this is inside while loop
<input type='text' name='qqty[]' value='<?php echo $avail; ?>' id="avail" class='form-control1' readonly = 'readonly'>
<select class="form-control1" name="qty[]" id="sType" onChange="check();">
<option value="<?php echo $avail;?>"><?php echo $Uconv;?></option>
<option value="<?php echo $qty;?>"><?php echo $uom;?></option>
</select>
//my javascript code
<script>
function check() {
document.getElementById("avail").value = document.getElementById("sType").value;
}
</script>
You have to give individual ids to each input, and then find it. Let's say your iteration variable is $i:
<?php
$i=1;
while (your_condition) {
?>
<input type='text' name='qqty[]' value='<?php echo $avail; ?>' id="avail<?= $i ?>" class='form-control1' readonly = 'readonly'>
<select class="form-control1" name="qty[]" id="sType" onChange="check('<?= $i ?>');">
<option value="<?php echo $avail;?>"><?php echo $Uconv;?></option>
<option value="<?php echo $qty;?>"><?php echo $uom;?></option>
</select>
//my javascript code
<script>
function check(i) {
document.getElementById("avail"+i).value = document.getElementById("sType").value;
}
</script>
<?php
$i++;
} // end while
?>
If you have that code inside a loop, you have multiple elements with the same id (avail and such). When you do getElementById it will return only the first element with that id, AKA, the first row.
You should add unique ids to each element, let's say, by adding an increasing integer inside the loop, like this:
<?php
for ($x = 0; $x <= 10; $x++) {
?>
<input type='text' name='qqty[]' value='<?php echo $avail; ?>' id="avail_<?php echo $x; ?>" class='form-control1' readonly = 'readonly'>
<select class="form-control1" name="qty[]" id="sType_<?php echo $x; ?>" onChange="check('<?php echo $x; ?>');">
<option value="<?php echo $avail;?>"><?php echo $Uconv;?></option>
<option value="<?php echo $qty;?>"><?php echo $uom;?></option>
</select>
<?php
}
?>
<script>
function check(i) {
document.getElementById("avail_"+i).value = document.getElementById("sType_"+i).value;
}
</script>
Try this way :
<select onchange="ChooseContact(this)">
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<input id="friendName">
function ChooseContact(data) {
document.getElementById ("friendName").value = data.value;
}
You are referencing the first row elements by id.
You need to change the id for each row and based on which row you edit change the values.
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 this table i've built with jquery and ajax (watching some tutorials, so i'm not an advanced programmer). Well, what i do is i insert some values in a table and i need to get all the sum of this values in an input form.
I can do that, but what i need is to get the sum without refreshing the page, so anytime i enter:
200 in the Value column, the Sum should become :
Sum + 200
Please i need some help with what to do, i've searched for datagrid, but sincerely i don't know how can i do it.
Thanks
Php code of the input :
<table class="vlera">
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $kodi; ?></span>
<input type="text" value="<?php echo $kodi; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="last1_<?php echo $id; ?>" class="text"><?php echo $pershkrimi_pjeses; ?></span>
<input type="text" value="<?php echo $pershkrimi_pjeses; ?>" class="editbox" id="last_input1_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $vlera; ?></span>
<input type="text" value="<?php echo $vlera; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="last2_<?php echo $id; ?>" class="text"><?php echo $kosto; ?></span>
<input type="text" value="<?php echo $kosto; ?>" class="editbox" id="last_input2_<?php echo $id; ?>"/>
</td>
</tr>
<?php
}
?>
</table>
<?php
$sql_shuma="SELECT SUM(vlera) AS shuma FROM servis_pjeset_perdorura WHERE random=$random";
$resultshuma = odbc_exec($connection, $sql_shuma) or die(odbc_error());
while( $rowshuma = odbc_fetch_array($resultshuma ) ) {
$total1 = $rowshuma['shuma'];
}
?>
<label for='shuma'>Shuma:</label>
<input id="shuma" name="shuma" type="text" value=" <?php echo $total1;?>" size="20" />
the code you posted doesn't really show the full format (what the inputs look like)... but if you do something like:
$(".values").keyup(function() {
var sum = 0;
$(".values").each(function(){
sum += Number($(this).val());
});
$("#shuma").val(sum)
});
and each of your text inputs you want to go towards the total sum has a class of "values" on it, it should work. http://jsfiddle.net/NNbtk/
try this code... This code get the value of the text box when value enter and add it to the sum.
$(document).ready(function(){
$('#shuma').keyup(function(){
var val=$('#shuma').val();
sum=sum+val;
});
});
just put this code inside another php file...say abc.php
<?php
$sql_shuma="SELECT SUM(vlera) AS shuma FROM servis_pjeset_perdorura WHERE random=$random";
$resultshuma = odbc_exec($connection, $sql_shuma) or die(odbc_error());
while( $rowshuma = odbc_fetch_array($resultshuma ) ) {
$total1 = $rowshuma['shuma'];
}
echo $total1;
?>
Then from the main page do the following call on a button lets say button1
$(document).ready({
setInterval(function(){
$.ajax({
url: 'abc.php',
type: "POST",
success: function(contents){
$('#shuma').val(contents);
}
});
}, 1000);
});
Now the explanation:
In the main page when document gets ready, setInterval method of javascript will be called which takes 2 parameters, code and delay time in ms. this code will call the abc.php after every 1 sec and check the db for the new value and return it and put it in the field.
Hope that was what you were looking for.