Array of checkboxes and readonly text fields - javascript

I have an array of checkboxes and text fields. what i want to achieve is that when the checkbox is not checked the input type text field is readonly but when the checkbox is checked, the input type text field is no longer read only.
<?php
$rsi = pg_query("Select * From items Order by name;");
while ($ri = pg_fetch_array($rsi, NULL, PGSQL_ASSOC)) {
?>
<tr>
<td align="center"><input id="item" class="input_control" type="checkbox" name="item[]" value="<?php echo $ri['item_no']; ?>"></td>
<td class="qty" align="center"><input id="quantity" type="text" name="qty[]" value="<?php echo $rsview['quantity'];?>"></td>
<td ><?php echo $ri['name']; ?></td>
<td><?php echo $ri['model']; ?></td>
<td><?php echo $ri['brand']; ?></td>
<td><?php echo $ri['item_type']; ?></td>
</tr>
<?php } ?>

Try This
<script type="text/javascript">
function toggleTB(myCheckbox){
if(myCheckbox.checked){
document.myForm.myField.disabled=1
}
else{
document.myForm.myField.disabled=0
}
}
</script>
<form name="myForm">
<input type="checkbox" onClick="toggleTB(this)">
<input type="text" name="myField" value="asdf">
</form>

Related

Only the top most tr/td getting affected

