Add textbox value to listbox on tab - javascript

II am working website which is going to be accessed by a motorola device(scanner) but the functionality needs to be same a normal/usual website. On one of the page I have a textbox -> productID and listbox which can have multiple productID. Now when the focus is on textbox and it scans the productID ,the scanner returns a tab,now after this happens I need to add the textbox value to the listbox and empty the textbox and set focus on the textbox. I also should be able to delete a productId from the list.How can I achieve this using Jquery?
<table style=" width:220px;">
<tr>
<td style=" width:120px;">cost</td>
<td style=" width:100px;"><asp:TextBox ID="txt_cost" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style=" width:120px;">Product ID</td>
<td style=" width:100px;"><asp:TextBox ID="txt_ProdID" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style=" width:120px;">List of ProductID</td>
<td style=" width:100px;"><asp:ListBox ID="lst_ProductId" runat="server"></asp:ListBox> </td>
</tr>
<tr>
<td style=" width:120px;"><asp:Button ID="btn_Update" runat="server" Text="Update" /></td>
<td style=" width:100px;"><asp:Button ID="btn_Remove" runat="server" Text="Remove" /></td>
</tr>
</table>

$('#lst_ProductId').append($('#txt_ProdID').val());
$('#txt_ProdID').val('');
$('#txt_ProdID').focus();
Something like that should work.

$('#lst_ProductId').append($('#txt_ProdID').val()); <- set value
$('#txt_ProdID').val('');-> clrs textbox
$('#txt_ProdID').focus();->focus
$('#lst_ProductId').remove($this); ->removes
pls use blur() when pressing tabs

$(function() {
$('[id$=txt_ProdID]').keydown(function(event) {
{
if(event.keyCode == 9)
{
var textboxval = $('#txt_ProdID').val();
var lsOptNew = document.createElement('option');
lsOptNew.text = textboxval;
lsOptNew.value = textboxval;
var lsProdID = document.getElementById('lst_ProdId');
try
{
lsProdID.add(lsOptNew,null);
}
catch(ex)
{
lsProdID.add(lsOptNew);
}
$('[id$=txt_ProdID]').val('');
$('[id$=txt_ProdID]').focus();
}
}
});
});

Related

Radio Button in Asp.net Webform for multiple choice question

I am creating multiple-choice questions in ASP.NET Web Forms. I am getting the question and multiple choice options from the database. Is there a simple way to hide the 3rd option (C) when there are only two inputs (True or False)? Thank you in advance!
Here is aspx code:
<tr>
<td class="style7">A.</td>
<td style="text-align: left">
<asp:RadioButton ID="RbA" runat="server" GroupName="gtog"/>
</td>
</tr>
<tr>
<td class="style7">B.</td>
<td style="text-align: left">
<asp:RadioButton ID="RbB" runat="server" GroupName="gtog" />
</td>
</tr>
<tr>
<td class="style7">C.</td>
<td style="text-align: left" >
<asp:RadioButton ID="RbC" runat="server" GroupName="gtog" />
</td>
</tr>
As we have no info as to what is happening on your backend I'll keep this generic.
Add an id and runat="server to the final table row. You can then access that serverside to hide an show the row.
ASPX
<tr id="rowC" runat="server">
<td class="style7">C.</td>
<td style="text-align: left" >
<asp:RadioButton ID="RbC" runat="server" GroupName="gtog" />
</td>
</tr>
C#
if(answerCount == 2)
{
rowC.visible = false;
}
On a side note, you really should avoid using tables for layout. It is now 2020 there are many better ways to layout a form (or anything).
Yes, you can check if the item from the database is of Type bool - if this is true make 3rd Options(C) hidden.
So create a variable that checks the item from the database, if its a Boolean then add hide RbC.
Type b = itemFromDB.GetType();
if(b is bool)
RbC.hidden = true;

Multiply value of text fields with the same class dynamically using another input box

