Search code examples
jqueryhtmlonload-event

How to change placeholder's value dynamically onLoad event using jQuery?


I am working on project where I want to change placeholder each time when user will refresh page. I want only 1st to 9th position in placeholder.

<div class="control-group">
    <div class="controls">
        <div class="main_input_box">
            <label >PIN </label>
            <input class="pass" type="password" placeholder="5th" />
            <input class="pass" type="password" placeholder="2nd" />
            <input class="pass" type="password" placeholder="1st" />
        </div>
    </div>
</div>

When user will load page all placeholder's value should be changed, similar to the rand() function in PHP. How can this be done in jQuery?


Solution

  • I hope it would help you:

    var temp;
    var nums = [];
    $(document).ready(function () {
        $('.pass').each(function(i, obj) {
            do {
                temp = Math.floor(Math.random() * 9) + 1;
    
                $(this).attr("placeholder", temp);
            } while (nums.indexOf(temp) != -1);
            nums.push(temp);
        });
    });
    

    9 and 1 in max and min