We Keep Coding

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();
}

javascript regular expression replace html attribute except some tag

I want use regular expression to replace html attribute ng-model='model.xxx' to ng-model='model.newname.xxx', but I don't need replace attribute between <tbody>
<tr class='template' ng-repeat='model in model.child'></tr></tbody>;
<table width="592" height="842" border="1" align="center">
<tr>
<td align="center" colspan="2" width="16%">serve_resource_name</td>
<td colspan="8"><input class="text" name="serve_resource_name" type="text" ng-model="model.serve_resource_name" id="serve_resource_name" title="serve_resource_name" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center" rowspan="4" width="8%">clinet</td>
<td align="center" style="width:8%">system</td>
<td colspan="3"><input class="text" name="system" type="text" ng-model="model.system" id="system" title="系统" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
<td align="center" colspan="2" width="16%">IP</td>
<td colspan="3"><input class="text" name="ip" type="text" ng-model="model.ip" id="ip" title="IP" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center">username</td>
<td colspan="3"><input class="text" name="username" type="text" ng-model="model.username" id="username" title="用户名" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
<td align="center" colspan="2" width="16%">password</td>
<td colspan="3"><input class="text" name="password" type="text" ng-model="model.password" id="password" title="密码" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center" width="16%">time_limit</td>
<td colspan="8"><input class="text" name="time_limit" type="text" ng-model="model.time_limit" id="time_limit" title="期限" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>``
<tr>
<td align="center" width="8%" height="150px">flow control</td>
<td colspan="9" style="padding:0; vertical-align:top;">
<div style="overflow:auto; height:150px;">
<table id="697e5afad8e540659efb412ea0347b5d" name="flowControl" fnote="flow control" fdatatype="1" plugins="childtable" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr class="firstRow">
<td align="center" width="24%">time_quantum</td>
<td align="center" width="24%">interval</td>
<td align="center" width="24%">time_interval_min</td>
<td align="center" width="24%">visit_count_limit</td>
<td align="center" ><div class="img-add" ng-click="imgAdd('model.table')"></div></td>
</tr>
</thead>
<tbody>
<tr class="template" ng-repeat="model in model.child">
<td ><input name="time_start" type="text" ng-model="model.time_start" id="time_start" title="time_start" value="" maxlength="" placeholder="8:00"/>-<input name="time_end" type="text" ng-model="model.time_end" id="time_end" title="time_end" value=""placeholder="22:00"/></td>
<td ><input name="time_interval_count" type="text" ng-model="model.time_interval_count" id="time_interval_count" title="time_interval_count" value="" /></td>
<td ><input class="text" name="visit_count_limit" type="text" ng-model="model.visit_count_limit" id="visit_count_limit" title="visit_count_limit" value="" "/></td>
<td ><input class="text" name="visit_flux_limit" type="text" ng-model="model.visit_flux_limit" id="visit_flux_limit" title="visit_flux_limit" value="" /></td>
</tr>
</tbody>
</table></div>
</td>
</tr>
<tr>
<td align="center" width="8%">remark</td>
<td colspan="9">
<div class="word-text"><textarea class="bor" id="remark" name="remark" ng-model="model.remark" title="remark" maxlength="" plugins="textarea" fallowblank="false"></textarea></div>
</td>
</tr>
</table>`

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.

jQuery Select form field with images

I am trying to create the jquery select field which includes images. (http://designwithpc.com/Plugins/ddSlick)
It seems that there is something wrong with my code, as the console is showing an error:
Uncaught TypeError: Object [object Object] has no method 'ddslick'
HTML
<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){ doTotal(this); calcMenu(this); ddslick(this); });
// ]]></script>
<table id="table1" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Enquiry Date</td>
<td>
<div align="center"><input type="text" name="dateToday" size="25" /></div></td>
</tr>
<tr>
<td>Conference Name</td>
<td>
<div align="center"><input type="text" name="conferenceName" size="25" /></div></td>
</tr>
<tr>
<td>Company Name</td>
<td>
<div align="center"><input type="text" name="companyName" size="25" /></div></td>
</tr>
<tr>
<td>Special Requests</td>
<td><textarea name="comment" rows="5" cols="26"></textarea></td>
</tr>
</tbody>
</table>
<table id="table2" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>First Name</td>
<td>
<div align="center"><input type="text" name="firstName" size="25" /></div></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<div align="center"><input type="text" name="lastName" size="25" /></div></td>
</tr>
<tr>
<td>Tel No</td>
<td>
<div align="center"><input type="text" name="telNo" size="25" /></div></td>
</tr>
<tr>
<td>Cell</td>
<td>
<div align="center"><input type="text" name="cellNo" size="25" /></div></td>
</tr>
<tr>
<td>Email</td>
<td>
<div align="center"><input type="text" name="email" size="25" /></div></td>
</tr>
<tr>
<td><input onclick="formReset()" type="button" value="Reset form" /></td>
</tr>
</tbody>
</table>
<table id="tablex" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<th scope="col" width="30">
<div align="center">Date</div></th>
<th scope="col" width="128">
<div align="center">Amount of Delegates ½ Day Conference # R 240 pp</div></th>
<th width="112">
<div align="center">Amount of Delegates Full Day Conference # R 260 pp</div></th>
<th width="112">
<div align="center">Menu No</div></th>
<th width="112">
<div align="center">Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)</div></th>
<th width="112">
<div align="center">Total Persons for meals</div></th>
<th width="112">
<div align="center">Amount of Single Rooms # R 480 pp</div></th>
<th width="112">
<div align="center">Amount of Double Rooms # R 720 pp</div></th>
<th width="134">
<div align="center">Total for the day</div></th>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date1" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday1" size="5" maxlength="10" /></div></td>
<td>
<div align="center"><input type="text" name="fullday1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total1" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date2" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total2" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date3" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total3" size="5" /></div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="myDropdown">
<select id="myDropdown">
<option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
data-description="Description with Facebook">Facebook</option>
<option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
data-description="Description with Twitter">Twitter</option>
<option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
data-description="Description with LinkedIn">LinkedIn</option>
<option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
data-description="Description with Foursquare">Foursquare</option>
</select>
</div>
</form>
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});

If you are using wordpress, try following this steps:
1 - Copy the jquery.ddslick.js file in the /js folder of your theme.
2 - Be sure you have write the correct path to the file in your header.php. Inside the <head> tag you should have something like this:
<script src='<?php echo get_template_directory_uri(); ?>/js/jquery.ddslick.js'></script>
3 - As #Arnelle Balane has point out, you probably should write this piece of code:
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
Inside some script tags:
<script type="text/javascript">
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
</script>
Or, you can put that code inside your custom .js file. That way you don't have to put all the code in the html:
a - Inside your /js folder, make another .js file, something like this: script.js
b - Inside the script.js file, copy the above code without script tags inside a jQuery on ready function, like this:
jQuery(document).ready(function($) {
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
});
4 - Check you have jquery activate on your theme, if not, you can download jquery from here and repeat step 2 for the jQuery file or you can use jQuery from wordpress.
5 - Double check for typos and test if works; if not, is probably something else; keep us informed.
Update: I add more info in the step three, in case of using a external .js file.