Using substring within input field

Question

I'm using an ID scanner that acts as a keyboard input and I want an input field to listen for the value and substring (or slice) out unnecessary, extra values.

Currently, the ID scanner formats numbers like this: ;708089113=0184?

I want to grab only the 708089113. I want to remove the semi-colon and everything after the 3.

I'm just not sure how to do this automatically. The stripped value should appear in the field before submitting.

Javascript:

var suid = document.getElementById("SUID").value;
var stripSUID = suid.substring(1,10); 

document.getElementById("SUID").value = stripSUID;

HTML:

<input name="SUID" id="SUID" type="text" value="">

JSFiddle Link

See the answer by @Paul S. below. Can you clarify in your question what you are expecting to happen. If you want the "stripped value .. [to] ... appear in the field before submitting", then you want to listen for the .value to change in the <input> field. A more accurate question makes the resulting Q/A more useful for others. — G. Cito
– G. Cito, Commented Dec 15, 2014 at 19:14
@G.Cito Wasn't exactly sure what attribute I needed, so thank you for explaining the listen function. I have updated my question. — nicolefdesigns
– nicolefdesigns, Commented Dec 15, 2014 at 19:22

Jazi · Accepted Answer · 2014-12-15 19:25:14Z

4

You can use jQuery for this.

HTML:

<input name="suid" id="suid" type="text" value="">

JavaScript:

$(function() {
    $('#suid').change(function() {
        var suid = $(this).val();
        var stripSUID = suid.split('=');
        var stringLength = stripSUID[0].length;
        var returnValue = stripSUID[0].substr(1, stringLength);

        $(this).val(returnValue);
    });
});

jsFiddle update: http://jsfiddle.net/jhjr288o/4/

edited Dec 15, 2014 at 19:25

answered Dec 15, 2014 at 19:07

Jazi

6,76215 gold badges64 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Wilfredo P Over a year ago

But he needs it, on the event change.

Jazi Over a year ago

I have modified my answer.

nicolefdesigns Over a year ago

@KrzysztofTrzos Working so far, but it's still grabbing the semi-colon (;) before the numbers. I need that stripped too.

Jazi Over a year ago

@nicolefdesigns Didn't noticed that. Answer updated: jsfiddle.net/jhjr288o/4

nicolefdesigns Over a year ago

@KrzysztofTrzos Thanks for updating your answer. I appreciate your knowledge. I always prefer to use jQuery, but I'm using Sharepoint (not by choice) to inject this code, so it doesn't seem to play nicely with it. I'll leave this as the best answer though.

Paul S. · Accepted Answer · 2014-12-16 14:18:41Z

2

So you're asking how to listen for a change to the <input>?

var elm = document.getElementById('SUID');

elm.addEventListener('change', function (e) {
    var s = this.value, i = s.indexOf('=');
    if (i !== -1) {
        s = s.slice(1, i);
        this.value = s;
    }
});

DEMO

The change event fires when the element loses focus
The input event fires every time oldvalue !== newvalue (i.e. for every char typed)

Also note, this code must be run after the Element exists, i.e. wait for the Window's load event

edited Dec 16, 2014 at 14:18

answered Dec 15, 2014 at 19:05

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

5 Comments

Paul S. Over a year ago

It's fun typing = in and watching the chars disappear from the front, too! OP, you may also want to check s.charAt(0) === ';'

G. Cito Over a year ago

Are there more tags that can be added to the question here?

nicolefdesigns Over a year ago

@PaulS. This is a great answer too. However, I'm trying to modify your code so that the equal sign and everything after it get stripped away. Your code currently keeps all the numbers and the question mark at the end. Any suggestions on how to achieve this with your code?

Paul S. Over a year ago

When you said acts as a keyboard input I assumed that it typed the whole thing in one go, if it's typing letter by letter, perhaps change is the event you want to listen for. @nicolefdesigns hows this new version?

nicolefdesigns Over a year ago

@PaulS. Perfect! Thank you very much! Unfortunately, the ID scanners are older technology and I can't use newer ones, so I always have to adjust the code for it.

Collectives™ on Stack Overflow

Using substring within input field

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related