reduce input to 2 characters using jQuery

Is there a way to trim the input text down to just the first two characters when a button is clicked?

For example, if I enter "BT2J43" into the input field, can it be automatically shortened to "BT" upon clicking the button?

I'm new to learning jQuery and would appreciate some guidance. Here is my fiddle link:

https://jsfiddle.net/ktd9gbu9/1/

$("#submit123").click(function() {
  $("#text123").text($("#text123")[0].innerText.substr(2));
});

<input type="search" name="table_filter" id="text123" required>
<input name="submit" type="Submit" id="submit123" value="Search">
javascriptjqueryhtmlcsstrim

Answer №1

It is recommended to utilize the .val() method instead of .text():

$("#submit123").click(function () {
    $("#text123").val($("#text123").val().substr(0, 2));
});

View jsFiddle demo

In addition, when using substr(), remember to include the starting index.

Answer №2

If you want to achieve this, simply focus on using .val()

Take a look at this concise code snippet that could be beneficial for you! :)

$("#button").click(function () {
    var search = $("#search");
    search.val(search.val().substr(0, 2));
});

You can test it out with this JSfiddle Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting canvas context position after resizing

I've been experimenting with using a canvas as a texture in three.js. Since three.js requires textures to have dimensions that are powers of two, I initially set the canvas width and height to [512, 512]. However, I want the final canvas to have non-p ...

javascripthtmlcanvasthree.js

The Javascript functionality of SonarQube Scanner seems to be malfunctioning

We are experiencing issues with SonarQube Scanner in relation to javascript/typescript 10:33:14.808 ERROR: C:/Users/marc.donovan/wk/pos-web-framework/packages/pos-web-error-manager/src/index.js file cannot be parsed 10:33:14.811 ERROR: Parse error on line ...

javascripttypescriptsonarqubesonarqube-scan

I'm not sure why the CSS attribute that restricts character numbers exists

https://i.sstatic.net/dkRt3.png The Divtag appears to be malfunctioning due to insufficient properties. I am currently unsure of how to resolve this issue and would appreciate any insights or opinions. <div class="col boardsBox" style="margin-right:0. ...

javascripthtmlcssbootstrap-4

"Utilize Vue i18n to properly display currency amounts in USD

Whenever I present my currency as USD, it always shows up like this: USD$500.00. I am attempting to eliminate the USD prefix from the beginning. Below is my numberFormats configuration: numberFormats: { 'en': { currency: { ...

javascriptvue.jsvuejs2vue-i18n

Grids designed in the style of Pinterest

Seeking advice on aligning divs in a Pinterest-style layout. Currently, my setup looks like this: https://i.sstatic.net/erlho.png But I want it to look more like this: https://i.sstatic.net/K9FnD.png Would greatly appreciate any tips or suggestions on ho ...

javascriptjqueryhtmlcss

Angular showcases the presence of a signed-in user at page load, disregarding the absence of

Currently, I am following a course where I have implemented a simple login form inside the navigation bar: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary"> <div class="container"> ...

htmlangularvisual-studio-code

The term "this" in the global scope versus within a function in the Node.js environment

console.log(this) // {} function abc(){ console.log(this) } abc() // global The concept of this can vary between the global space and inside a function in Node.js. console.log(this === module.exports) // true function abc(){ ...

javascriptnode.js

How can one determine if a new document was created by Mongoose's upsert feature?

My code in node.js/express.js looks like this: var User = mongoose.model('User'); var usersRouter = express.Router(); usersRouter.put('/:id', function(req, res) { req.body._id = req.params.id; var usr = new User(req.body); ...

javascriptnode.jsmongodbexpressmongoose

Issue with the Animated Skill Bar not functioning properly when scrolling

I've been trying to implement an animated skill bar in my Portfolio using JQuery, but I'm facing some challenges. Despite following various tutorials, the code doesn't seem to work as expected. I've tried calculating section scroll posi ...

javascriptjqueryhtmlcssscroll

Look up and input information into the dropdown selection list

Is there a way to search for and input text in a select drop-down menu? Generally, we are unable to write inside the select drop-down menu. Is there a method that allows me to type inside this drop-down menu and as I am typing, if a similar word appears, I ...

phpjqueryhtmlmysqlajax

Is the script proceeding without waiting for the AJAX response?

I've got this lengthy jQuery function that involves a jQuery AJAX call, some CSS modifications, and repositioning a div. Check out the code snippet below: $('.editable').click(function(e) { // Assign attributes for the AJAX call ...

jqueryajax

Featuring my Cookie page prominently on my website's homepage

I am facing a simple issue: I have a cookie verification page (cookies_check.php) that I want to include on my home page (accueil.php). So, currently, the only code on accueil.php is: <?php include ('Controleur/cookies_check.php'); ?> He ...

phpcookiesincludehtml

showing the values stored in local storage

My goal is to show only the values stored in local storage, excluding the key value that displays all data after submitting the login form. welcome <span id="demo"></span>; <script> document.getElementById('demo').innerHTML = ...

javascriptvue.jslocal-storage

Populate your HTML form with Bootstrap 4 Popover Styling

Currently in the process of upgrading from Bootstrap 3. I previously had a form within some popovers, but now it's broken with empty content. I can't figure out what has changed to cause this issue. The form is shown dynamically, but the problem ...

jqueryformsbootstrap-4popover

Retrieving data from an Ajax POST request URL

I am currently working on a project where I need to extract the URL of a POST request made through AJAX. My router is set up to handle all user requests, including GET and POST methods. However, I am struggling to identify the specific URL being used in th ...

phpjqueryajax

software tool for managing state transitions

Can anyone recommend a superior javascript library for workflows? Right now, I'm utilizing Joint JS, but I require something with a more visually appealing interface (users tend to prefer that). ...

javascriptflowchart

Undefined value in Axios promise pending status in React

I'm currently working on developing a weather application using React. To enable a dropdown feature listing available cities and to fetch data from an API, I am incorporating react-autosuggest for the dropdown functionality and Axios for making API ca ...

javascriptreactjswebpackaxiosautosuggest

Is it possible to create a stylish box for an HTML form?

I'm trying to figure out how to put a form inside a box or have a border around it, but I'm stuck. I want the background to be white and was considering using a transparent option. Are there any experts out there with some simple ideas on how to ...

htmlformstextboxborder

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

htmlcssreactjsmaterial-ui

What is the significance of the "rc" within the version structure of an npm package?

Can someone help me understand what the rc in 2.2.0-rc.0 signifies? I'm curious if it indicates that this version is ready for production use. ...

javascriptnode.jsnpmversioningsemantic-versioning