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.
Related
This is the original form
<form action="#" method="POST" id="cart_form">
<table class='header_tbl' style="background:none !important;">
<thead>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Amount(RM)</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td><span class='qty_1'></span><input type='hidden' name='total_qty' value=''></td>
<td><span class='total'></span><input type='hidden' name='total' value=''></td>
<td></td>
</tr>
<!--membership-->
<tr id="membership" class="no_show">
<td><span class="mem_1"></span></td>
<td></td>
<td><span class="mem_2"></span></td>
<td><span class="mem_3"></span><input type='hidden' name='mem' value='10'><br/><input type='hidden' name='email_2' value=''><input type='hidden' name='ic_add' value=''></td>
<td></td>
</tr>
<tr id="comm" class="no_show">
<td>Commision (x%)</td>
<td></td>
<td></td>
<td><span class='comm'><?php echo $discount;?></span>%<input type='hidden' name='comm' value='<?php echo $discount;?>'></td>
<td></td>
</tr>
<tr class="no_show">
<td>Total Payment</td>
<td></td>
<td></td>
<td><span class='grand'></span><input type='hidden' name='grand' value=''></td>
<td></td>
</tr>
<tr id='add_here'>
</tr>
<!--cust info starts-->
<tr class="no_show">
<td colspan="3"><input type='hidden' name='cust_id' id='cust_id' value=''><br/><input type='hidden' name='cust_email' id='cust_email' value=''></td>
<td></td>
</tr>
<tr class="no_show">
<td colspan="3"><input type='hidden' name='cust_name' id='cust_name' value=''></td>
<td></td>
</tr>
<!--membership-->
<tr>
<td colspan="4"><input type='hidden' name='mem_id' value='<?php echo $membership;?>'></td>
<td></td>
</tr>
<tr>
<td colspan="4"><input type='hidden' name='mem_name' value='<?php echo $username;?>'></td>
<td></td>
</tr>
<!--membership ends-->
<!--cust info ends-->
<!--membership ends-->
<tr id="replace_this">
<td></td>
<td class="cancel"><input type="button" name='cancel' id="cancel" value="CANCEL"/></td>
<td class="cash"><input type="submit" name='submit' id="cash" value="CASH"/></td>
<td class="checkout"><input type="button" name='checkout' id="checkout" value="CHECK OUT"/></td>
<td></td>
</tr>
</tfoot>
</table>
</form>
All rows between <tbody></tbody> appended via jquery
I'm shifting this entire form into new destination like this:
$('#left_col #cart_form2').html($('#cart_form').html());
The new form's destination has the following structure:
<div class='small-12 medium-6 large-6 columns' id='left_col'>
<div class="container">
<form action="#" method="POST" id="cart_form2"> </form>
</div>
</div>
The output after shifted to new destination is:
The value in the textbox are empty in the new destination.How do I get the values when shifting? I tried cloning but that doesn't work here well for me.
EDIT:
console.log("cart= "+$('#cart_form').html());
<table class="header_tbl" style="background:none !important;">
<thead>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Amount(RM)</th>
<th></th>
</tr>
</thead>
<tbody><tr id="2"><th class="product">Slimming Tea<input type="hidden" name="catalog_name[]" value="Slimming Tea"></th><td class="price">RM <span class="pp_2">25</span><input type="hidden" id="2_price[]" name="price[]" value="25" class="price2"></td><td class="qty_2"><input type="text" name="qty" style="width:50px;height:20px;margin:10px auto;" value="" onchange="subTotal2("2")"><input type="hidden" id="2_qty2[]" name="qty2[]" value=""><span class="show_2"></span></td><td class="sub_total">25</td><td><img src="http://emall.3pteb.my/pos_system/img/del.png" style="width:15px;cursor:pointer;" onclick="del_this("2")"></td></tr><tr id="4"><th class="product">Karipap Pusing Ayu<input type="hidden" name="catalog_name[]" value="Karipap Pusing Ayu"></th><td class="price">RM <span class="pp_4">8</span><input type="hidden" id="4_price[]" name="price[]" value="8" class="price2"></td><td class="qty_4"><input type="text" name="qty" style="width:50px;height:20px;margin:10px auto;" value="" onchange="subTotal2("4")"><input type="hidden" id="4_qty2[]" name="qty2[]" value=""><span class="show_4"></span></td><td class="sub_total">16</td><td><img src="http://emall.3pteb.my/pos_system/img/del.png" style="width:15px;cursor:pointer;" onclick="del_this("4")"></td></tr>
</tbody>
<tfoot>
<tr>
<td>Total</td><td></td><td><span class="qty_1">3</span><input type="hidden" name="total_qty" value=""></td><td><span class="total">41</span><input type="hidden" name="total" value="41"></td><td></td>
</tr>
<!--membership-->
<tr id="membership" class="no_show">
<td><span class="mem_1"></span></td><td></td><td><span class="mem_2"></span></td><td><span class="mem_3"></span><input type="hidden" name="mem" value="10"><br><input type="hidden" name="email_2" value=""><input type="hidden" name="ic_add" value=""></td><td></td>
</tr>
<tr id="comm" class="no_show">
<td>Commision (x%)</td><td></td><td></td><td><span class="comm">20</span>%<input type="hidden" name="comm" value="20"></td><td></td>
</tr>
<tr class="no_show">
<td>Total Payment</td><td></td><td></td><td><span class="grand">41</span><input type="hidden" name="grand" value="41"></td><td></td>
</tr>
<tr id="add_here">
</tr>
<!--cust info starts-->
<tr class="no_show">
<td colspan="3"><input type="hidden" name="cust_id" id="cust_id" value=""><br><input type="hidden" name="cust_email" id="cust_email" value=""></td><td></td>
</tr>
<tr class="no_show">
<td colspan="3"><input type="hidden" name="cust_name" id="cust_name" value=""></td><td></td>
</tr>
<!--membership-->
<tr>
<td colspan="4"><input type="hidden" name="mem_id" value="123"></td><td></td>
</tr>
<tr>
<td colspan="4"><input type="hidden" name="mem_name" value="QIZLAF MARKETING"></td><td></td>
</tr>
<!--membership ends-->
<!--cust info ends-->
<!--membership ends-->
<tr id="replace_this">
<td></td>
<td class="cancel"><input type="button" name="cancel" id="cancel" value="CANCEL"></td>
<td class="cash"><input type="submit" name="submit" id="cash" value="CASH"></td>
<td class="checkout"><input type="button" name="checkout" id="checkout" value="CHECK OUT"></td>
<td></td>
</tr>
</tfoot>
</table>
This should do it, getting relevant :input value and setting it to the new ones:
$('#left_col #cart_form2').html($('#cart_form').html()).find(':input').val(function(i){
return $('#cart_form').find(':input').eq(i).val();
}).end().find('[id]').attr('id', function(_, id){ return id + "_2"});
But it looks terribely expensive...
To keep bound event/data on children elements, you should use:
$('#cart_form').clone(true).replaceAll('#left_col #cart_form2').attr('id', 'cart_form2').find(':input').val(function(i) {
return $('#cart_form').find(':input').eq(i).val();
}).end().find('[id]').attr('id', function(_, id) {
return id + "_2"
});
Another possible solution can use the clone plus appendTo and each function to replace the ids and values.
$(function () {
$('#btn').click(function(e) {
$('#cart_form').clone(true).appendTo('#left_col #cart_form2').find('[id]:not(:input), :input:not([value=""])').each(function(index, element) {
if (element.id != "")
this.id = element.id + '_2';
if (element.value !== undefined)
this.value = element.value;
});
});
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<form action="#" method="POST" id="cart_form">
<table class='header_tbl' style="background:none !important;">
<thead>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Amount(RM)</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>Total</td><td></td><td><span class='qty_1'></span><input type='hidden' name='total_qty' value=''></td><td><span class='total'></span><input type='hidden' name='total' value=''></td><td></td>
</tr>
<!--membership-->
<tr id="membership" class="no_show">
<td><span class="mem_1"></span></td><td></td><td><span class="mem_2"></span></td><td><span class="mem_3"></span><input type='hidden' name='mem' value='10'><br/><input type='hidden' name='email_2' value=''><input type='hidden' name='ic_add' value=''></td><td></td>
</tr>
<tr id="comm" class="no_show">
<td>Commision (x%)</td><td></td><td></td><td><span class='comm'><?php echo $discount;?></span>%<input type='hidden' name='comm' value='<?php echo $discount;?>'></td><td></td>
</tr>
<tr class="no_show">
<td>Total Payment</td><td></td><td></td><td><span class='grand'></span><input type='hidden' name='grand' value=''></td><td></td>
</tr>
<tr id='add_here'>
</tr>
<!--cust info starts-->
<tr class="no_show">
<td colspan="3"><input type='hidden' name='cust_id' id='cust_id' value=''><br/><input type='hidden' name='cust_email' id='cust_email' value=''></td><td></td>
</tr>
<tr class="no_show">
<td colspan="3"><input type='hidden' name='cust_name' id='cust_name' value=''></td><td></td>
</tr>
<!--membership-->
<tr>
<td colspan="4"><input type='hidden' name='mem_id' value='<?php echo $membership;?>'></td><td></td>
</tr>
<tr>
<td colspan="4"><input type='hidden' name='mem_name' value='<?php echo $username;?>'></td><td></td>
</tr>
<!--membership ends-->
<!--cust info ends-->
<!--membership ends-->
<tr id="replace_this">
<td></td>
<td class="cancel"><input type="button" name='cancel' id="cancel" value="CANCEL"/></td>
<td class="cash"><input type="submit" name='submit' id="cash" value="CASH"/></td>
<td class="checkout"><input type="button" name='checkout' id="checkout" value="CHECK OUT"/></td>
<td></td>
</tr>
</tfoot>
</table>
</form>
<div class='small-12 medium-6 large-6 columns' id='left_col'>
<div class="container">
-----------NEW FORM-----------------
<form action="#" method="POST" id="cart_form2"> </form>
-----------END NEW FORM-----------------
</div>
</div>
<button id="btn">Click Me</button>
As I say, I am using a table to create a form. input-small and its label fits great in various places. I have opened up three rows in one column to place a 3 row textarea. Simple I thought, but I get a messed up table that appears OK in the live view but has half the input-small placeholders are missing, in the design view (Dreamweaver)it is full of broken tags.
Here is the code without the textarea and with.
Without
<table width="581" border="0" summary="Contact">
<caption>
Personal Details
</caption>
<tr>
<td width="120">Full Name</td>
<td width="226"><input class="input-small" type="text" placeholder=".input-small"></td>
<td width="71">Phone</td>
<td width="146"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td>Postal Address</td>
<td rowspan="4"> </td>
<td>Email</td>
<td><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
<td rowspan="2">Emergency Contact</td>
<td rowspan="2"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Postcode</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
With
<table width="581" border="0" summary="Contact">
<caption>
Personal Details
</caption>
<tr>
<td width="120">Full Name</td>
<td width="226"><input class="input-small" type="text" placeholder=".input-small"></td>
<td width="71">Phone</td>
<td width="146"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td>Postal Address</td>
<td rowspan="4"><textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></td>
<td>Email</td>
<td><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
<td rowspan="2">Emergency Contact</td>
<td rowspan="2"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Postcode</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Cheers
Your problem is that the textarea is not closed:
<td rowspan="4"><textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></textarea></td>
See </textarea>. It is needed.
Close off the field with </textarea>:
<textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></textarea>
I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.
Here's a simplified JSFiddle of the problem I'm having:
http://jsfiddle.net/96AEE/3/
It's a very simple table with javascript as follows:
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<td>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</td>
<td>Gift Cert</td>
<td>Note</td>
<td>Order #</td>
<td>Order Date</td>
<td>Amount</td>
<td>Redeemed</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
</td>
<td>443ss</td>
<td>(1d10t) Arizona Tea</td>
<td>-</td>
<td>-</td>
<td>$50.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
</td>
<td>199e</td>
<td>(#9000) Over</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
Is there something obvious I'm missing?
This is due to your markup on the HTML table.
Within the thead element, you need to use th tags instead of td.
<thead>
<tr>
<th></th>
...
</tr>
</thead>
Working JSfiddle:
http://jsfiddle.net/bybFK/
Try changing your header row to use <th> tags instead of <td> tags.
You are definitely neglecting something, when creating the header of your table; your are using <td> instead of using <th>
you also do not need to assign the class tablesorter to your table
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<th>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</th>
<th>Gift Cert</th>
<th>Note</th>
<th>Order #</th>
<th>Order Date</th>
<th>Amount</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$("#gift_certificates").tablesorter();
});
http://tablesorter.com/docs/
Error use use Jquery serialize form with word-press plugin ?
Jquery coding:
jQuery("#btnsave").click(function($){
jQuery("#dv").load("http://localhost:880/wordpress/?page_id=12?myval=myval&"+ $("#frm").serialize());
});
PHP coding
<form id="frmtest1" name="frmtest1">
<table style="width:100%;border:1px;">
<tr>
<td colspan="2" align="center">Register</td>
</tr>
<tr>
<td align="right">UserName</td><td align="left"><input type="text" id="txtusername"/></td>
</tr>
<tr>
<td align="right">Password</td><td align="left"><input type="text" id="txtpassword"/></td>
</tr>
<tr>
<td></td><td align="left"><input type="button" id="btnsave" name="btnsave" value="Save" />
<input type="submit" value="Submit" />
</td>
</tr>
<tr>
<td colspan="2">
<?php
if(isset($_GET['myval']))
{
echo $_GET['txtusername'];
return;
}
?>
</td>
</tr>
<tr><td colspan="2" align="center" id="dv"></td></tr>
</table>
<div id="divmsg"></div>
</form>
Check out what I changed
http://jsfiddle.net/WjRV5/