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>
Related
Below is the HTML and the JavaScript being used to display the dropdown only if one of the options from the preceding dropdown is selected. When I select the one that is linked the following dropdown it works while when I select the second option not linked to the following dropdown and click submit, it throws the error "An invalid form control with name='AdjustmentBuyerPrice' is not focusable". Please point out the mistake that I did in my code.
`{include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'}
{literal}
<style type="text/css">
#loading-icon {
position: absolute;
top: 75px;
right: 250px; width:
32px; height: 32px;
display: none;
background: url('/images/lightbox/loading.gif');
}
</style>
{/literal}
{if isset($tpl_error_msg) }
<div id="message">{$tpl_error_msg}</div>
{/if}
{include file='view_order_snippet.tpl'}
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
{if !($update_shipping_info_flag)}
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
{else}
{section name=lineitems loop=$tpl_order_list}
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="{$tpl_order_list[lineitems].id}">
<input type="hidden" name="vendor_id_array[]" value="{$tpl_order_list[lineitems].vendor_fk}">
</td>
<td>{$tpl_order_list[lineitems].sku}
<td>{$tpl_order_list[lineitems].item_description}</td>
<td>{$tpl_order_list[lineitems].quantity}</td>
<td>{$tpl_order_list[lineitems].item_status}</td>
<td>{$tpl_order_list[lineitems].shipping_mode}</td>
{if $tpl_order_list[lineitems].shipping_tracking_no == ""}
<td>N/A</td>
{else}
<td>{$tpl_order_list[lineitems].shipping_tracking_no}</td>
{/if}
</tr>
{/section}
{/if}
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
{html_options options=$tpl_action_type}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
{html_options options=$tpl_adjustment_reason}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
{html_options options=$tpl_adjustment_type}
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice" required>
<option value="">Select Adjustment Buyer Price Type</option>
{html_options options=$tpl_adjustment_buyer_price}
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="submit" id="cancel_button" name="cancel_action" value="Cancel" class="button">
</div>
</div>
</form>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function () {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
}
});
});
</script>
{/literal}
{include file="footer.tpl"}
This is happening because you have AdjustmentBuyerPrice as required so when you have not selected value ItemPriceAdjustments its hidden and when you click on submit button that error shows .Instead you can remove required attribute when that select box is hidden else add required attribute .
Demo Code :
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function() {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="1">
<input type="hidden" name="vendor_id_array[]" value="2">
</td>
<td>A
<td>B</td>
<td>5</td>
<td>ok</td>
<td>htm</td>
<td>N/A</td>
</tr>
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
<option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
<option value="ItemPriceAdjustments1">5</option>
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<!--remove required from here-->
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
<option value="">A</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
</form>
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>`
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.
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.
I want to cancel the second line item instead of the first.
Below is some sample code for the 2 line items:
<div class="screenlet-body">
<form name="updateItemInfo" method="post" action="/ordermgr/control/updateOrderItems">
<input type="hidden" name="orderId" value="140070"/>
<input type="hidden" name="orderItemSeqId" value=""/>
<input type="hidden" name="shipGroupSeqId" value=""/>
<input type="hidden" name="supplierPartyId" value="10964"/>
<input type="hidden" name="orderTypeId" value="PURCHASE_ORDER"/>
<table class="basic-table order-items" cellspacing="0">
<tr class="header-row">
<td width="25%">Product</td>
<td width="10">Part Condition</td>
<td width="25%">Status</td>
<td width="5%" class="align-text">Quantity</td>
<td width="10%" class="align-text">Unit Price</td>
<td width="10%"> </td>
<td width="10%" class="align-text">Sub Total</td>
<td width="2%"> </td>
<td width="3%"> </td>
</tr>
<tr><td colspan="8"><hr/></td></tr>
<tr>
<td valign="top">
<div>
10588 -
NAS516-1A
- ZERk FITTING
</td>
<td>
<select name="icon_00001">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW">New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
2011-03-11 09:16:57.0 Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 5 <br/>
Cancelled: 0 <br/>
Remaining: 5 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00001" value="10"/>
<input type="checkbox" name="opm_00001" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$50.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00001:00001" size="6" value="5"/>
<input type="checkbox" name="selectedItem" value="00001">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00001" name="cancel_00001 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00001';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00001" value="" size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00001" value="2011-03-31 12:49:16.000" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<div>
10602 -
MS21075L3N
- NUTPLATE
</td>
<td>
<select name="icon_00002">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW" selected>New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 1 <br/>
Cancelled: 0 <br/>
Remaining: 1 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00002" value="100"/>
<input type="checkbox" name="opm_00002" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$100.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00002:00001" size="6" value="1"/>
<input type="checkbox" name="selectedItem" value="00002">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00002" name="cancel_00002 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00002" value="This is a comment." size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00002" value="" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<td colspan="7"> </td>
<td><input type="submit" value="Update Items" class="buttontext"/> </td>
What I need to do is cancel the second line item on the order.
There is 4 large windows showing code.
The second large one is the first line item and the fourth large one is the second line item.
I need to cancel the second.
Thanks in advance.
I actually figured out a way to do it using this line of code:
browser.link(:url, "javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()").click
The way it works is I specify the first value to reflect the line item number which will cancel out the specified line item.
Thanks for your help guys.