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);
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 trying to use JavaScript to calculate total price for the tickets which are selected by using the checkbox. The result is should be shown in a alert window by clicking on the check button which invokes the JavaScript function. But when I click the button nothing happens. I don't even get any error message. I am a beginner so please if anyone can help me, I will be extremely thankful.
<?php foreach ($res as $row): ?>
<form action="book.php" method="get">
<tr><td><?php echo $row['RowNumber']; ?></td><td><?php echo $row['Price']; ?></td>
<td><input type="checkbox" type="hidden" name="myForm[<?php echo $row['RowNumber']; ?>][row]" id="row" value="<?php echo $row['RowNumber']; ?>"></input></td></tr>
<input type="hidden" name="myForm[<?php echo $row['RowNumber']; ?>][price]" id="price" value="<?php echo $row['Price']; ?>"></input>
</form>
<?php endforeach; ?>
</table>
<form action='book.php' method='get'>
Enter Email:<input type='text' name='name'></form>
<script>
function summary() {
var total = 0.0;
var seats = document.getElementById("row").value;
for(i = 1; i <= document.getElementById("row").value; i++) {
if(document.getElementId("row").checked) {
total = total + parseFloat(document.getElementById("price").innerHTML);
}
}
return total;
alert("Price of seats =" + total);
}
</script>
<input type="button" onclick="summary()" value="check">
<?php
You're returning before calling the alert, which means you never get to the alert itself. Remove the return total line.
This is a very common problem.All we have face atleast once.you should use Chrome istead of firefox or internet explorer.close your webpage and restart again.
return total should be after alertbox.
thankx.
You can try this sample
<form action="book.php" method="get">
<table>
<?php foreach ($res as $row): ?>
<tr data-rownumber="<?php echo $row['RowNumber']; ?>">
<td><?php echo $row['RowNumber']; ?></td>
<td><?php echo $row['Price']; ?></td>
<td>
<input type="checkbox" name="myForm[<?php echo $row['RowNumber']; ?>][row]" id="row-<?php echo $row['RowNumber']; ?>" value="<?php echo $row['RowNumber']; ?>" onclick="summary()" />
<input type="hidden" name="myForm[<?php echo $row['RowNumber']; ?>][price]" id="price-<?php echo $row['RowNumber']; ?>" value="<?php echo $row['Price']; ?>" />
</td>
</tr>
<?php endforeach; ?>
</table>
</form>
<form action='book.php' method='get'>
Enter Email:<input type='text' name='name'>
</form>
<script>
function summary() {
var total = 0.0;
var table = document.getElementById('items-table');
var rows = table.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var rowNumber = row.getAttribute('data-rownumber');
var isChecked = document.getElementById('row-' + rowNumber).checked;
if (isChecked) {
var price = parseFloat(document.getElementById('price-' + rowNumber).value);
total += price;
}
}
alert("Price of seats = " + total);
return total;
}
</script>
<input type="button" onclick="summary()" value="check">
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 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.