I have the following form that is created on the fly using Coldfusion. The different inputs all have different values when loaded, but share the same class.
I will have another input field with a unique identifier - #permup
The form is as follows (form tag stripped):
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="county-table" style="margin-top: 15px;">
<tr>
<TD>Length</TD>
<TD align="center">PerM</TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 1-10m</TD>
<TD align="center"><input class="perm" type="text" name="PerM1" value="1.60" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 11-20m</TD>
<TD align="center"><input class="perm" type="text" name="PerM2" value="1.10" size="6" /></TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 21-50m</TD>
<TD align="center"><input class="perm" type="text" name="PerM3" value="1.50" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 51-80m</TD>
<TD align="center"><input class="perm" type="text" name="PerM4" value="1.55" size="6" /></TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 81-150m</TD>
<TD align="center"><input class="perm" type="text" name="PerM5" value="1.10" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 151-200m</TD>
<TD align="center"><input class="perm" type="text" name="PerM6" value="1.10" size="6" /></TD>
</tr>
<tr>
<td> </td>
<td><input id="permup" type="text" name="permup" value="0" size="6" /></td>
</tr>
</table>
What I need is that when someone types the base rate increase in the #permup field, the fields with the class .perm have all their values increased by that amount, and if someone then sets the #permup field to 0 (zero) the fields with .perm are set back to their original value.
This has to work with JQuery on the class name as the table rows could be any number. I have the following script:
<script language="JavaScript" type="text/javascript">
$('#permup').keyup( function() {
$('.perm').each(function(){
var defaultValue = $(this).val();
$(this).val( $('#permup').val() * defaultValue );
});
});
</script>
It kind of works, but sets every value the same in the .perm fields and also does weird stuff when the field #perm is clicked out of or set to zero.
I hope someone can help!!
Many thanks
JS
As others have said you need to make sure you are doing math with numbers and not the default "value" given by the .value property. Also it is not advisable to store values in your display as you run into issues on how to retrieve an old value once you modify it. Below is code that does what you want and keeps track of the original values.
<script language="JavaScript" type="text/javascript">
// Store default values
var perm_items = document.getElementsByClassName("perm");
var orig_perm_values = new Array(perm_items.length);
for (var i = perm_items.length - 1; i >= 0; i--)
{
orig_perm_values[i] = perm_items[i].value;
document.getElementById('out').innerHTML = orig_perm_values[i];
}
function updateValues(event)
{
for (var i = perm_items.length - 1; i >= 0; i--)
{
perm_items[i].value = (parseFloat(orig_perm_values[i]) + parseFloat(event.target.value)).toFixed(2);
}
}
</script>
Try using parseFloat() and use keyup and focus event as shown :-
$('#permup').on('keyup focus', function() {
$('.perm').each(function(){
var defaultval = $('#permup').val();
var myValue;
if(defaultval == "0"){
myValue = $(this).attr('value')
}
else{
myValue = parseFloat( parseFloat($(this).attr('value')) * parseFloat(defaultval) ) || $(this).attr('value')
}
$(this).val( myValue );
});
});
DEMO
Side Note :- Always try to use parseInt() or parseFloat() while dealing in numbers in javascript/jquery otherwise numbers are also treated as string.

Disable checkboxes that contain different attribute

I am trying to disable checkboxes that have different warehouse locations once a warehouse is selected. For example, if I check California I want to disable all the checkboxes that are from other states. I am trying to do it based on the attribute whseID but I can't figure out how to have jquery make that distinction between that attribute. Sometimes I will ship multiple items from 1 warehouse. So when I check 1 checkbox in California I need the other one in California to remain enabled but I need Washington and Arizona disabled.
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr class="grdnt">
<th style="color:black;">Checkbox</th>
<th style="color:black;border-left:1px solid;">Warehouse</th>
<th style="color:black;border-left:1px solid;">Item</th>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="CA" />
</td>
<td class="Whse">California</td>
<td class="Item">J29458</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="CA" />
</td>
<td class="Whse">California</td>
<td class="Item">J29478</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="WA" />
</td>
<td class="Whse">Washington</td>
<td class="Item">J29478</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="AZ" />
</td>
<td class="Whse">Arizona</td>
<td class="Item">J29478</td>
</tr>
</table>
$(document).on('click', '.tfrCheck', function () {
var allCheckBox = $(".tfrCheck");
var count_checked = allCheckBox.filter(":checked").length;
var whseID = $(this).attr('whseID');
if (count_checked >= 1) {
$(".tfrCheck:contains(whseID)").attr('disabled', 'disabled');
//$(".tfrCheck:not(:checked)").attr('disabled','disabled');
} else {
$(".tfrCheck").removeAttr('disabled');
}
});
JSFIDDLE
Ragnar's answer is close, but since you want OTHER states to be disabled, use
$('.tfrCheck:not([whseID='+ whseID +'])').attr('disabled', 'disabled');
Try using this line:
$('.tfrCheck:not([whseID='+ whseID +'])').attr('disabled', 'disabled');
The "attribute not equal selector" should help:
allCheckBox.filter('[whseID!="' + whseID + '"]').attr('disabled', true);
http://jsfiddle.net/oxkeL7jm/4/

form behaving differently when pressing enter instead of button

