Generating form input text (after 24 numbers) without pressing enter

Question

I wrote some small part of the code

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Test Page</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body {
    font-family: sans-serif;
  }
  p {
    margin: 0px;
  }
</style>
</head>
<body>
  <form>
    <input type='text'>
  </form>
</body>
</html>

JQ

jQuery(function($) {

      $('form input[type=text]').change(fileChangeHandler);
      function fileChangeHandler() {
        var form = $(this).closest('form');
        $('<input type="text">').change(fileChangeHandler).appendTo(form);
      }


    });

It works nearly good but : I have to press enter after i fill a value ( the values are integer only ) - is it possible to make it to auto enter after typing in 24 numbers? < then automatically it will go into next field and I will do the same.

I really don't know how to do that. Give me some hints.

score 0 · Answer 1 · edited Nov 07 '13 at 20:54

0

jQuery(function ($) {

    $('form input[type=text]').keyup(function(){
        var form = $(this).closest('form');
        if ($(this).val().length == 24)
            $('<input type="text">').appendTo(form).focus();
    }

});

Something like above may help.

edited Nov 07 '13 at 20:54

shanabus

12,989
6
52
78

answered Nov 07 '13 at 20:44

Irfan TahirKheli

3,652
1
22
36

FastTrack · Answer 2 · 2013-11-07T20:51:28.370

0

UPDATED:

Here is a working JSFiddle: LINK

Given:

<form>
    <input type='text'>
</form>

Here is your jQuery:

$('input').keyup(function (){
    var intLength = $(this).val().length;

    if(intLength === 24){
        $('<input type="text" />').appendTo('form');
        $("input").last().focus();   
    }
});

edited Nov 07 '13 at 20:51

answered Nov 07 '13 at 20:46

FastTrack

8,810
14
57
78

Not sure I understand your question then... What do you need it to do if my example doesn't do it for you? – FastTrack Nov 07 '13 at 20:54

melc · Accepted Answer · 2013-11-08T08:07:45.557

You can do it as follows,

$('form input').on("propertychange keyup input paste", addInput);
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            $('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
        }}

http://jsfiddle.net/5KZtB/

EDIT - store input values

To store the values of the fields in an array you can push each value before creating the new field. For example,

jQuery(function($) {

    var values = [];

      $('form input[type=text]').change(fileChangeHandler);
      function fileChangeHandler() {
        var form = $(this).closest('form');        
      }
     var form = $(this).closest('form');

    $('form input').on("propertychange keyup input paste",

    addInput);
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            $('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
            values.push($(this).val());
            //console.log(values);
        }}

    });

http://jsfiddle.net/5KZtB/1/

EDIT2 - allow only numeric

....
    $('form input').on("propertychange keyup input paste",

    addInput);
    onlyNums($('form input'));
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            var newInput = $('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
            onlyNums(newInput);
            values.push($(this).val());
            console.log(values);
        }}

    function onlyNums($elem){
        $elem.keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
    }

http://jsfiddle.net/5KZtB/2/

EDIT3 - a field to delete the input elements

A rough approach could be to add the input inside a span element as well as a link with an x mark for deleting the specific input. So the code has been slightly modified as follows,

HTML

<form>
    <span class="input-component"><input type="text"/><a href=#>[x]</a></span>
  </form>

JS

jQuery(function($) {

    var values = [];

      $('form input[type=text]').change(fileChangeHandler);
      function fileChangeHandler() {
        var form = $(this).closest('form');        
      }
     var form = $(this).closest('form');

    $('form .input-component input').on("propertychange keyup input paste",

    addInput);
    onlyNums($('form .input-component input'));
    initializeDelLink($('form .input-component'));
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            var $newInputComponent = $('<span class="input-component"><input type="text"/><a href=#>[x]</a></span>').change(fileChangeHandler).appendTo('form').find('input').focus().on("propertychange keyup input paste",addInput).end();
            initializeDelLink($newInputComponent);
            var $newInput = $newInputComponent.find('input');
            onlyNums($newInput);
            values.push($(this).val());
            console.log(values);
        }}

    function initializeDelLink($elem){
        var $delLink=$elem.find('a');
            $delLink.click(function(){alert();
                $(this).parent('.input-component').remove();
            });
    }

    function onlyNums($elem){
        $elem.keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
    }

    });

http://jsfiddle.net/5KZtB/3/

This is awesome :3 Please tell me that I could get as a array() the fields typed in somehow — user2945583, Nov 07 '13 at 20:56
@user2945583 do you mean an array with the values you have entered in the fields? — melc, Nov 07 '13 at 20:57
Could you tell me lastly how to retrieve the var data ? Im not into js ( and make it safe before insert into db ) — user2945583, Nov 07 '13 at 21:03
and by they way hes accepting text, it supposed to only allow numbers 0-9 — user2945583, Nov 07 '13 at 21:07
@user2945583 regarding the retrieving part it depends on how you would like to send it. You can easily call var `stringOfData = JSON.stringify(data);` and send that as text. To make it safe it is best to do that at the server side before inserting to the db. — melc, Nov 07 '13 at 21:13
@user2945583 Regarding the validation part, you may validate afterwards and indicate it somehow e.g. a dialog message, notification on input or disallow any other characters http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery — melc, Nov 07 '13 at 21:16
Nice:) Any [x] delete option for a "generated" field? Maybe if I do a mistake I would like to delete it — user2945583, Nov 07 '13 at 21:24
@user2945583 updated the answer. If you find yourself requiring further functionality maybe it is best to create another question in order to be clear what exactly is happening, for other readers as well, without having to go through all these comments. thanks — melc, Nov 08 '13 at 08:09
Well I still got question to this one :) 1. Why there is a X in first input it shouldn't be so someone could just delete it at start. 2. Is there a option to set this input text's that you cannot edit them after filling the 24 numbers? Make them "inactive" — user2945583, Nov 08 '13 at 13:48
@user2945583 1. I only tried to provide examples of whatever it is you try to implement, i do not know the logic of your system. At this point it should be clear on how to modify the code, e.g. for the particular issue just remove it from the html as the first input is entered in the html, then you may need to modify a little the first call of the functions. 2. you can make an input disabled by setting the disabled property i.e. `` or via jquery `$('input').attr("disabled",true)`. — melc, Nov 08 '13 at 14:47
@user2945583 i believe the answer meets your needs so please mark it as accepted in order to help other visitors as well, thanks. — melc, Nov 10 '13 at 17:02

Generating form input text (after 24 numbers) without pressing enter

3 Answers3