I am having a table, where in the data is getting fetched dynamically from the database. The issue I am facing is no matter which row I try to check, the result occurs only in the first tr/td. I will post the code for the table and the JS below:
<?php
foreach( $paid_products as $product)
{
$price = empty($product->sales_price)?$product->price:$product->sales_price;
$ingredients = empty($product->ingredients)?$product->ingredients:$product->ingredients;
$quantity = empty($product->quantity)?0:$product->quantity;
$discount = empty($product->discount)?0:($product->discount);
$discount_amount = empty($product->discount_amount)?0:($product->discount_amount);
$discounted_amount = empty($product->discounted_amount)?0:($product->discounted_amount);
$total_quantity = empty($product->product_quantity)?0:($product->product_quantity);
$product_ordered = empty($product->product_ordered)?0:($product->product_ordered);
$quantity_available = $total_quantity - $product_ordered;
$subtotal = $price*$quantity; ?>
<tr class="calc">
<td title="Ingredients: <?php echo $product->ingredients; ?>"><?php echo $product->name; ?></td>
<td title="Reason for price change:" <?php echo !empty($product->product_message)?' '.$product->product_message.'"':''; ?>>
<input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_price[]" class="price paidShowMessage" value="<?php echo $price; ?>">
<input type="text" class="paid_product_message" name="paid_product_message[]" value="<?php echo $product->product_message; ?>">
</td>
<td title="Reason for discount:" <?php echo !empty($product->product_dmessage)?' '.$product->product_dmessage.'"':''; ?>>
<input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_dscnt[]" class="dscnt spidEdit paidShowDMessage" value="<?php echo $discount; ?>">
<!--<input type="text" name="paid_product_dscnt[]" class="dscnt spidEdit" value="<?php //echo $discount; ?>" data-min="0" data-max="<?php //echo $product->max; ?> ">-->
<input type="text" class="paid_product_dmessage" name="paid_product_dmessage[]" value="<?php echo $product->product_dmessage; ?>">
</td>
<td>
<input type="text" name="paid_product_dscnt_amt[]" class="dscnt_amt spidEdit" value="<?php echo $discount_amount; ?>" data-min="0" data-max="<?php echo $product->max; ?> ">
</td>
<td>
<input type="hidden" name="paid_product_id[]" value="<?php echo $product->product_id; ?>">
<input type="hidden" value="<?php echo $quantity_available; ?>" class="qa">
<input type="text" name="paid_product_qty[]" onkeyup="backOrder()" class="qty spinEdit" value="<?php echo $quantity; ?>" data-min="0" data-max="<?php echo $product->max; ?>" >
</td>
<!--data-min="0"-->
<td>
<input type="text" class="bo spidEdit" id="quav" value="<?php echo $quantity_available;?>">
</td>
<td title="Back Order Quantity:">
<input style="width:100%; text-align:right; padding-right:5px;" id="qupe" type="text" name="paid_product_bo[]" class="boShowMessage" value="">
</td>
<td style="text-align:right; padding-right:5px;">
<input type="text" class="total" name="paid_product_dscnted_amt[]" value="<?php echo $discounted_amount; ?>" readonly>
</td>
</tr>
<?php
} ?>
function backOrder() {
var quav = document.getElementById("quav");
var qupe = document.getElementById("qupe");
qupe.value = -1 * (quav.value);
}
You can't have multiple elements with the same ID. You have to use class attribute, and in JavaScript select the elements using document.getElementsByClassName() and iterate over them.
id values must be unique in the document. If you have to use something to idenitfy multiple elements, don't use an id. Other things you could use are class or any data-* attribute.
If using class, you'd use querySelectorAll(".the-class") or getElementsByClassName("the-class") and loop over the resulting collection. If using a data-* attribute, you'd use querySelectorAll('[data-attr-name="attr-value"]') and, again, loop over the resulting collection.
For example, your rows have class calc, and so we can use that and look within each row for the qupe and quav:
function backOrder() {
Array.prototype.forEach.call(document.querySelectorAll(".calc"), function(row) {
var quav = row.querySelector(".quav");
var qupe = row.querySelector(".qupe");
qupe.value = -1 * quav.value;
});
}
backOrder();
<table>
<tbody>
<tr class="calc">
<td>
<label>
Quav 1
<input type="text" class="quav" value="1">
</label>
</td>
<td>
<label>
Qupe 1
<input type="text" class="qupe" value="1">
</label>
</td>
</tr>
<tr class="calc">
<td>
<label>
Quav 2
<input type="text" class="quav" value="2">
</label>
</td>
<td>
<label>
Qupe 2
<input type="text" class="qupe" value="2">
</label>
</td>
</tr>
<tr class="calc">
<td>
<label>
Quav 3
<input type="text" class="quav" value="3">
</label>
</td>
<td>
<label>
Qupe 3
<input type="text" class="qupe" value="3">
</label>
</td>
</tr>
</tbody>
</table>
Normally, though, when dealing with pairs of elements like that, it's best to identify a container they have in common.
<?php
$count = 0;
foreach( $paid_products as $product){
$price = empty($product->sales_price)?$product->price:$product->sales_price;
$ingredients = empty($product->ingredients)?$product->ingredients:$product->ingredients;
$quantity = empty($product->quantity)?0:$product->quantity;
$discount = empty($product->discount)?0:($product->discount);
$discount_amount = empty($product->discount_amount)?0:($product->discount_amount);
$discounted_amount = empty($product->discounted_amount)?0:($product->discounted_amount);
$total_quantity = empty($product->product_quantity)?0:($product->product_quantity);
$product_ordered = empty($product->product_ordered)?0:($product->product_ordered);
$quantity_available = $total_quantity - $product_ordered;
$subtotal = $price*$quantity;
$count++;
?>
<tr class="calc">
<td title="Ingredients: <?php echo $product->ingredients; ?>"><?php echo $product->name; ?></td>
<td title="Reason for price change:" <?php echo !empty($product->product_message)?' '.$product->product_message.'"':''; ?>>
<input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_price[]" class="price paidShowMessage" value="<?php echo $price; ?>">
<input type="text" class="paid_product_message" name="paid_product_message[]" value="<?php echo $product->product_message; ?>">
</td>
<td title="Reason for discount:" <?php echo !empty($product->product_dmessage)?' '.$product->product_dmessage.'"':''; ?>>
<input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_dscnt[]" class="dscnt spidEdit paidShowDMessage" value="<?php echo $discount; ?>">
<!--<input type="text" name="paid_product_dscnt[]" class="dscnt spidEdit" value="<?php //echo $discount; ?>" data-min="0" data-max="<?php //echo $product->max; ?> ">-->
<input type="text" class="paid_product_dmessage" name="paid_product_dmessage[]" value="<?php echo $product->product_dmessage; ?>">
</td>
<td><input type="text" name="paid_product_dscnt_amt[]" class="dscnt_amt spidEdit" value="<?php echo $discount_amount; ?>" data-min="0" data-max="<?php echo $product->max; ?> "></td>
<td ><input type="hidden" name="paid_product_id[]" value="<?php echo $product->product_id; ?>"><input type="hidden" value="<?php echo $quantity_available; ?>" class="qa">
<input type="text" name="paid_product_qty[]" onkeyup="backOrder(<?php echo $count; ?>)" class="qty spinEdit" value="<?php echo $quantity; ?>" data-min="0" data-max="<?php echo $product->max; ?>" ></td><!--data-min="0"-->
<td><input type="text" class="bo spidEdit" id="quav_<?php echo $count; ?>" value="<?php echo $quantity_available;?>"></td>
<td title="Back Order Quantity:">
<input style="width:100%; text-align:right; padding-right:5px;" id="qupe_<?php echo $count; ?>" type="text" name="paid_product_bo[]" class="boShowMessage" value=""></td>
<td style="text-align:right; padding-right:5px;"><input type="text" class="total" name="paid_product_dscnted_amt[]" value="<?php echo $discounted_amount; ?>" readonly></td>
</tr>
<?php } ?>
<script>
function backOrder(id)
{
var quav = document.getElementById("quav_" + id);
var qupe = document.getElementById("qupe_" + id);
qupe.value = -1 * (quav.value);
}
</script>

