unable to call onChange event on select box - javascript

I have table structure like this below html code. Here i have a selectbox which is populated on page load from my database, i have given a inline function on the selectbox in order to call if user changes the selectbox value.. but its not calling the jquery function onChange of selectbox .. Please can you see why?
FIDDLE
My jquery:
$(document).ready(function() {
$.fn.ActivityOptionChange = function(id) {
alert("test");
};
....
....
Html
<table cellspacing="0" class="table table-condensed TF" style="width: 100%;" id="table6">
<tbody>
<tr class="fltrow">
<td><input id="flt0_table6" type="hidden" ct="0" class="flt"></td>
<td><input id="flt1_table6" type="hidden" ct="1" class="flt"></td>
<td><input id="flt2_table6" type="hidden" ct="2" class="flt"></td>
<td><input id="flt3_table6" type="hidden" ct="3" class="flt"></td>
<td><input id="flt4_table6" type="hidden" ct="4" class="flt"></td>
<td><input id="flt5_table6" type="hidden" ct="5" class="flt"></td>
<td><input id="flt6_table6" type="hidden" ct="6" class="flt"></td>
<td><input id="flt7_table6" type="hidden" ct="7" class="flt"></td>
</tr>
<tr class="success">
<td style="width: 15%;">S.no</td>
<td style="width: 15%;">Activity Name</td>
<td style="width: 5%;">Activity Option</td>
<td style="width: 5%;">Time(HR:MIN)</td>
<td style="width:10%;">cals</td>
<td style="width: 5%;">distance</td>
<td style="width: 5%;">Unit</td>
<td style="width: 15%;">Submit</td>
</tr>
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid44"></form>
<tr id="formrowid44" class=" odd">
<td style="width:5%;">1</td>
<td style="width:25%;" class="text-capitalize">bicycling, BMX or mountain</td>
<td style="width:25%;" class="text-capitalize">-</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;"><input maxlength="2" id="time-hr-id44" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(44);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(44);" id="time-min-id44" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
</td>
<td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id44" value="8.5"><span id="cals-id44" class="cals">0.00</span></td>
<td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id44" type="text" style="width:50px;text-align:center;"> </td>
<td style="width:5%;" class="text-capitalize">
</td>
<td style="width:5%;" class="text-capitalize"> <button onclick="$(this).SubmitForm(44);" class="btn btn-success" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid45"></form>
<tr id="formrowid45" class=" even">
<td style="width:5%;">2</td>
<td style="width:25%;" class="text-capitalize">bicycling/biking</td>
<td style="width:25%;" class="text-capitalize">
<select name="activity_option_id" class="selectbox" onchange="$(this).ActivityOptionChange(45)" id="activity-opn-Id45">
<option value="45_4.0">10 mph or less</option>
<option value="47_6.0">10-11.9 mph, leisure, slow, light effort</option>
<option value="46_8.0">general</option>
<option value="48_16">greater then 20 mph, racing, not drafting</option>
</select>
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;"><input maxlength="2" id="time-hr-id45" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(45);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(45);" id="time-min-id45" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
</td>
<td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id45" value="4.0"><span id="cals-id45" class="cals">0.00</span></td>
<td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id45" type="text" style="width:50px;text-align:center;"> </td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize"> <button onclick="$(this).SubmitForm(45);" class="btn btn-success" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid49"></form>
<tr id="formrowid49" class=" odd">
<td style="width:5%;">3</td>
<td style="width:25%;" class="text-capitalize">unicycling</td>
<td style="width:25%;" class="text-capitalize">-</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;"><input maxlength="2" id="time-hr-id49" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(49);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(49);" id="time-min-id49" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
</td>
<td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id49" value="5.0"><span id="cals-id49" class="cals">0.00</span></td>
<td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id49" type="text" style="width:50px;text-align:center;"> </td>
<td style="width:5%;" class="text-capitalize">
</td>
<td style="width:5%;" class="text-capitalize"> <button onclick="$(this).SubmitForm(49);" class="btn btn-success" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
</tbody>
</table>

Try using the jQuery .on('change') function:
$(document)ready(function() {
$('body').on('change', '#activity_option_id', function() {
alert('test');
});
});
Also see .on() jQuery Documentation
EDIT: In response to your comment: If you have multiple select boxes that you need ID's for, you can implement a class based solution:
<select id="your_id_here1" class="formSelect" />
<select id="your_id_here2" class="formSelect" />
$(document)ready(function() {
$('body').on('change', '.formSelect', function() {
var elementID = this.id;
alert(elementID);
});
});
With this solution, any select box with a .formSelect class will have the change event bound to it and the ID of the particular input element changed will be displayed in the alert box.

Related

Why is Javascript not working in webview in my UWP application?

So I've created a UWP application in Visual Studio that uses a webview to load a local html file. The html file uses Javascript to validate the user's input and will display a message box if the user enters incorrect data into any of the fields after clicking a button. The file works just fine when I run it in a web browser, but when it's run through the webview, the Javascript ceases to function (Where no message box is displayed for any incorrect data entered).
This is the code that creates the URI and navigates to the HTML content:
Uri myUri = new Uri("ms-appx-web:///Register_js.html");
webView1.Navigate(myUri);
I'm not sure why Javascript doesn't work when I load a local file but works perfectly fine when I load google.com (which would obviously use Javascript).
Does anyone know how I can get Javascript to work for a local file?
Edit: here is the code of the HTML file I'm trying to load:
<!DOCTYPE html>
<html>
<head>
<title>User Registration Form</title>
<script language="JavaScript" type="text/javascript">
function ValidateForm()
{
var regExp=/\d{4}-\d{2}-\d{2}/;
if (document.newUserForm.firstname.value=="")
{ alert("Firstname field cannot be blank.");
document.newUserForm.firstname.focus();
return false;}
if (document.newUserForm.surname.value=='')
{
alert('Surname field cannot be blank.');
document.newUserForm.surname.focus();
return false;
}
if (!regExp.test(document.newUserForm.DOB.value) )
{
alert('The Field is not correctly formatted!');
document.newUserForm.DOB.focus();
return false;
};
if (document.newUserForm.homePhone.value=='')
{
alert('Home Phone field cannot be blank.');
document.newUserForm.homePhone.focus();
return false;
}
if (isNaN(document.newUserForm.homePhone.value))
{
alert('Home Phone field must be a number.');
document.newUserForm.homePhone.focus();
return false;
}
if (document.newUserForm.roomNo.value=='')
{
alert('Room No. field cannot be blank.');
document.newUserForm.roomNo.focus();
return false;
}
if (document.newUserForm.workPhone.value=='')
{
alert('Work Phone field cannot be blank.');
document.newUserForm.workPhone.focus();
return false;
}
if (document.newUserForm.fax.value=='')
{
alert('Fax field cannot be blank.');
document.newUserForm.fax.focus();
return false;
}
if (document.newUserForm.emailAddress.value=='')
{
alert('Email Address field cannot be blank.');
document.newUserForm.emailAddress.focus();
return false;
}
if (document.newUserForm.password.value=='')
{
alert('Password field cannot be blank.');
document.newUserForm.password.focus();
return false;
}
if (document.newUserForm.password.value.length<5)
{
alert('Password field must be at least five characters.');
document.newUserForm.password.focus();
return false;
}
if (document.newUserForm.confirmPassword.value=='')
{
alert('Confirm Password field cannot be blank.');
document.newUserForm.confirmPassword.focus();
return false;
}
if (document.newUserForm.password.value!=document.newUserForm.confirmPassword.value)
{
alert('Password fields do not match.');
document.newUserForm.confirmPassword.focus();
return false;
}
if (document.newUserForm.gender.value=="male")
{
alert('Gender is male.');
return false;
}
return true;
}
</script>
</head>
<body>
<h2><strong>New User Details</strong></h2>
<form name="newUserForm" method="post" action="registerUserDisplay.php" onsubmit="return ValidateForm();">
<table style="width: 500px; border: 0px;" cellspacing="1" cellpadding="1">
<tr>
<td colspan="2"><strong>Personal Details</strong></td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>First Name</td>
<td>
<input name="firstname" type="text" style="width: 200px;" maxlength="100" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Surname</td>
<td>
<input name="surname" type="text" style="width: 200px;" maxlength="100" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Gender</td>
<td>
<input name="gender" id="gM" type="radio" value="M" /><label for="gM">Male</label>
<input name="gender" id="gF" type="radio" value="F" checked="checked" /><label for="gF">Female</label>
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td><input name="bender" id="gB" type="radio" value="B" /><label for="gB">Bender</label></td>
<td>D.O.B.<small> (YYYY-MM-DD)</small></td>
<td>
<input name="DOB" type="text" style="width: 100px;" maxlength="10" />
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Home Address</td>
<td>
<textarea name="homeAddress" cols="30" rows="5"></textarea>
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Home Phone</td>
<td>
<input name="homePhone" type="text" style="width: 150px;" maxlength="15" />*
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><strong>Work Details</strong></td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Position</td>
<td>
<select name="positionID">
<option value="1" selected="selected">Permanent</option>
<option value="2">Full-Time</option>
<option value="3">Part-Time</option>
<option value="4">Casual</option>
<option value="5">Volunteer</option>
</select>
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Room No.</td>
<td>
<input name="roomNo" type="text" style="width: 50px;" maxlength="5" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Work Phone</td>
<td>
<input name="workPhone" type="text" style="width: 150px;" maxlength="15" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Fax</td>
<td>
<input name="fax" type="text" style="width: 150px;" maxlength="15" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Mobile</td>
<td>
<input name="mobilePhone" type="text" style="width: 150px;" maxlength="15" />
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Email Address</td>
<td>
<input name="emailAddress" type="text" style="width: 200px;" maxlength="200" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Department</td>
<td>
<select name="deptID">
<option value="1" selected="selected">Accounts</option>
<option value="2">Human Resources</option>
<option value="3">Help Desk</option>
<option value="4">Management Information Systems</option>
<option value="5">Public Relations</option>
<option value="6">Communications</option>
</select>
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Password</td>
<td>
<input name="password" type="password" style="width: 200px;" maxlength="20" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Confirm Password</td>
<td>
<input name="confirmPassword" type="password" style="width: 200px;" maxlength="20" />*
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>
<input type="reset" name="reset" value="Reset" />
<input type="submit" name="submit" value="Submit" />
</td>
<td>
<div align="right">* indicates required field</div>
</td>
</tr>
</table>
</form>
</body>
</html>

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.

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.

Categories