I have a form that I have made that uses jquery to detect when the button is pressed, as well as used to show the data without a page reload.
It is working perfect when the button is pressed, however when pressing enter the page refreshes and nothing happens. I have the button bound to the jquery, but I am not sure what to do to handle pressing enter.
Html:
<table border="0" width="100%" cellspacing="1" cellpadding="2" style="margin-bottom:20px;">
<tbody>
<tr class="infoBoxContents">
<td style="padding:20px;">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td width="50%">
<table width="100%">
<tbody>
<tr>
<td class="main">
<b>Calculate shipping</b>
<div class="smallText">Shipping Weight: 6lbs</div>
</td>
</tr>
<tr>
<td class="main" style="padding:10px;">Country:
<select name="ship_country_id" id="ship_country_id">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<br>Post code/ Zip code:
<input type="text" name="postcode" id="postcode_entry">
</td>
</tr>
</tbody>
</table>
</td>
<td class="main" width="50%" align="right">
<div class="contentText" id="shipping_method"></div>
</td>
</tr>
<tr>
<td>
<button type="button" id="estimate" style="cursor:pointer; width:110px; margin-left:10px; padding:5px;">
<span class="ui-button-text" style="float:left;">Calculate</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e" style="float:right;"></span>
</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
javascript:
$(function () {
$('#estimate').click(function () {
var postcode_entry = $('#postcode_entry').val();
var country_entry = $('#ship_country_id').val();
$("#shipping_method").html("<div style=\'margin:20px auto;width:100px;text-align:center;\'><img src=\'ext/jquery/bxGallery/spinner.gif\' /></div>").show();
$.get("checkout_shipping.php", {
country: country_entry,
refresh_quotes: "1",
postcode: postcode_entry,
zone_name: "canada"
},
function (data) {
$("#shipping_method").html(data);
}
);
});
});
That's because you need to find what happens on submit – this is the event that is called when you press enter, it doesn't trigger the click of the button.
I don't know what the ID of your form is, but you can do something like the following:
$("#myform").submit(function(e) {
e.preventDefault();
//do something
...
Use this instead of the button click event.
Instead of running your code when the button is clicked, run it when the form is submitted.
$('YOUR_FORM_HERE').submit(function() {
This will catch any means of submitting the form.
You can add this jQuery to bind to the same event:
$(document).on('keypress', function(e){
if(e.which === 13){
$('#estimate').click();
}
});
Though it would be better to separate the function that gets executed into a separate function, and call that, this will still work just fine.

Getting value of next node using jQuery

What is the quickest way to obtain the next node of a line using jQuery? Here is the generated markup of a TreeList which is a type of GridView asp.net. I have to have to obtain the lblWorkItemId which is 199. Please consider that this is from a bound control.
<tr id="ctl00_PageContent_rtlRshItems_ctl04__2" class="rtlR rtlRL" style="background-color:Lavender;">
<td align="left" valign="middle" style="width:90px;">
<div id="ctl00_PageContent_rtlRshItems_ctl04_rcbStatut" class="RadComboBox RadComboBox_Windows7">
<table class="rcbFocused" style="border-width: 0pt; border-collapse: collapse;" summary="combobox">
<tbody>
<tr class="rcbReadOnly">
<td class="rcbInputCell rcbInputCellLeft" style="width:100%;">
<input id="ctl00_PageContent_rtlRshItems_ctl04_rcbStatut_Input" class="rcbInput" type="text" readonly="readonly" value="Submitted" name="ctl00$PageContent$rtlRshItems$ctl04$rcbStatut" autocomplete="off">
</td>
<td class="rcbArrowCell rcbArrowCellRight">
<a id="ctl00_PageContent_rtlRshItems_ctl04_rcbStatut_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
</td>
</tr>
</tbody>
</table>
<input id="ctl00_PageContent_rtlRshItems_ctl04_rcbStatut_ClientState" type="hidden" name="ctl00_PageContent_rtlRshItems_ctl04_rcbStatut_ClientState" autocomplete="off">
</div>
</td>
<td class=" rtlCL" style="width:0px;">
<asp:label id="lblWorkItemId" text="199" visible="false"> </asp:label>
</td>
The following javascript method will be called when the selected value of the combobox will be changed to a certain value:
function OnClientSelectedIndexChanged(sender, eventArgs) {
var item = eventArgs.get_item();
if (item.get_text() == "Refused") {
var treeList = $find("<%= rtlRshItems.ClientID %>");
// var workItemId = [...]
OpenReasonWindow(workItemId);
}
}
Using your code template:
function OnClientSelectedIndexChanged(sender, eventArgs) {
var item = eventArgs.get_item();
if (item.get_text() == "Rejetée") {
var combo = $('input[id*="rcbStatut_Input"]')
var workItemId = combo.closest('tr.rtlRL').find('[id$="lblWorkItemId"]').attr('text');
OpenReasonWindow(workItemId);
}
}
Note: I would typically apply this sort of handler unobtrusively, not in mark up.

Categories