Every 3 seconds increment random number and display result

Question

I have dynamic input fields generated from a jquery function. There is the ability to add or delete through button clicks these input fields. I have a random number generator that changes its values every 3 seconds. I am trying to set the value of random number to the first dynamic input field and then as I add other input fields in the form increment the value by +1 .

How can I achieve the following? Since, the values change every 5 seconds. Once the random number is generated, update the values for the dynamic input fields currently in the form. The increment will always be +1 but the random number will be obviously different. JSFIDDLE or LIVE_VERSION

<script>
$(document).ready(function () {
     //generate random number
      setInterval(function() {
      var number = 1 + Math.floor(Math.random() * 6);
      $('#increment_num').text(number);
    },
    3000);

    $('#btnAdd').click(function () {
        var num = $('.clonedSection').length;
        var newNum = new Number(num + 1);
        var nextAutoIncrement = $('#result').val();

        var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);
        newSection.children(':first').children(':first').attr('id', 'increment_id_' + newNum).attr('name', 'increment_id_' + newNum);
        newSection.insertAfter('#pq_entry_' + num).last();

        event.preventDefault();
        $('#btnDel').prop('disabled', '');

        if (newNum == 5) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many duplicate input fields we currently have
        $('#pq_entry_' + num).remove(); // remove the last element

        // enable the "add" button
        $('#btnAdd').prop('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
    });

    $('#btnDel').prop('disabled', 'disabled');
});
</script>

html

<form>
Number to start increment from:
<input id="increment_num" name="increment_num" placeholder="" type="text" /></br>
Values:
<ul id="pq_entry_1" class="clonedSection">
            <li>
                <input id="increment_id_1" name="increment_id_1" placeholder="" type="text" />
            </li>
</ul><br/>
<input type='button' id='btnAdd' value='add text box' />
<input type='button' id='btnDel' value='Delete' /></br>
</form>

Goal

enter image description here

you are giving number in input to increment and wants to increase it by `+1` every 5 seconds then why are you using `random` — Udit Bhardwaj, Dec 05 '13 at 06:52
@UDB Yes the base number to increment from is random, my goal is two update values of all input fields if base number changes. — Code_Ed_Student, Dec 05 '13 at 06:56
@Code_Ed_Student do you mean that value for `input#increment_num` is randomly generated on page load and changes as per the set interval and the values for all `input#increment_id_#` will show consecutive numbers according to the value of `input#increment_num` for example if page loads and random value of `input#increment_num` at the current instance of time is, say, 6 then value of `input#increment_id_1` must be 7, value for `input#increment_id_2` must be 8 and so on.. ? — Udit Bhardwaj, Dec 05 '13 at 07:10

score 1 · Answer 1 · answered Dec 05 '13 at 07:25

    $('#increment_num').val(1 + Math.floor(Math.random() * 6));
    setVal(parseFloat($('#increment_num').val())+1)

    setInterval(function () {
        var number = 1 + Math.floor(Math.random() * 6);
        $('#increment_num').val(number);
        var i=number+1;
        setVal(i);
    },
    5000);

    $('#btnAdd').click(function () {

     //..old code as it is

     //at last add

     setVal(parseFloat($('#increment_num').val())+1)
    })

    //rest of the code as it is

    // add at end                              
    function setVal(i)      
    {
        $('.clonedSection').each(function () {
            $(this).find('input').val(i);
            i++;
        })
    }

DEMO

score 1 · Accepted Answer · answered Dec 05 '13 at 07:38

1

Here is a fiddle of my changes: http://jsfiddle.net/f9XP8/1/

For an easier fix, you should just update all of the values when your number changes:

success: function (data) {
        var $cloned = $('.clonedSection li');
        var num = parseInt(data);
        $increment_num.val(num);
        $cloned.each(function(i){
            $(this).find('input').val(num+i);
        })
},

You could also clean up your clone code quite a bit and ensure that new elements have the correct values set:

$('#btnAdd').click(function () {
    var $clones = $('.clonedSection li'),
        num = $clones.size() + 1,
        next_num = parseInt($clones.last().find('input').val())+1,
        $template = $clones.first(),
        newSection = $template.clone().attr('id', 'pq_entry_'+num),
        ident = 'incremend_id_'+num;

    newSection.find('input').attr({
        'id': ident,
        'name': ident
    }).val(next_num);

    $('.clonedSection').append(newSection);

    if (num == 5) $('#btnAdd').prop('disabled', 'disabled');
});

answered Dec 05 '13 at 07:38

Rob M.

35,491
6
51
50

Perfect! revaluating to change this to my chosen answer. If want to add a second input child to the `.clonedSection` how would i do so? – Code_Ed_Student Dec 05 '13 at 07:45
Can you elaborate a little bit? Is this something that wouldn't be carried over in the clone operation? – Rob M. Dec 05 '13 at 07:46
Yes carried in the clone operation. Just adding an additional input field to `clonedSection` it will display like this `
`
– Code_Ed_Student Dec 05 '13 at 07:50
Would you be able to help me with this [QUESTION](http://stackoverflow.com/questions/20408075/assigning-an-increment-value-to-dynamic-fields) – Code_Ed_Student Dec 05 '13 at 18:45
Yes, I will look at it in a couple hours when I'm back at my computer – Rob M. Dec 06 '13 at 00:42

Every 3 seconds increment random number and display result

2 Answers2