How to select random textboxes in Jquery?

Question

I have say, 5 textboxes of tag <textarea>. How can I randomly select 50% of the textboxes? Each text box has a different ID. For example:

<textarea id = "text1" name= "name1"></textarea>
<textarea id = "text2" name= "name2"></textarea>
<textarea id = "text3" name= "name3"></textarea>
<textarea id = "text4" name= "name4"></textarea>
<textarea id = "text5" name= "name5"></textarea>

Can I use some sort of a random function on the IDs or something?

generate a random whole number between 1-5 then concat it to id — guradio, Jan 18 '17 at 07:14
@SorangwalaAbbasali: After selection of text box I want to fill the selected text boxes with random words. Something like an autofiller — Anan Srivastava, Jan 18 '17 at 07:16
See this http://stackoverflow.com/questions/4306105/randomize-numbers-with-jquery you can get an idea from this. — Sorangwala Abbasali, Jan 18 '17 at 07:17

Pranav C Balan · Accepted Answer · 2017-01-18T07:41:49.820

3

Use Math.random() method to generate random index.

// get all textarea eleemnts as an array
var $t = $('textarea[id^="text"]').get();

// iterate upto half length
for (var i = 0, len = $t.length / 2; i < len; i++) {
  // generate random index and remove it from collection
  // where element can be remove using splice method
  // and which returns an array of removed elements       
  // get the elment from that array and update the value or do whatever you are trying to achieve
  $t.splice(Math.floor(Math.random() * $t.length), 1)[0].value = i;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text1" name="name1"></textarea>
<textarea id="text2" name="name2"></textarea>
<textarea id="text3" name="name3"></textarea>
<textarea id="text4" name="name4"></textarea>
<textarea id="text5" name="name5"></textarea>

edited Jan 18 '17 at 07:41

answered Jan 18 '17 at 07:23

Pranav C Balan

113,687
23
165
188

Thanks for replying. Is it possible to pass a function as a value instead of the **i**? I have a function that does something and then the returned text from that function goes into the .value. Can we do something like that? – Anan Srivastava Jan 18 '17 at 09:54
@AnanSrivastava call a function instead of `i` => `......1)[0].value = callSomeFunction();` – Pranav C Balan Jan 18 '17 at 10:11
I did that, sir. But for me it selects all text boxes and the value is undefined. I am pretty sure that I am passing the wrong parameter in my function. Here's a jsfiddle. https://jsfiddle.net/p9Lgg0d5/ – Anan Srivastava Jan 18 '17 at 10:37
@AnanSrivastava : nothing is returning from the function... so it would be undefined – Pranav C Balan Jan 18 '17 at 10:39
@AnanSrivastava : https://jsfiddle.net/p9Lgg0d5/1/ , various errors are there..... 1. you need to pass the reference...... 2. `$(textControl).prop('maxlength')` would be always `-1` since it's not set ... – Pranav C Balan Jan 18 '17 at 10:54

score 0 · Answer 2 · edited May 23 '17 at 12:33

Check out How to get n no elements randomly from an array on an efficient way to select n random elements from an array (this will return unique elements). Adapting this solution, you can do something like this:

// https://stackoverflow.com/questions/19269545/how-to-get-n-no-elements-randomly-from-an-array
function getRandom(arr, n) {
    var result = new Array(n),
        len = arr.length,
        taken = new Array(len);
    if (n > len)
        throw new RangeError("getRandom: more elements taken than available");
    while (n--) {
        var x = Math.floor(Math.random() * len);
        result[n] = arr[x in taken ? taken[x] : x];
        taken[x] = --len;
    }
    return result;
}

var textareas = $('textarea');
var randomTextareas = getRandom(textareas, textareas.length / 2);
randomTextareas.forEach(function(textArea) { 
  $(textArea).prop('value', 'hello');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text1" name= "name1"></textarea>
<textarea id="text2" name= "name2"></textarea>
<textarea id="text3" name= "name3"></textarea>
<textarea id="text4" name= "name4"></textarea>

Thanks for replying. Instead of 'hello', how can I pass a function in it? I just replaced 'hello' with my function but it doesn't work. https://jsfiddle.net/y7c9v2nw/ — Anan Srivastava, Jan 18 '17 at 10:44

How to select random textboxes in Jquery?

2 Answers2