Generate random number into text input using javascript/jQuery

Question

I'm trying to generate a random number into a text field. Unfortunately ID's are not an option here so I'm using classes as identifiers. I've tried a number of things but cannot seem to get this work.

HTML for input:

<div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">
                Hidden:   
            </span>
        </label>
    </div>
    <div class="productAttributeValue">
        <input type="text" class="Field validation" value="" size="5"  />
    </div>
</div>

I have tried:

var randomnumber = Math.floor(Math.random() * 11)
$('#BuyThis').click(function () {
    $(".productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="
    text "]").val(randomnumber);
});

In the above scenario, #BuyThis is a button:

<a id="BuyThis" type="button" class="btn btn-small btn-warning" href="#product-options" data-toggle="modal">

However, it's not necessary this happen with a click, I just want a random number in the field before the form is submitted.

Also tried without the click:

$(function(){
   var randomnumber=Math.floor(Math.random()*11)    
   $('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="text"]').val( randomnumber );      

})

Another attempt:

function randomNumber(m, n) {
    m = parseInt(m);
    n = parseInt(n);
    randomnumber = Math.floor(Math.random() * (n - m + 1)) + m;
    ('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="text"]').value = randomnumber;
});

Tried various other functions and combinations to no avail.

can you provide a demo of your problem.?

Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy

2013-12-08 13:56:25 +00:00
Commented Dec 8, 2013 at 13:56 — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Dec 8, 2013 at 13:56

showdev · Accepted Answer · 2021-08-01 03:29:39Z

3

The div with class productAttributeValue is inside productAttributeConfigurableEntryNumbersOnlyText, so when selecting you should add a space between them:

$(function() {
  var randomnumber = Math.floor(Math.random() * 11)
  $('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input[type="text"]').val(randomnumber);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText">
  <div class="productAttributeLabel">
    <label>
      <span class="name">Hidden:</span>
    </label>
  </div>
  <div class="productAttributeValue">
    <input type="text" class="Field validation" value="" size="5" />
  </div>
</div>

Does work: http://jsfiddle.net/3hhCx/

edited Aug 1, 2021 at 3:29

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Dec 8, 2013 at 14:00

Peter van der Wal

12k2 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

susan Over a year ago

Ha ha ha...I looked at that probably half a dozen times but doing a million things at the same time and kept forgetting to do it. Duh! Thank you thank you thank you thank you so much. I've been working on this for a lot longer than I should have been, very relieved to see it working. Thanks! ~Susan

Wouter J · Accepted Answer · 2013-12-08 14:00:48Z

2

$('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue')

Is selecting an element which has both .productAttributeConfigurableEntryNumbersOnlyText and .productAttributeValue.

You want to select an element which has .productAttributeValue which is a child of .productAttributeConfigurableEntryNumbersOnlyText.

To do that, add a space between them:

$('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue')

To insert a random value, use:

var randomnumber=Math.floor(Math.random()*11)    
$('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input[type="text"]').val( randomnumber );

answered Dec 8, 2013 at 14:00

Wouter J

42k15 gold badges113 silver badges114 bronze badges

Comments

Zeeshan · Accepted Answer · 2013-12-08 14:05:50Z

1

try this... HTML

<div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">
                Hidden:   
            </span>
        </label>
    </div>
    <div class="productAttributeValue">
        <input type="text" class="Field validation" value="" size="5"  />
    </div>

javascript:

var randomnumber=Math.floor(Math.random()*11)    

$('#BuyThis').click(function(){    
  $(".productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input:text").val( randomnumber ); 
});

try Demo

answered Dec 8, 2013 at 14:05

Zeeshan

1,68314 silver badges18 bronze badges

Collectives™ on Stack Overflow

Generate random number into text input using javascript/jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related