We Keep Coding

unable to use <bean:write> inside <html:select>

</tr>
<tr style="height:30px">
<td width="3%"> </td>
<td width="20%" align="right"><b><bean:message key="abc.title" /><font
color="red">*</font> </b> </td>`enter code here`
<td width="30%" align="left"><input
id="title<bean:write name="listInstance"
property="listInstanceId"/>"
name="textfield" type="text" class="inp_Textbox"
maxlength="100" size="55"/></td>
<td width="20%" align="right"><b><bean:message key="abc.userParties" /> </b> </td>
<td width="30%" align="left">
<html:select
property="arrUserPartiesid" styleId="arrUserPartiesid<bean:write name="listInstance"
property="listInstanceId"/>" style="width:100px" name="UserForm"
styleClass="inp_Textbox" multiple="true" >
<html:optionsCollection name="USER PARTIES" />
</html:select>
</td>
how can i append something to styleID like i appended it with to id="title". I'am getting an error "equal symbol not identified" if i do it like this.

How to get value of input from next()

I need to retrieve data from an input but the id is dynamic. I only know the previous name of the field, in my snippet is Login and Password.
Here is what I tried :
console.log($( "td:contains('Login')").next('input').val());
console.log($( "td:contains('Login')").next('td > input').val());
console.log($( "td:contains('Login')").next('tr > td > input').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class="fieldlabel" width="20%" style="color: rgb(255, 0, 0);">Login</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[52]" id="customfield52" value="Somelogin" size="30" class="form-control">
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[53]" id="customfield53" value="Somepass" size="30" class="form-control">
</td>
</tr>
How can I get the values of the both input ?
EDIT
I have a new question related to this topic.
I now have a second input field (Password and Login). How can I get the second input value. In my situation it's the first input I get.
var password_user = $( "tr:nth-child(2) > td:contains('Password')").next('td').find('input').val();
console.log(password_user);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form" width="100%" border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr>
<td class="fieldlabel" width="20%">Order #</td>
<td class="fieldarea" width="30%">1 - View Order</td>
<td class="fieldlabel" width="20%">Registration Date</td>
<td class="fieldarea" width="30%"><input type="text" name="regdate" value="22/01/2011" size="12" class="form-control date-picker hasDatepicker" id="dp1540302344931"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Product/Service</td>
<td class="fieldarea" width="30%">
<input type="hidden" name="oldpackageid" value="70">
<select name="packageid" class="form-control select-inline-long">
<optgroup label="lbl">
<option value="86">TEST1</option>
<option value="87">TEST2</option>
</optgroup>
</select>
</td>
<td class="fieldlabel" width="20%">First Payment Amount</td>
<td class="fieldarea" width="30%"><input type="text" name="firstpaymentamount" value="10" size="10" class="form-control input-100"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Server</td>
<td class="fieldarea" width="30%">
<select name="server" class="form-control select-inline">
<option value="232">TEST2</option>
<option value="234">TEST1</option>
</select>
</td>
<td class="fieldlabel" width="20%">Recurring Amount</td>
<td class="fieldarea" width="30%"><input type="text" name="amount" value="10" size="10" class="form-control input-100 input-inline"> <label class="checkbox-inline"><input type="checkbox" name="autorecalcrecurringprice" value="1"> Auto Recalculate on Save</label></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Domain</td>
<td class="fieldarea" width="30%">
<div class="input-group input-300">
<input type="text" name="domain" value="test" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:-3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>www</li>
<li>whois</li>
<li>intoDNS</li>
</ul>
</div>
</div>
</td>
<td class="fieldlabel" width="20%">Next Due Date</td>
<td class="fieldarea" width="30%"><input type="hidden" name="oldnextduedate" value="22/07/2019"><input type="text" name="nextduedate" value="22/07/2019" size="12" class="form-control date-picker hasDatepicker" id="17852"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Dedicated IP</td>
<td class="fieldarea" width="30%"><input type="text" name="dedicatedip" value="789456" size="25" class="form-control input-200"></td>
<td class="fieldlabel" width="20%">Termination Date</td>
<td class="fieldarea" width="30%"><input type="text" name="termination_date" value="" size="12" class="form-control date-picker hasDatepicker" id="12545412"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Username</td>
<td class="fieldarea" width="30%"><input type="text" name="username" value="testUser" size="20" class="form-control input-200 input-inline"> </td>
<td class="fieldlabel" width="20%">Billing Cycle</td>
<td class="fieldarea" width="30%">
<select name="billingcycle" class="form-control select-inline">
<option value="Free Account">Free</option>
<option value="One Time">One Time</option>
<option value="Monthly">Monthly</option>
<option value="Quarterly" selected="">Quarterly</option>
<option value="Semi-Annually">Semi-Annually</option>
<option value="Annually">Annually</option>
<option value="Biennially">Biennially</option>
<option value="Triennially">Triennially</option>
</select>
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" width="30%"><input type="text" name="password" value="Pass" size="20" class="form-control input-200"></td>
<td class="fieldlabel" width="20%">Payment Method</td>
<td class="fieldarea" width="30%">
<select name="paymentmethod" class="form-control select-inline">
<option value="paypal" selected="">PayPal</option>
</select>
View Invoices
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Status</td>
<td class="fieldarea" width="30%">
<select name="domainstatus" class="form-control select-inline" id="prodstatus">
<option value="Pending">Pending</option>
<option value="Active" selected="">Active</option>
<option value="Completed">Completed</option>
<option value="Suspended">Suspended</option>
<option value="Terminated">Terminated</option>
<option value="Cancelled">Cancelled</option>
<option value="Fraud">Fraud</option>
</select>
</td>
<td class="fieldlabel" width="20%">Promotion Code</td>
<td class="fieldarea" width="30%">
<select name="promoid" class="form-control select-inline">
<option value="0">None</option>
<option value="463">CODETEST - 40.00% One Time</option>
</select>
<br>(Change will not affect price)
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Module Commands</td>
<td class="fieldarea" colspan="3">
<div id="modcmdbtns">
<button style="margin-left:4px;" id="diagnostic_btn_Custom" class="btn btn-default" data-toggle="modal" data-target="#diagnosticModal">Diagnostic</button>
<div class="modal fade" id="diagnosticModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Diagnostic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div style="margin-left:5px;" class="row">Transmission: <span style="display: none;" id="loader_transmission"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="transmission_res" style="color: rgb(46, 204, 64);">✔</span></div>
<div style="margin-left:5px;" class="row">FTP: <span style="display: none;" id="loader_ftp"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="ftp_res" style="color: rgb(255, 65, 54);"></span></div>
<div style="margin-left:5px;" class="row">Nextcloud: <span style="display: none;" id="nextcloud_loader"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="nextcloud_res" style="color: rgb(255, 65, 54);"></span></div>
<div style="margin-left:5px;" class="row">Coffre-fort: <span style="display: none;" id="loader_coffre"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="coffre_res" style="color: rgb(255, 65, 54);"></span></div>
</div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button></div>
</div>
</div>
</div>
</div>
<div id="modcmdworking" style="display:none;text-align:center;"><img src="images/loader.gif"> Working...</div>
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Addons</td>
<td class="fieldarea" colspan="3">
<div class="tablebg">
<table id="sortabletbl1" class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th>Reg Date</th>
<th>Name</th>
<th>Pricing</th>
<th>Status</th>
<th>Next Due Date</th>
<th width="20"></th>
<th width="20"></th>
</tr>
<tr>
<td colspan="7">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Login</td>
<td class="fieldarea" colspan="3"><input type="text" value="GETTHISVALUE" size="30" class="form-control"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" colspan="3"><input type="text" value="GETTHISVALUE" size="30" class="form-control"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Subscription ID</td>
<td class="fieldarea" colspan="3">
<div class="input-group input-500" id="subscription">
<input type="text" name="subscriptionid" value="I-123" size="25" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="btnCancel_Subscription" style="margin-left:-3px;">
Cancel Subscription
</button>
</span>
</div>
<div id="subscriptionworking" style="display:none;text-align:center;"><img src="images/loader.gif"> Working...</div>
</td>
</tr>
<tr></tr>
</tbody>
</table>

Your code has two problem.
1- <tr> should wrapped into <table> to be valid html.
2- The input isn't next element after td. You should get next td first and then select input in it.
console.log($("td:contains('Login')").next('td').find('input').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="fieldlabel" width="20%" style="color: rgb(255, 0, 0);">Login</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[52]" id="customfield52" value="Somelogin" size="30" class="form-control">
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[53]" id="customfield53" value="Somepass" size="30" class="form-control">
</td>
</tr>
</table>

First don't use the text as discriminator. Set an ID instead on the Element, it is much more effective. If you can then just set classes to both inputs and select them by class. Also much cleaner and more effective.
If you are screen scraping and can't change the html code then I would suggest Selecting all the relevant ````` and looping over them in code. There you have much better tools to your disposal. eg.
$("tr")
.toArray()
.filter((el) => /Login|Password/.exec($(el).text()) !== null)
.map((el) => el.querySelector("input"));
Good luck!

You can assign common class name to all that input element for which you want to get the value.
Check below code.
$(".data").each(function(k,v){console.log($(v).val())})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="fieldlabel" width="20%" style="color: rgb(255, 0, 0);">Login</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[52]" id="customfield52" value="Somelogin" size="30" class="form-control data">
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[53]" id="customfield53" value="Somepass" size="30" class="form-control data">
</td>
</tr>
</table>

Copy button not working on HTML template

Can I please ask for assistance, im new to html and css i barely know this things though im trying to learn, here's what i made so far but i cant seem to get the copy button fixed .. can someone help me out please
im trying to create a template, im sorry im really trying hard to learn but im clueless..
<form id="tickettemplate" name="tickettemplate">
<table width="700">
<tbody>
<tr>
<td colspan="4" align="center">
<div align="center">
<p style="font-size: 14pt;" align="center">
<strong>Shin's Template</strong>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-size: 12pt; height: 164px;" width="697">
<tbody>
<tr>
<td valign="middle">
D/SESA
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Caller’s name:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Callback number:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
E-mail address:
</td>
<td>
<input id="ctystate0" name="E-mail Address" size="50"
type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Related case#s (history):
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Location,remote/hotel/office:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
</tbody>
</table><br />
<div>
<br />
<table style=
"font-size: 12pt; border: 0px solid gray; height: 44px;" width=
"758" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle">
Application name:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Number of Users Affected:
</td>
<td>
<select id="Number of Users Affected:0" name=
"Number of Users Affected:" size="1">
<option value="Single User">
Single User
</option>
<option value="Less than 5 users">
Less than 5 users
</option>
<option value="5 or more users">
5 or more users
</option>
</select>
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt; height: 255px;" width="604">
<tbody>
<tr>
<td valign="middle">
What is the problem:
</td>
<td>
<p>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</p>
</td>
</tr>
<tr>
<td valign="middle">
When did the issue/problem begin:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Logon id: :
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Error message (if any):
</td>
<td>
<input id="ctystate0" name="Error message (if any):"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
When was the last time it worked properly:
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Have there been any changes to your PC since the last
time it worked properly:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="middle">
Have you changed your password recently:
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt;">
<tbody>
<tr>
<td valign="middle">
Trouble shooting steps (Detailed):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
<tr>
<td valign="middle">
Additional Detail (links, screenshots etc...):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
</tbody>
</table>
<div>
<br />
<table style=
"font-size: 12pt; border: 1px solid gray; height: 92px;"
width="612" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
Problem:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Cause:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Action:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Resolution:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td align="right" width="150">
<input name="Reset" type="reset" value=
"Clear Template" />
</td>
<td align="right" width="450">
<input name="copyform" type="button" value=
"Copy" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>

Here is a solution that uses a few lines of JS.
HTML
<p id="p1">Text</p>
<button onclick="copyToClipboard('#p1')">Copy TEXT</button>
JS
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}

Form does not do anything when pressing Submit

The form is missing an action url, since the javascript takes care of that.
I recently fixed an issue with not labeling the submit button as type=submit that caused ie 6 and 7 to not do anything when clicking on the submit..
But I recently still get complains on the form not doing anything when someone presses the submit button.
My only last guess would be that they disabled javascript...
If anyone have some other point of view on this Please Take a look. Could be old Browsers issue, could be code issue..
JSfiddle
http://jsfiddle.net/wn21av2y/1/
HTML
<form id="form1" name="form1" method="post" style="transition: 3s height; overflow: hidden;">
<table width="100%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td width="25%" align="right">Practitioner's Full Name<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="name" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td width="25%" align="right">Type<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<select name="type" required="">
<option value="MD">MD</option>
<option value="OD">OD</option>
<option value="OTHER">OTHER</option>
</select>
</td>
</tr>
<tr>
<td align="right">Street Address<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="address" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">City<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="city" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">State<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<select name="state" id="state" required="">
<option value="AL" selected="">Alabama</option>
<option value="AK">STATES</option>
</select>
</td>
</tr>
<tr>
<td align="right">Zip<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="zip" type="text" placeholder="12345-1234" required="" pattern="(\d{5}([\-]\d{4})?)">
</td>
</tr>
<tr>
<td align="right">Phone<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="phone" type="text" required="" placeholder="123-456-7890" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
</tr>
<tr>
<td align="right">Email<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="email" type="email" required="" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
</td>
</tr>
<tr>
<td align="right">Signature ( Type Name )<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="sig" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">Today's Date<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input type="text" class="datepicker date1" required="">
</td>
</tr>
<tr>
<td align="right">State License Number<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="lic_numb" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">License Exp. Date<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input type="text" class="datepicker date2" required="">
</td>
</tr>
<tr>
<td align="right" valign="top">
<input name="check1" type="checkbox" value="" required=""><span style="color:red;">*</span>
</td>
<td style="text-align: left">My signature certifies that
<br>1) The information provided</td>
</tr>
<tr>
<td align="right" valign="top">
<input name="check2" type="checkbox" value="" required=""><span style="color:red;">*</span>
</td>
<td style="text-align: left">I verify that the recipient is eligible to receive samples.<br>
</td>
</tr>
<tr>
<td width="25%" align="right"> </td>
<td style="text-align: left">
<button type="submit" class="submits">Submit</button>
</td>
</tr>
</tbody>
</table>
</form>
script
jQuery(function($) {
$(".datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
$("#form1").submit(function() {
var url = "example.com/process.php"; // the script where you handle the form input.
$.post(url, {
name: $("input[name='name']").val(),
type: $("select[name='type'] option:selected").text(),
address: $("input[name='address']").val(),
city: $("input[name='city']").val(),
state: $("select[name='state'] option:selected").text(),
zip: $("input[name='zip']").val(),
phone: $("input[name='phone']").val(),
email: $("input[name='email']").val(),
sig: $("input[name='sig']").val(),
date: $(".date1").datepicker("getDate"),
lic_numb: $("input[name='lic_numb']").val(),
lic_date: $(".date2").datepicker("getDate"),
code: 'tEH4s'
}).done(function(data) {
$(".result").html(data);
$('input').val('');
$('#form1').css("height", "0");
});
return false; // avoid to execute the actual submit of the form.
});
});

An important quirk to be aware of: In a form that contains a <button/> element, IE6 and IE7 will not submit the form when the <button/> element is clicked. Other browsers, on the other hand, will submit the form. - Source
To get it to work in IE6 and IE7 you need to change the button tag to instead be:
<input type="submit" class="submits" value="Submit" />

To my mind you need an action for the form to be submitted, as it's said at the w3c HTML 4 spec.

How to hide elements depending on the state of radio buttons with Javascript

I have a data entry form on my site which contains multiple checkboxes, two radio buttons and a text fields. I want to make the text field show if "cheque" radio buttons is selected and hide that text box with value of Cheque text box's if "cash" radio button is selected.
The radio buttons and text area are as follows:
<tr>
<td valign="top" width="300">Balance Amount:</td>
<td valign="top" width="300" align="left">
<input type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder="" size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
</td>
</tr>
<tr>
<td valign="top" width="300">Mode Of Payement :</td>
<td valign="top" width="300" align="left">
Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >
Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
</td>
</tr>
<tr id="bankName">
<td valign="top" width="300">Bank Name :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
</td>
</tr>
<tr id="branch">
<td valign="top" width="300">Branch :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
</td>
</tr>
<tr id="Acc_No">
<td valign="top" width="300">Account No :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="account_no" id="account_no" placeholder="" />
</td>
</tr>
<tr id="chq_no">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
<tr id="pay_at">
<td valign="top" width="300">Payable At</td>
<td valign="top" width="300" align="left">
<input id="payable_at" name="payable_at" class="k-textbox" type="text" ></input></td>
</tr>
<tr>
<td valign="top" width="300">Paid Amount</td>
<td valign="top" width="300" align="left">
<input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
</tr>
<tr>
<td valign="top" width="300">Amount In Words</td>
<td valign="top" width="300" align="left">
<input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
</tr>

Try a change handler for the radio buttons.
Also add a class cheque to the cheque specific rows like
<tr id="chq_no" class="cheque">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date" class="cheque">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
then
jQuery(function(){
$('input[name="mode_of_payment"]').change(function(){
$('.cheque').toggle(this.checked && this.value==1)
}).change()
})
Demo: Fiddle

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#chq_no").hide();
$("#chq_date").hide();
$(":radio").click(function(e) {
switch($(this).val()){
case "1":
$("#chq_no").show();
$("#chq_date").show();
break;
case "2":
$("#chq_no").hide();
$("#chq_date").hide();
break;
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td valign="top" width="300">Balance Amount:</td>
<td valign="top" width="300" align="left">
<input type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder="" size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
</td>
</tr>
<tr>
<td valign="top" width="300">Mode Of Payement :</td>
<td valign="top" width="300" align="left">
Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >
Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
</td>
</tr>
<tr id="bankName">
<td valign="top" width="300">Bank Name :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
</td>
</tr>
<tr id="branch">
<td valign="top" width="300">Branch :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
</td>
</tr>
<tr id="Acc_No">
<td valign="top" width="300">Account No :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="account_no" id="account_no" placeholder="" />
</td>
</tr>
<tr id="chq_no">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
<tr id="pay_at">
<td valign="top" width="300">Payable At</td>
<td valign="top" width="300" align="left">
<input id="payable_at" name="payable_at" class="k-textbox" type="text" ></input></td>
</tr>
<tr>
<td valign="top" width="300">Paid Amount</td>
<td valign="top" width="300" align="left">
<input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
</tr>
<tr>
<td valign="top" width="300">Amount In Words</td>
<td valign="top" width="300" align="left">
<input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
</tr>
</table>
</body>
</html>

Try This
$(document).ready(function () {
$('input[name=mode_of_payment]').change(function () {
$('#chq_no').toggle(this.checked && this.value == 1);
$('#chq_date').toggle(this.checked && this.value == 1);
}).change();
});

i think you have to try show() and hide() function of java script and also use Css property like display:block and display:hidden for hide and show text box.
#namrata shrivas