Only post first result of while loop

I am using a while loop to display results from a query.
The while loop is working fine.
In the hidden field I would like to post the values of etj12idsinging to another page.
I am submitting the form from a link using javascript.
The problem is regardless of the row I click, it only posts the first value. What should I do?
while($row= mysql_fetch_array($result))
{
$SIidsinging = $row['etj12idsinging'];
?>
<tr>
<td><?php echo $SIidnumber; ?></td>
<td><?php echo $SIidtype; ?></td>
<TD>
<form method='post' name='form1' id="form1" onclick="submitform()">
<input type="hidden" name='name2' id='name2' value="<?php echo $row['etj12idsinging']; ?>"></a>
<input type="button" value="Edit" class="btn-warning"/>
</form>
</TD>
</tr>
The javascript that I used to submit the form:
function submitform()
{
var name2=$('#name2').val();
window.alert(name2);//it keeps having first result
$('#form1').submit();
}
You can use like below codes:
<?php
while($row= mysql_fetch_array($result)) {
$SIidsinging = $row['etj12idsinging'];
?>
<form method='post' name='form1' id="form1" onclick="submitform()">
<tr>
<td><?php echo $SIidnumber; ?></td>
<td><?php echo $SIidtype; ?></td>
<TD>
<input type="hidden" name='name' value="<?php echo $row['etj12idsinging']; ?>"></a>
<input type="submit" value="Edit" class="btn-warning"/>
</TD>
</tr>
</form>
<?php
}
?>
Now in your result of post, you can get this array, by:
<?php
$names = $_POST[ 'name' ];
?>

How to get the value of selected checkbox in jquery and assign it to a json array?

I have a problem, I have little understanding about jquery that's why I am having a hard time with my code. I have a pagination of products. And there are checkboxes on it. And my simple goal is to disable the products if the checkboxes are selected. But I can't do it in one form because I have already another process in my form which is delete products if selected. That's why I am planning to create a form action in my jquery and pass all the product id from my checkbox to a json array. But how can I do that?
Here's a bit of my code
<form action="<?php echo $delete; ?>" method="post" enctype="multipart/form-data" id="form">
<table class="list">
<thead>
<tr>
<td width="1" style="text-align: center;"><input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" /></td>
<td class="left"><?php echo $column_name; ?></td>
<td class="right"><?php echo $column_sort_order; ?></td>
<td class="left"><?php echo $column_status; ?></td>
<td class="right"><?php echo $column_action; ?></td>
</tr>
</thead>
<tbody>
<?php if ($categories) { ?>
<?php foreach ($categories as $category) { ?>
<tr>
<td style="text-align: center;"><?php if ($category['selected']) { ?>
<input type="checkbox" name="selected[]" value="<?php echo $category['category_id']; ?>" checked="checked" />
<?php } else { ?>
<input type="checkbox" name="selected[]" value="<?php echo $category['category_id']; ?>" />
<?php } ?></td>
<td class="left"><?php echo $category['name']; ?></td>
<td class="right"><?php echo $category['sort_order']; ?></td>
<td class="right"><?php echo ($category['status'] == 1 ? 'Enable' : 'Disable'); ?></td>
<td class="right"><?php foreach ($category['action'] as $action) { ?>
[ <?php echo $action['text']; ?> ]
<?php } ?></td>
</tr>
<?php } ?>
<?php } else { ?>
<tr>
<td class="center" colspan="4"><?php echo $text_no_results; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</form>
<br />
<div align="right">
<select name="action_select">
<option value="enable">Enable Selected</option>
<option value="disable">Disable Selected</option>
</select>
<input type="button" class="button" id="update_status" value="Update Status" />
</div>
<br />
Here's my jquery sample
<script type="text/javascript">
$("#update_status").on('click', function(){
//how can I get the id of my checkboxes and assign it to a json array
//How can I create a form inside it?
});
</script>
That's all guys I hope you can understand my question. Thanks.
Otherwise you can use the below example code
<script>
$(document).ready(function()
{
$("input[type=checkbox]").click(function()
{
var categoryVals = [];
categoryVals.push('');
$('#Category_category :checked').each(function() {
categoryVals.push($(this).val());
});
$.ajax({
type:"POST",
url:"<?php echo $this->createUrl('ads/searchresult'); ?>", //url of the action page
data:{'category': categoryVals},
success : function(response){
//code to do somethng if its success
}
});
}
}
</script>
try
$('input[name="selected[]"]:checked').each(function() {
console.log(this.value);
});
for more info :- use jQuery to get values of selected checkboxes
Try
var values = $('.list input[name="selected[]"]:checked').map(function () {
return this.value;
}).get();

I have to validate my form for radio buttons using javascript for my code given below

i have retrieve questions and answers from the sql table and represented them using this code. now, i have a problem that how to take the radio button name in javascript.
for every question there must be a one option checked. i have to do this for all questions.
<form action="answer.php?title=<?php echo $_GET['title'];?>" method="post">
<table id="myques">
<?php
$i=0;
while($row=mysql_fetch_array($result)){
?>
<tr>
<td><?php echo ++$i.')'; ?></td>
<td>&nbsp&nbsp&nbsp<?php echo $row['question']; ?></td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques" value="<?php echo $row['opt1'];?>"><?php echo $row['opt1']; ?></td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques" value="<?php echo $row['opt2'];?>"><?php echo $row['opt2']; ?></td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques" value="<?php echo $row['opt3'];?>"><?php echo $row['opt3']; ?></td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques" value="<?php echo $row['opt4'];?>"><?php echo $row['opt4']; ?></td>
</tr>
<?php } ?>
<tr><td colspan="4"><input type="submit" name="add" onClick="return validate()" /></td></tr>
</table>
Try this:
<input type="radio" name="question" id="ques" value="1">
<input type="radio" name="question2" id="ques2" value="2">
<input type="radio" name="question3" id="ques3" value="3">
Or you decide on names make sure they are different..
And for JS:
var projectObj = document.form1.project
var len = projectObj.length
var chosen = null;
for (i = 0; i <len; i++) {
if (projectObj[i].checked) {
chosen = projectObj[i].value
}
}
if (chosen == null) {
alert("No Radio Button Chosen")
}
SOURCE CREDIT GIVEN TO : How to check if one of radio buttons was selected?
There is no easy way to do this. Or you can use default checked option in your HTML. I think it will be conflict with your business.
In your JS:
// store your question names in JS array
// check them group by group. and it will give detail information for which question is not check.
OR
In your JS:
// I think there will be four option answers in one question.
// count the total number of questions. and make the radion id as "radion1","radion2"...
// for all radios, if the checked number is equals with the question, the form submit is valid.
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques<?=$i?>" value="<?php echo $row['opt1'];?>" checked="true"><?php echo $row['opt1']; ?></td>
is this that what you want ?just add checked="true" to the first option ,then you will make it.

Get data from <td> on the same table row specified by row id and perform computation

I have an html table populated by data coming from a mysql database. This is the structure:
<table>
<?php
foreach($prods as $key=>$p){
?>
<tr class="row1" id="tr<?php echo $p['ProductID']?>">
<td id="pid<?php echo $p['ProductID']?>"><?php echo $p['ProductID']?></td>
<td id="pname<?php echo $p['ProductID']?>"><?php echo $p['ProductName'];?></td>
<td id="pdesc<?php echo $p['ProductID']?>"><?php echo $p['ProductDesc'];?></td>
<td id="pprice<?php echo $p['ProductID']?>"><?php echo $p['UnitPrice'];?></td>
<td><input type="checkbox" id="chk<?php echo $p['ProductID']?>" checked></td>
<td><input type="text" style="width:50px;" onkeyup="getall(this);" id="<?php echo $p['ProductID']?>"></td>
<td><input type="text" style="width:50px;" id="total<?php echo $p['ProductID']?>"> </td>
<span id="ttl" name="ttl"> 0.00</span>
</tr>
<?php
}
?>
</table>
I don't have issues populating the table, however I need to update the <span id="ttl"> value, every time the user changes the value of the <input type="text" style="width:50px;" onkeyup="getall(this);" id="<?php echo $p['ProductID']?>"></td>. I made a Javascript function but I fail doing what I want.
The value of the span should be the product of <td id="pprice<?php echo $p['ProductID']?>"><?php echo $p['UnitPrice'];?></td> and the quantity entered by the user at the textbox.
I will soon save these data back into the database once all fields are filled.
Not sure if this is used correctly. Just try something like:
<input type="text" style="width:50px;" onkeyup="getall('<?php echo $p['ProductID']?>');" id="<?php echo $p['ProductID']?>"></td>
And in your javascript function:
function getall(strId)
{
var tmpObj = document.getElementById(strId);
alert("reported id for testing: " + tmpObj.getAttribute("id"));
}
Try that.

Categories

Resources