We Keep Coding

How to concatenate the values of two input fields where only second value is editable

Please help me cause i'll like to have the value of the second input field, id='bold' to concatenate with the value of the id='field' on load like this CAN'T TOUCH THIS!gaggle.
CAN'T TOUCH THIS! is currently not editable using selectionStart
but i'll like gaggle to be editable.
HTML
<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50"/>
<input id="bold" type="hidden" value="gaggle" size="50"/>
<div id="output">
</div>
Javascript
$('document').ready(function(){
var readOnlyLength = $('#field').val().length;
$('#output').text(readOnlyLength);
$('#field').on('keypress, keydown', function(event) {
$('#output').text(this.selectionStart);
if ((event.which != 37 && (event.which != 39)) && ((this.selectionStart < readOnlyLength) || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
return false;
}
});
})
See http://jsfiddle.net/Yt72H/999/.
Let me know if clarification is needed. Thanks.

On the load event of your page you can get initial value of 'giggle' input and 'don't touch this' input (those actual strings), concatenate them together into new variable (concat) and overwrite the value in 'don't touch this' with concatenated value that holds joined strings (concat variable). You will see that 'don't touch this' will stay readonly and 'giggle' part you can actually edit.
$('document').ready(function(){
var concat = $('#field').val() + $('#bold').val();
$('#field').val(concat);
// rest of your code
});

How to handle alphanumeric and null in JavaScript?

We are facing an issue on handling null, because if the value is null, it is not reaching the server. Below is the code snippet:
<input ... onchange="return checkEmpty(this);" />
And the JavaScript:
function checkEmpty(value) {
alert("Empty Check() "+value);
if (myTrim(value.length == 0)) {
alert("please Enter Value!"+ value +" value");
return false;
}
return true;
}
We are trying to display one popup for null value and the request should go to the server, but some exception is occurring we are unable to identify it and the request is not coming to server.

You can do this:
if (variable == null) {
// do something
}
--which is 100% equivalent to the more explicit but less concise:
if (variable === undefined || variable === null) {
// do something
}

While there are ways to solve this specific problem (and the other answer(s) manage to answer that), I'll try to address a more general one.
What you essentially want is the form control to not be empty. Well, you don't need JavaScript for that at all
<input ..... required>
That will prevent the form from submitting unless the required field was filled.
<form>
Try to submit me empty! <input required>
<button>I dare you!</button>
</form>

Making the enter key function like tab key

Friends ,I know there are already many solutions to this question and i have used one but for some unknown reason it is not working in my application.So please help me out and let me know where am i going wrong.Please don't mark this question as duplicate.I seriously need your help.
Thanks in advance.
here is what i have tried.
// Catch the keydown for the entire document
$(document).keydown(function(e) {
// Set self as the current item in focus
var self = $(':focus'),
// Set the form by the current item in focus
form = self.parents('form:eq(0)'),
focusable;
// Array of Indexable/Tab-able items
focusable = form.find('input,a,select,button,textarea,div[contenteditable=true]').filter(':visible');
function enterKey(){
if (e.which === 13 && !self.is('textarea,div[contenteditable=true]')) { // [Enter] key
// If not a regular hyperlink/button/textarea
if ($.inArray(self, focusable) && (!self.is('a,button'))){
// Then prevent the default [Enter] key behaviour from submitting the form
e.preventDefault();
} // Otherwise follow the link/button as by design, or put new line in textarea
// Focus on the next item (either previous or next depending on shift)
focusable.eq(focusable.index(self) + (e.shiftKey ? -1 : 1)).focus();
return false;
}
}
// We need to capture the [Shift] key and check the [Enter] key either way.
if (e.shiftKey) { enterKey() } else { enterKey() }
});
html code-
<form id="purchase" action="p_senddata.php" method="POST" >
Bill_no:<input type="text" name="p_billno" id="pbillno" /><br />
Date:<input type="text" name="p_date" id="pdate" /><br />
Name of party:<input type="text" name="p_nameofparty" id="pnameofparty" /><br /><br />
<input type="submit">
</form>

Scan barcode into a specific textbox

I am working on bar-code scanners. The bar-code scanner that I am using is a plug-n-play type and scans the code automatically wherever you place the cursor. But what i want is that whether i can scan it to a specific text-box on a web page everytime my scanner reads a code
For eg, if my form looks like this
<input type="text" name="txtItem" id="txtItem" class="m-wrap w-120" tabindex="6">
<input type="text" name="itemId" id="itemId" class="m-wrap w-120" tabindex="6">
<input type="text" name="itemName" id="itemName" class="m-wrap w-120" tabindex="6">
<input type="text" name="itemQty" id="itemQty" class="m-wrap w-120" tabindex="6">
so everytime i scan a code it should always appear in the txtitem text-box no matter where my current focus is.
Can anybody guide me or help me find a solution here??

Some Barcode Scanners act just like another input device. The form cannot tell the difference between information being entered by a keyboard vs. a scanner unless you use a timer to monitor how quickly it is entered.
Some scanners "paste" the values in to the focused control - others send each individual key stroke.
The following JSFiddle is able to detect when input occurs when characters are sent individually on a single control:
http://jsfiddle.net/PhilM/Bf89R/3/
You could adapt this to make it a delegate for the whole form and remove the input from the control it was input into and put it into the correct form.
The test html for the fiddle is this:
<form>
<input id="scanInput" />
<button id="reset">Reset</button>
</form>
<br/>
<div>
<h2>Event Information</h2>
Start: <span id="startTime"></span>
<br/>First Key: <span id="firstKey"></span>
<br/>Last Ley: <span id="lastKey"></span>
<br/>End: <span id="endTime"></span>
<br/>Elapsed: <span id="totalTime"></span>
</div>
<div>
<h2>Results</h2>
<div id="resultsList"></div>
</div>
The Javascript for the sample fiddle is:
/*
This code will determine when a code has been either entered manually or
entered using a scanner.
It assumes that a code has finished being entered when one of the following
events occurs:
• The enter key (keycode 13) is input
• The input has a minumum length of text and loses focus
• Input stops after being entered very fast (assumed to be a scanner)
*/
var inputStart, inputStop, firstKey, lastKey, timing, userFinishedEntering;
var minChars = 3;
// handle a key value being entered by either keyboard or scanner
$("#scanInput").keypress(function (e) {
// restart the timer
if (timing) {
clearTimeout(timing);
}
// handle the key event
if (e.which == 13) {
// Enter key was entered
// don't submit the form
e.preventDefault();
// has the user finished entering manually?
if ($("#scanInput").val().length >= minChars){
userFinishedEntering = true; // incase the user pressed the enter key
inputComplete();
}
}
else {
// some other key value was entered
// could be the last character
inputStop = performance.now();
lastKey = e.which;
// don't assume it's finished just yet
userFinishedEntering = false;
// is this the first character?
if (!inputStart) {
firstKey = e.which;
inputStart = inputStop;
// watch for a loss of focus
$("body").on("blur", "#scanInput", inputBlur);
}
// start the timer again
timing = setTimeout(inputTimeoutHandler, 500);
}
});
// Assume that a loss of focus means the value has finished being entered
function inputBlur(){
clearTimeout(timing);
if ($("#scanInput").val().length >= minChars){
userFinishedEntering = true;
inputComplete();
}
};
// reset the page
$("#reset").click(function (e) {
e.preventDefault();
resetValues();
});
function resetValues() {
// clear the variables
inputStart = null;
inputStop = null;
firstKey = null;
lastKey = null;
// clear the results
inputComplete();
}
// Assume that it is from the scanner if it was entered really fast
function isScannerInput() {
return (((inputStop - inputStart) / $("#scanInput").val().length) < 15);
}
// Determine if the user is just typing slowly
function isUserFinishedEntering(){
return !isScannerInput() && userFinishedEntering;
}
function inputTimeoutHandler(){
// stop listening for a timer event
clearTimeout(timing);
// if the value is being entered manually and hasn't finished being entered
if (!isUserFinishedEntering() || $("#scanInput").val().length < 3) {
// keep waiting for input
return;
}
else{
reportValues();
}
}
// here we decide what to do now that we know a value has been completely entered
function inputComplete(){
// stop listening for the input to lose focus
$("body").off("blur", "#scanInput", inputBlur);
// report the results
reportValues();
}
function reportValues() {
// update the metrics
$("#startTime").text(inputStart == null ? "" : inputStart);
$("#firstKey").text(firstKey == null ? "" : firstKey);
$("#endTime").text(inputStop == null ? "" : inputStop);
$("#lastKey").text(lastKey == null ? "" : lastKey);
$("#totalTime").text(inputStart == null ? "" : (inputStop - inputStart) + " milliseconds");
if (!inputStart) {
// clear the results
$("#resultsList").html("");
$("#scanInput").focus().select();
} else {
// prepend another result item
var inputMethod = isScannerInput() ? "Scanner" : "Keyboard";
$("#resultsList").prepend("<div class='resultItem " + inputMethod + "'>" +
"<span>Value: " + $("#scanInput").val() + "<br/>" +
"<span>ms/char: " + ((inputStop - inputStart) / $("#scanInput").val().length) + "</span></br>" +
"<span>InputMethod: <strong>" + inputMethod + "</strong></span></br>" +
"</span></div></br>");
$("#scanInput").focus().select();
inputStart = null;
}
}
$("#scanInput").focus();
The code above does not support copy/paste, but in our situation this is unlikely to happen anyway.

You need to listen on "paste" event using jQuery
$("input").on("paste",function(e){
$("#txtItem").focus();
});
Here is a example:
http://jsfiddle.net/T6VdS/

I would think the scanner is just being seen as a text input device like a keyboard and outputting text. Unless there is a way to identify that text then the answer is likely to be that there isnt an easy solution.
If the code you are receiving is always in the same form and can be identified with a regular expression you might be able to move it into the correct box by somehow buffering the input (I would expect the scanned code to come in a series of keypresses that are far faster than a human would input) and running a regex over it...

Add a prefix to the text that the scanner outputs (almost all scanner will let you do this) and then when any input starts with that prefix you know its the scanner.
To catch the input with jquery you might do something like this:
//presuming the scanner acts like a keyboard
$(document).keypress(function (e) {
//do something to match the 'key presses'
//focus to the input and put the rest of the string in there
});

The best way is to put
data into scanned code. Almost all scanners support such programming. Many of them can be programmed via control barcodes, that printed in manual.
I use the Ctrl+Char for Symbol scanner,
F9 data F10 for Honeywel bluetooth scanner.
Wasp scanner does not support Ctrl+character combination. So I use
[Data] format for Wasp.
Then I catch the first symbol (say [ char) in program an position the cursor in search box. Upon receiving the last character (in my case ] char) send the contents of into search routine.

how to auto press "tab" key when user press "-" (dash) key in javascript

my code like this
function Tab(e)
{
var input = e.keyCode ? e.keyCode : e.charCode;
if ((input>=48 && input<=57) || (input==45))
{
if (input==45)
{
//what should i do here? so,
//if user press "-", its auto tab to next textfield,
return false
}
else
return true;
}
else
return false;
}
here my html
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event)">
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event)">
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event)">
I've been searching at google. but its return similar article and it's not that I'm looking for.
I have a lot of similar text field, so it is not possible to include the next textfield's name cause of i used array name.
sorry if my english is bad, but i hope you understand what I want

