<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[name='data[Store][id][]']").change(function () {
if ($("input[name='data[Store][id][]']").is(':checked')) {
var input_value = parseFloat($(this).val());
var brand= $(this).closest('tr').find('#brand').text();
var number1 = $(this).closest('tr').find('input[name="data[store][stock_received][]"]').attr('disabled', 'disabled');
}else{
var number1 = $(this).closest('tr').find('input[name="data[store][stock_received][]"]').prop("disabled", false);
}
});
});
</script>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]" ></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]"></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]"></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]"></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]"></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
</table>
</body>
</html>
jquery disable is not working properly and I want to disable id=tmpid near near name='data[Store][id][]'.
Currently i m using name='data[store][stock_received][]' name near name='data[Store][id][]'.
For individual check box its working fine . If I select all then i uncheck then its not working properly
1)ID should be unique
2)You are using parseFloat() on an string
3)$("input[name='data[Store][id][]']").is(':checked') seems in correct
should be $(this).is(":checked")
$(document).ready(function() {
$("input[name='data[Store][id][]']").change(function() {
if ($(this).is(':checked')) {
var input_value = $(this).val();
var brand = $(this).closest('tr').find('#brand').text();
var number1 = $(this).closest('tr').find('input[name="data[store][stock_received][]"]').attr('disabled', 'disabled');
} else {
var number1 = $(this).closest('tr').find('input[name="data[store][stock_received][]"]').prop("disabled", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
</table>
Related
I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays
I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';
I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say
I have a code like these:
var fails = 'fail';
var sucs = 'success';
function showResult(state){
if(state){
document.getElementById("hasil").value=sucs;
}else{
document.getElementById("hasil").value=fails;
}
}
<form>
<table border='1'>
<tr>
<th>TARGET</th>
<th>RESULT</th>
<th>NOTES</th>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
</form>
I want to create that checkbox, if it's clicked, it will change textarea on that row to success. If I uncheck, it will change back to fail. Can anyone help me?
it only works for the first row.
As #epascarello said, because ids are singular. so you need to select the parent tr, find the text area and set the value.
You can do in this way.
$('[type=checkbox]').change(function() {
if ($(this).is(":checked")) {
var $row = $(this).parents('tr');
$row.find('textarea[name="result[]"]').text("sucess");
} else {
var $row = $(this).parents('tr');
$row.find('textarea[name="result[]"]').text("fail");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border='1'>
<tr>
<th>TARGET</th>
<th>RESULT</th>
<th>NOTES</th>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
</form>
I created couple of rows and multiplied some data to get totals:
But I am not sure how to sum all the totals and print it in "Cash in Hand" row.
Following are my codes:
<script type="text/javascript">
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
});
</script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td><input type="text" name="pages" class="row1" /></td>
<td><span class="row1c">0.00</span></td>
</tr>
<tr>
<td>500 Tk Note</td>
<td><input type="text" name="pages" class="row2" /></td>
<td><span class="row2c">0.00</span></td>
</tr>
<tr>
<td>100 Tk Note</td>
<td><input type="text" name="pages" class="row3" /></td>
<td><span class="row3c">0.00</span></td>
</tr>
<tr>
<td>50 Tk Note</td>
<td><input type="text" name="pages" class="row4" /></td>
<td><span class="row4c">0.00</span></td>
</tr>
<tr>
<td colspan ="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span></td>
</tr>
</table>
All codes together here:
https://jsfiddle.net/rashelmiah/fb9opo36/1/
Could you please me find a way to sum all the totals?
Thanks in advance.
You need add the following code.
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total);
})
Note: Your code had a lot of <script> tags which was unnecessary. And a lot of ready() function, which was unnecessary too. You can wrap the whole code inside one <script> tag and one ready() function.
Demo:
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td>
<input type="text" name="pages" class="row1" />
</td>
<td><span class="row1c">0.00</span>
</td>
</tr>
<tr>
<td>500 Tk Note</td>
<td>
<input type="text" name="pages" class="row2" />
</td>
<td><span class="row2c">0.00</span>
</td>
</tr>
<tr>
<td>100 Tk Note</td>
<td>
<input type="text" name="pages" class="row3" />
</td>
<td><span class="row3c">0.00</span>
</td>
</tr>
<tr>
<td>50 Tk Note</td>
<td>
<input type="text" name="pages" class="row4" />
</td>
<td><span class="row4c">0.00</span>
</td>
</tr>
<tr>
<td colspan="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span>
</td>
</tr>
</table>
Here is what i am doing.. its categorized table where when clicked to button shows detail regarding otherwise remain hidden, CSS is working good for me, problem is when i click on button to display tbody nothing happens, can't get what's wrong with it. have a look on my code..
css for make him hidden unless he is not clicked,
.down1 {
display: none;
}
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
});
});
<table align="center" cellpadding="10" width="300">
<tr>
<th bgcolor="brown"></th>
<th bgcolor="brown">Day</th>
<tr>
<td align="center" bgcolor="lightgrey">
<input type="button" value="+" id="show1" />
</td>
<td align="center" bgcolor="lightgrey">Monday</td>
<tbody class="down1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tbody>
</tr>
</tr>
</table>
This example can help you : Example
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
if ($(this).val() == '+') {
$(this).val('-');
} else $(this).val('+');
});
});
Not sure but is this what you want?
JSfiddle:
http://jsfiddle.net/yoy5xph3/1/
$(".down1").toggle();
$("#show1").click(function(){
$(".down1").toggle();
});
I removed the css and toggled the .down1 at the start so it hides.
You can show my DEMO CODE
It's working
Jquery
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
if ($(this).val() == '+') {
$(this).val('-');
} else $(this).val('+');
});
});
Markup
<tbody class="down1">
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
</tbody>
i have a form with Jquery .validation().
Form:
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
I would like to print errors like this:
Is it possible?
Thanks in advance :)
Demo Here
HTML
<form name="test">
<table cellspacing="1" cellpadding="1">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/>
<span class="error_span">Enter name</span>
</td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/>
<span class="error_span">Enter last name</span>
</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/>
<span class="error_span">Enter address</span>
</td>
</tr>
</table>
<input type='button' id='submit' name='enter' value='submit'/>
</form>
jQuery
$(document).ready(function(){
$("#submit").click(function(){
$('input').each(function(index) {
if($(this).val()=="") {
$(this).addClass("has_error");
$(this).siblings(".error_span").show();
}else{
$(this).removeClass("has_error");
$(this).siblings(".error_span").hide();
}
});
});
});
CSS
.error_span{
color:red;
display:none;
}
.has_error{
border:1px solid red;
}
Demo Here
You can use onsubmit attribute of your form to execute the javascript and stop the form from submitting if there is validation error
You can do in Two ways..
1)
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td></td>
<td>Name Is Required</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
or
2)
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/> <br />Name Is Required</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
You have to use custom validation code for doing like that. Check this link. http://docs.jquery.com/Plugins/Validation/Validator/addMethod