Jquery checking dynamic value from form input

Hallo.. Now I want share about create dynamic input value like my previous post https://imron02.wordpress.com/2014/02/10/jquery-dynamic-form-control/. But now the different from latest post is this post is create function for checking value from form input. Example I have dynamic form control like the above link, but I want to check all the input field, and ensuring that the last input must be greater than the previous inputs. Ok this is the code from me:
First we must create html file. Example I create with name checkInput.html:

<html>
<head>
    <title>Dynamic Checking Input Field</title>
    <script src='http://code.jquery.com/jquery-latest.min.js'></script>
</head>
<body>
<table id="content">
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td><input type="text" name="value" /></td>
        </tr>
    </tbody>
</table>
<button id="addField">Add Row</button>
<button id="submit">Submit</button>
</body>
</html>


So if we run that code, we can get result like this:

And now, I want add Jquery code to create dynamic append input field. So if I click the Add Row button, input field will be incremented by one. And then we must change checkInput.html like this:

<button id="addField">Add Row</button>
<button id="submit">Submit</button>

<script type="text/javascript>
$(function () {
    /* if button Add Row Clicked */
    $("#addField").click(function (e) {
        e.preventDefault();
        /* cloning table input */
        $("table tbody tr").first().clone().appendTo("table tbody");
    });
});
</script>
</body>
</html>

And try run that code and click add row button once, so we can get result like this:

And the last code for checking all input field and if the new value is less than previous value, so get the error and showing the number value.

$(function () {
    /* if button Add Row Clicked */
    $("#addField").click(function (e) {
        e.preventDefault();
        /* cloning table input */
        $("table tbody tr").first().clone().appendTo("table tbody");
    });
    
    /* if button submit clicked */
    $("#submit").click(function (e) {
        e.preventDefault();
        /* initialize variable */
        var el = $("input[name='value']"),
            err = [];
        /* looping input with name value (el) */
        for(var i = 0; i < el.length - 1; i++) {
            /* checking value, if next value more than less value */
            if (parseInt(el.eq(i + 1).val()) < parseInt(el.eq(i).val())) {
                /* if exist so create array */
                err.push(el.eq(i + 1).val());
            }
        }
        /* showing error value */
        alert(err);
    });
});

Explanations:

  1. Line 37 is initialize variabel and var el is for get all input field with name is value.
  2. Line 38 is initialize array type, the default is null index and value of array
  3. Line 40 is looping type from jquery. And the el.length is to get the length from all input field.
  4. Line 42 is if the next input less than previous value ( “<" symbol) and insert the error value to variable err (line 38). And for parseInt this is a builtin function javascript to convert string value to integer

And now run that code, and if we add the first input with value 10 and next input is 9, so we can get alert error value 9 error, Which is supposed to be filled with 10 or 11 or must grather than 10.

And this is a online example http://jsfiddle.net/imron02/TBZ8B/4/ or http://jsfiddle.net/imron02/TBZ8B/4/embedded/result/

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s