You can focus the next input sibling in this way:
HTML:
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event, this)">
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event, this)">
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event, this)">
JS:
function Tab(e, inp)
{
var input = e.keyCode ? e.keyCode : e.charCode;
if ((input>=48 && input<=57) || (input==45))
{
if (input==45)
{
//focus the next input if there is one
while(inp.nextSibling)
{
var inp=inp.nextSibling;
if(inp.nodeType===1 && inp.tagName.toLowerCase()=="input")
{
inp.focus();
break;
}
}
return false
}
else
return true;
}
else
return false;
}

it just takes 10 seconds to ask google. you can't emulate a tab-keypress, but there are different workarounds (maybe you could use an array containing the id's of all you fields, save the index you're at and on pressing dash, focus index+1 in your array (+ setting the saved index onfocus of every text field to note if a user focuses a field by clicking it or really pressing tab))

I've had a similar problem, where I wanted to press + on the numpad to tab to the next field. Now I've released a library that I think will help you. It does require jquery though.
PlusAsTab: A jQuery plugin to use the numpad plus key as a tab key equivalent.
Since you want - (on the normal keys, I guess) instead, you can set the options. Find out which key you want to use with the jQuery event.which demo.
JoelPurra.PlusAsTab.setOptions({
// Use dash instead of plus
// Number 189 found through demo at
// https://api.jquery.com/event.which/
key: 189
});
// Matches all inputs with name "a[]" (needs some character escaping)
$('input[name=a\\[\\]]').plusAsTab();
You can try it out in the PlusAsTab demo, and check out the enter-as-tab demo. If you want to change to the - key, you can call JoelPurra.PlusAsTab.setOptions({key: 189}); from your javascript console.