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 binations to no avail.

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 binations to no avail.

• javascript
• jquery

• can you provide a demo of your problem.? – Rajaprabhu Aravindasamy Commented Dec 8, 2013 at 13:56

3 Answers 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./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/3hhCx/

$('.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 ); 

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