Develop Reference

Display respective text box when checkbox is checked in a table

Display respective text box when checkbox is checked in the table which is inside the form.
The rows will generate dynamically depending upon the data send from the server, along with the data.
When the checkbox is checked the text box of that row should be displayed otherwise it should be hidden
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required/></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary/"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

You can try this:
$(".table input[name='product-status']").change(function(){
if($(this).is(":checked")){
$(this).parents("tr:eq(0)").find("input[name='send-quality']").show();
}
else{
$(this).parents("tr:eq(0)").find("input[name='send-quality']").hide();
}
});
input[name='send-quality']
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"</td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

Using $(this).is(":checked"), see if the checkbox is checked. If it is checked, show the relevant input box. I have added a class hidden to each input box for this demo:
$('input[type=checkbox]').on('click', function() {
if ($(this).is(":checked"))
$(this).parents("tr:first").find('.hidden').show();
else
$(this).parents("tr:first").find('.hidden').hide();
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality" /> </td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

how to expand the table row on click of check box?

Onclick of the checkbox I want to expand the table row and and ask for additional information using labels and input tag.But this coming in the straight line and I want this in the new line.
below is the example.
function serverVn(obj) {
document.getElementById(obj.id + "expand").innerHTML = "<div id='Vn'><label>VNumber:</label><input id='INVn' class='form-control' type='text'/></div>"
}
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>firstname</th>
<th>lastname</th>
<th>dOB</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id='use0' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use0expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use1' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use1expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use2' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td></td>
<td></td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use2expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use3' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use3expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use4' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use4expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use5' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use5expand'></div>
</td>
</tr>
</tbody>
</table>

JS is case sensitive.
Your is invalid HTML
use jQuery now you have it
Put xxxexpand in a new ROW / cell instead of a cell in the same row
Add the obj id to the input too to make unique IDs
I removed the div since you already have a cell you can use
I also remove the new row when unchecked
$(function() {
$(".sVN").on("click", function() {
$("#" + this.id + "expand").html(this.checked ? "<label for='INVn" + this.id + "' >VNumber:</label><input id='INVn" + this.id + "' class='form-control' type='text'/>" : "");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>firstname</th>
<th>lastname</th>
<th>dOB</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id='use0' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use0expand'></td>
</tr>
<tr>
<td>
<input id='use1' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use1expand'></td>
</tr>
<tr>
<td>
<input id='use2' type='checkbox' name='chkbox' class="sVN" />
</td>
<td> </td>
<td> </td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use2expand'></td>
</tr>
<tr>
<td>
<input id='use3' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use3expand'></td>
</tr>
<tr>
<td>
<input id='use4' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use4expand'></td>
</tr>
<tr>
<td>
<input id='use5' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use5expand'></td>
</tr>
</tbody>
</table>

Convert existing input and table to Kendo Textbox and Kendo Grid

I have a login form and I would like to kendofy it i.e. basically convert it into a responsive form like this: http://demos.telerik.com/kendo-ui/validator/index
Is there a quick way that would allow me to convert my existing username and password fields to kendo textbox fields such that I am able to achieve the responsive design without actually creating the fields again myself? Looking forward to your suggestions.
My Form:
<form action="https://../Portal" method="post" name="loginForm">
<input name="act" value="portalLogin" type="hidden">
<input name="c" value="12912" type="hidden">
<input name="p" value="101074" type="hidden">
<input name="d" value="101076" type="hidden">
<input name="g" value="101097" type="hidden">
<input name="objDefId" value="13439" type="hidden">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div id="rbi_S_101098" name="Notification Message">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="k-content" id="rbi_S_101100" name="User Login">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<table>
<tbody>
<tr>
<td nowrap="" align="right"><strong>Login Name </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="loginName" maxlength="50" size="40" type="text">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td nowrap="" align="right"><strong>Password </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="password" maxlength="50" size="40" type="password">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignmant="right" nowrap="">
<strong><input class="btn btn-small" value=" Login " type="submit"></strong> </td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignment="right" nowrap="">
Forgot your password? </td>
</tr>
</tbody>
</table>
</td>
<script>
document.loginForm.loginName.focus();
</script>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div id="rbi_S_114558" name="Scripts Section">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="detailHTMLCol" colspan="2">
</td>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Cheers.

How to group table rows and filter the groups with jQuery or JavaScript?

I am using <tbody> to group table rows. My table looks like this:
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<br /><br />
<table id="indberetningstable" style="text-align: center; border: solid; align: center">
<thead>
<tr>
<th>Valgsted</th>
<th>Parti</th>
<th>Stemmer</th>
<th>Gem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Idrætshuset</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>A - Socialdemokraterne</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>B - Det Radikale Venstre</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>C - Det Konservative Folkeparti</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Strandvejsskolen</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>A - Socialdemokraterne</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>B - Det Radikale Venstre</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>C - Det Konservative Folkeparti</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
</tbody>
</table>​
You can see an example here:
http://jsfiddle.net/zDA7n/
How is it possible to filter the table, so that when i write a search string in the "kwd_search" input field, it will hide everything but the <tbody> group that contains the search-text in it's first column (Valgsted) ?

Use the :contains selector (note: this is case-sensitive):
$('#kwd_search').on('change',function() {
var val = $.trim($(this).val());
$('#indberetningstable tbody').show();
if (val) {
$('#indberetningstable tbody:not(:contains("'+val+'"))').hide();
};
});​
http://jsfiddle.net/mblase75/pEfSF/
For a case-insensitive version, you'll need to implement a custom version of the :contains selector.

Javascript TypeError: xxx is not a function

Friends I came to a bit of problem. Everything was working fine before. But I can't rectify why it starts giving me such error.
Here is my JavaScript Code:
function newSupplier() {
$('div#AddSupplier div.msg').html('').hide();
$('div#AddSupplier div.loader').show();
registerSupplier($('div#AddSupplier table.frm :input').serialize()).done(function (a) {
if (a.Msg) {
$('div#AddSupplier div.msg').html(a.Msg).removeClass('success').addClass('error').fadeIn();
}
else if (a.supid) {
$('div#AddSupplier div.msg').html('Supplier <span class="l2">' + a.supid + '</span> Registered').removeClass('error').addClass('success').fadeIn();
$('div#AddSupplier table.frm :input').val('');
}
}).always(function () {
$('div#AddSupplier div.loader').hide();
}).fail(function () {
$('div#AddSupplier div.msg').html(errMsgNet).removeClass('success').addClass('error').fadeIn();
});
}
And here is the code of registerSupplier() function:
function registerSupplier(dataToPost) {
return $.ajax({
type: "POST",
url: jsonpath + 'Json.ashx?method=RegisterSupplier',
data: dataToPost
});
}
And here is the complete JS file: http://preview.myignou.com/Docs/jScript.js
Related HTML
<div id="ViewOrder">
<h2>View Order Details</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Enter Order Number</label></td>
<td><input type="text" name="orderNumber" onkeyup="$('#ViewOrder>div>div').fadeOut();" /><input type="button" class="but1 m-side" value="OK" onclick="LoadMaterialOrder();"/></td>
<td>
<div class="process"> </div>
</td>
</tr>
</table>
<div>
<div class="border shadow m-tb">
<h2 class="header">Order Details</h2>
<div id="orderDetails" class="tab-content">
<table class="frm">
<tr>
<td><label>Supplier</label></td>
<td><select id="newSupplier" name="supplier"></select></td>
<td class="r-align"><input type="button" value="Load Suppliers" onclick="loadSuppliers('#newSupplier')" /></td>
</tr>
<tr>
<td><label>Order Date</label></td>
<td><input type="text" name="orderDate" /></td>
</tr>
<tr>
<td><label>Delivery Date</label></td>
<td><input type="text" name="deliveryDate" /></td>
</tr>
<tr>
<td><label>Cancel Date</label></td>
<td><input type="text" name="cancelDate" /></td>
</tr>
<tr>
<td><label>Payment Due Mark</label></td>
<td><input id="payDue2" type="checkbox" name="isPayDue" /><label for="payDue2">Yes</label></td>
</tr>
<tr>
<td><label>Remember Mark</label></td>
<td><input id="remark2" type="checkbox" name="isMarked" /><label for="remark2">Yes</label></td>
</tr>
</table>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1 sub-but" value="Save Changes" onclick=""/><input type="reset" value="Reset" /></td>
</tr>
</table>
</div>
<br />
<div class="border shadow m-tb">
<h2 class="header">Payment Records</h2>
<div id="paymentHistory" class="tab-content">
<table class="tab pay-his">
<tr class="th">
<td></td>
<td>Trans#</td>
<td>Date</td>
<td>Comment</td>
<td>Type</td>
<td>Credit</td>
<td>Debit</td>
<td>Balance</td>
<td>Associated Agent</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-1</td>
<td>12-12-12</td>
<td>Abclk lask aa</td>
<td>Credit</td>
<td>500</td>
<td></td>
<td>500.00</td>
<td>Shashwat Tripathi</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-2</td>
<td>12-12-12</td>
<td>Shashwat Tripathi</td>
<td>Debit</td>
<td></td>
<td>500</td>
<td>500.00</td>
<td>Sudhir</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-3</td>
<td>12-12-12</td>
<td>Shashwat Tripathi</td>
<td>Credit</td>
<td>500</td>
<td></td>
<td>500.00</td>
<td>Sudhir Gaur</td>
</tr>
</table>
<br />
<input type="button" class="but2" value="Edit"
onclick="$('#ViewOrder #payEdit').slideDown(function () { $('html, body').animate({ scrollTop: $('#paymentHistory').offset().top-20 }, 500); });" /><input type="button" class="but2 m-side" value="Delete" />
<div id="payEdit" class="border m-tb shadow" style="display:none;">
<h2 class="header">Edit Payment</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Date</label></td>
<td><input type="text" name="date" placeholder="dd-mm-yy"/></td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<select name="type">
<option>Credit</option>
<option>Debit</option>
<option>Expense</option>
</select>
</td>
</tr>
<tr>
<td><label>Amount</label></td>
<td><input type="text" name="amount" placeholder="धनराशी..." /></td>
</tr>
<tr>
<td><label>Comment</label></td>
<td><textarea name="comment" rows="4" cols="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" class="but1" value="Save Changes" /><input type="button" class="but2 m-side" onclick="$('#payEdit').slideUp();" value="Cancel" /></td>
</tr>
</table>
</div>
</div>
<br />
<h2>Register New Payment</h2>
<hr />
<div id="newMatOrderPayment">
<table class="frm">
<tr>
<td><label>Date</label></td>
<td><input type="text" name="date" placeholder="dd-mm-yy" /></td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<select name="type">
<option>Credit</option>
<option>Debit</option>
<option>Expense</option>
</select>
</td>
</tr>
<tr>
<td><label>Amount</label></td>
<td><input type="text" name="amount" placeholder="धनराशी..." /></td>
</tr>
<tr>
<td><label>Comment</label></td>
<td><textarea name="comment" rows="4" cols="10"></textarea></td>
</tr>
</table>
</div>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1" value="Register Payment" onclick=""/><input type="button" class="but2" onclick="$('#NewMatOrderPayment :text').val('');" value="Reset" /></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="AddSupplier">
<h2>Register New Suppiler</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Supplier ID</label></td>
<td><input type="text" name="supId" /></td>
</tr>
<tr>
<td><label>Contact Number</label></td>
<td><input type="text" name="contact" /></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea name="address" cols="10" rows="4"></textarea></td>
</tr>
<tr>
<td><label>Email address</label></td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type="text" name="city" /></td>
</tr>
</table>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1 sub-but" value="Register" onclick="newSupplier();"/><input type="reset" value="रीसेट" /></td>
</tr>
</table>
</div>
If I am calling this function directly from FF and Firebug console then It is getting called.
But on button click I am getting error TypeError: newSupplier is not a function
Please ask me If u need additional code.

the first select tag in your html code has ID newSupplier just like the name of the function. some browsers can access the node elements just by specifying the ID in the js code and then the function defined is overridden by the element in the DOM.
you need to rename the function name or the element ID.