You are viewing limited content. For full access, please sign in.

Question

Question

Random quotes in textbox

asked on June 6, 2014

Hello,

I am trying to randomly display a quote in a text box on a form each time the form is loaded. Here is my code:

$( document ).ready(function() {
    
	var ar = new Array(20)
	ar[0] = "Nothing is as easy as it looks."
	ar[1] = "Everything takes longer than you think."
	ar[2] = "Anything that can go wrong will go wrong."
	ar[3] = "If there is a possibility of several things going wrong, the one that will cause the most damage will be the one to go wrong."
	ar[4] = "If there is a worse time for something to go wrong, it will happen then."
	ar[5] = "If anything simply cannot go wrong, it will anyway."
	ar[6] = "If you perceive that there are four possible ways in which a procedure can go wrong, and circumvent these, then a fifth way, unprepared for, will promptly develop."
	ar[7] = "Left to themselves, things tend to go from bad to worse."
	ar[8] = "If everything seems to be going well, you have obviously overlooked something."
	ar[9] = "Nature always sides with the hidden flaw."
	ar[10] = "Mother nature is a bitch."
	ar[11] = "It is impossible to make anything foolproof because fools are so ingenious."
	ar[12] = "Whenever you set out to do something, something else must be done first."
	ar[13] = "Every solution breeds new problems."
	ar[14] = "Trust everybody ... then cut the cards."
	ar[15] = "Two wrongs are only the beginning."
	ar[16] = "If at first you don't succeed, destroy all evidence that you tried."
	ar[17] = "To succeed in politics, it is often necessary to rise above your principles."
	ar[18] = "Exceptions prove the rule ... and wreck the budget."
	ar[19] = "Success always occurs in private, and failure in full view."
    
    var output = Math.floor((Math.random() * 10));
  	$('#q1 input').val(ar[output]);
});

I cant seem to figure out how to get this to work. 

0 0

Answer

APPROVED ANSWER SELECTED ANSWER
replied on June 9, 2014

If the two arrays are different sizes, it's best to use two variables here. You'll also want to ensure you're using valid HTML.

 

Try something like this:

 

$(document).ready(function () {

    var ar = new Array(20)
    ar[0] = "Nothing is as easy as it looks."
    ar[1] = "Everything takes longer than you think."
    ar[2] = "Anything that can go wrong will go wrong."
    ar[3] = "If there is a possibility of several things going wrong, the one that will cause the most damage will be the one to go wrong."
    ar[4] = "If there is a worse time for something to go wrong, it will happen then."
    ar[5] = "If anything simply cannot go wrong, it will anyway."
    ar[6] = "If you perceive that there are four possible ways in which a procedure can go wrong, and circumvent these, then a fifth way, unprepared for, will promptly develop."
    ar[7] = "Left to themselves, things tend to go from bad to worse."
    ar[8] = "If everything seems to be going well, you have obviously overlooked something."
    ar[9] = "Nature always sides with the hidden flaw."
    ar[10] = "Mother nature is a bitch."
    ar[11] = "It is impossible to make anything foolproof because fools are so ingenious."
    ar[12] = "Whenever you set out to do something, something else must be done first."
    ar[13] = "Every solution breeds new problems."
    ar[14] = "Trust everybody ... then cut the cards."
    ar[15] = "Two wrongs are only the beginning."
    ar[16] = "If at first you don't succeed, destroy all evidence that you tried."
    ar[17] = "To succeed in politics, it is often necessary to rise above your principles."
    ar[18] = "Exceptions prove the rule ... and wreck the budget."
    ar[19] = "Success always occurs in private, and failure in full view."

    var ar2 = new Array(12)
    ar2[0] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[1] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[2] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[3] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[4] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[5] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[6] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[7] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[8] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[9] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[10] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[11] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'


    var output = Math.floor((Math.random() * ar.length));
    var output2 = Math.floor((Math.random() * ar2.length));
    $('#q12 textarea').val(ar[output]);
    $(ar2[output2]).insertAfter('#q12');
});

 

0 0

Replies

replied on June 6, 2014

Okay heres the updated code

$( document ).ready(function() {
    var ar = new Array(20)
    ar[0] = "Nothing is as easy as it looks."
    ar[1] = "Everything takes longer than you think."
    ar[2] = "Anything that can go wrong will go wrong."
    ar[3] = "If there is a possibility of several things going wrong, the one that will cause the most damage will be the one to go wrong."
    ar[4] = "If there is a worse time for something to go wrong, it will happen then."
    ar[5] = "If anything simply cannot go wrong, it will anyway."
    ar[6] = "If you perceive that there are four possible ways in which a procedure can go wrong, and circumvent these, then a fifth way, unprepared for, will promptly develop."
    ar[7] = "Left to themselves, things tend to go from bad to worse."
    ar[8] = "If everything seems to be going well, you have obviously overlooked something."
    ar[9] = "Nature always sides with the hidden flaw."
    ar[10] = "Mother nature is a bitch."
    ar[11] = "It is impossible to make anything foolproof because fools are so ingenious."
    ar[12] = "Whenever you set out to do something, something else must be done first."
    ar[13] = "Every solution breeds new problems."
    ar[14] = "Trust everybody ... then cut the cards."
    ar[15] = "Two wrongs are only the beginning."
    ar[16] = "If at first you don't succeed, destroy all evidence that you tried."
    ar[17] = "To succeed in politics, it is often necessary to rise above your principles."
    ar[18] = "Exceptions prove the rule ... and wreck the budget."
    ar[19] = "Success always occurs in private, and failure in full view."
    var output = Math.floor((Math.random() * 10)*ar.lenght());
    $('input #q1').val(ar[output]);
});

Still no results, I attatched a screen shot of the form. I was also wondering if we can input this into the custom html type field instead of a multi line or text box?

Untitled.jpg
Untitled.jpg (190.67 KB)
1 0
replied on June 6, 2014

Try fixing the length typo on line 23?

replied on June 6, 2014

Have a look at this.

 

$( document ).ready(function() {

var ar = new Array(20);
    ar[0] = "Nothing is as easy as it looks.";
    //*snip*
    ar[19] = "Success always occurs in private, and failure in full view.";
    var output = Math.floor((Math.random() * 21)); //random number from 0 to 20
    $('input#q1').val(ar[output]); //no space between input and #q1
});

In your example, the selector still wasn't correct. On line 23 length had a typo, and .length() tells JavaScript to execute that function, not return the value. It should be just .length.

 

Here's a working fiddle.

0 0
replied on June 6, 2014 Show version history

The following will work:

 

$(document).ready(function() {
    
	var ar = new Array(20)
	ar[0] = "Nothing is as easy as it looks."
	ar[1] = "Everything takes longer than you think."
	ar[2] = "Anything that can go wrong will go wrong."
	ar[3] = "If there is a possibility of several things going wrong, the one that will cause the most damage will be the one to go wrong."
	ar[4] = "If there is a worse time for something to go wrong, it will happen then."
	ar[5] = "If anything simply cannot go wrong, it will anyway."
	ar[6] = "If you perceive that there are four possible ways in which a procedure can go wrong, and circumvent these, then a fifth way, unprepared for, will promptly develop."
	ar[7] = "Left to themselves, things tend to go from bad to worse."
	ar[8] = "If everything seems to be going well, you have obviously overlooked something."
	ar[9] = "Nature always sides with the hidden flaw."
	ar[10] = "Mother nature is a bitch."
	ar[11] = "It is impossible to make anything foolproof because fools are so ingenious."
	ar[12] = "Whenever you set out to do something, something else must be done first."
	ar[13] = "Every solution breeds new problems."
	ar[14] = "Trust everybody ... then cut the cards."
	ar[15] = "Two wrongs are only the beginning."
	ar[16] = "If at first you don't succeed, destroy all evidence that you tried."
	ar[17] = "To succeed in politics, it is often necessary to rise above your principles."
	ar[18] = "Exceptions prove the rule ... and wreck the budget."
	ar[19] = "Success always occurs in private, and failure in full view."
    
    var output = Math.floor((Math.random() * ar.length));
  	$('#q1 textarea').val(ar[output]);
});

A few notes:

 

#q1 input is correct if you're targeting a single line field. #q1 is the identifier for the field container, not the input box (inside the field container). Take a look at this help page for more about selectors.

 

If you're using a multi-line field, you'd use textarea instead of input, because this field uses a textarea HTML element instead of an input element.

 

 

0 0
replied on June 6, 2014

Thank you again! I've only ever used input I guess so I had no idea about the change. 

0 0
replied on June 6, 2014

You're welcome! It can be tricky, since most of the other fields contain input boxes. Only multi-line fields use textareas.

0 0
replied on June 6, 2014

Okay so If I want the multi line box to be all the way to the left as in, where the label is, how do I do that. I've tried editing the label class and text box class to no avail?

0 0
replied on June 6, 2014

So you want the label to go on top of the field instead of to the left?

 

On the Edit page in the Form Designer, click the Form Settings button. Next to Label alignment, select Top.

0 0
replied on June 9, 2014 Show version history

Awesome, is there a way to center it with css also?

 

Update: I got it, thanks for all your help!

0 0
replied on June 9, 2014

Okay, I'm sorry for dragging this out but I just keep running into questions.

 

Lets say I want to put a random image in dependent on which question is selected.

 

So I got the following:

  var ar = new Array( 12 )
  ar[0] = "You just moved out of a place you were renting & you had put down a deposit. How long does the landlord have to return your deposit?"
  ar[1] = "If you were a super hero what powers would you have?"
  ar[2] = "What would you do if you won the lottery?"
  ar[3] = "Can you solve a rubix cube?"
  ar[4] = "Are you a good cook?"
  ar[5] = "Whats the furthest you've ever been on holiday?"
  ar[6] = "If you could go back in time to change one thing what would it be?"
  ar[7] = "Do you prefer towel drying, blow drying or natural dryin your hair?"
  ar[8] = "If you could live anywhere, where would that be?"
  ar[9] = "What do you typically have for breakfast?"
  ar[10] = "Have you ever been in a newspaper?"
  ar[11] = "How long can you balance on one foot?"
  
  var ar2 = new Array( 12 )
  ar[0] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[1] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[2] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[3] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[4] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[5] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[6] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[7] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[8] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[9] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[10] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  ar[11] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"'
  
    
  var output = Math.floor(( Math.random () * 12 ))
  $( '#q12 textarea' ).val( ar [output] )
  $('#q12 textarea').attr('readonly', 'True')
  $( '#q10 input' ).val( ar2 [output] )

Obviously it doesnt work, but is there a way to get something like this to work? q10 is an html field.

0 0
APPROVED ANSWER SELECTED ANSWER
replied on June 9, 2014

If the two arrays are different sizes, it's best to use two variables here. You'll also want to ensure you're using valid HTML.

 

Try something like this:

 

$(document).ready(function () {

    var ar = new Array(20)
    ar[0] = "Nothing is as easy as it looks."
    ar[1] = "Everything takes longer than you think."
    ar[2] = "Anything that can go wrong will go wrong."
    ar[3] = "If there is a possibility of several things going wrong, the one that will cause the most damage will be the one to go wrong."
    ar[4] = "If there is a worse time for something to go wrong, it will happen then."
    ar[5] = "If anything simply cannot go wrong, it will anyway."
    ar[6] = "If you perceive that there are four possible ways in which a procedure can go wrong, and circumvent these, then a fifth way, unprepared for, will promptly develop."
    ar[7] = "Left to themselves, things tend to go from bad to worse."
    ar[8] = "If everything seems to be going well, you have obviously overlooked something."
    ar[9] = "Nature always sides with the hidden flaw."
    ar[10] = "Mother nature is a bitch."
    ar[11] = "It is impossible to make anything foolproof because fools are so ingenious."
    ar[12] = "Whenever you set out to do something, something else must be done first."
    ar[13] = "Every solution breeds new problems."
    ar[14] = "Trust everybody ... then cut the cards."
    ar[15] = "Two wrongs are only the beginning."
    ar[16] = "If at first you don't succeed, destroy all evidence that you tried."
    ar[17] = "To succeed in politics, it is often necessary to rise above your principles."
    ar[18] = "Exceptions prove the rule ... and wreck the budget."
    ar[19] = "Success always occurs in private, and failure in full view."

    var ar2 = new Array(12)
    ar2[0] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[1] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[2] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[3] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[4] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[5] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[6] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[7] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[8] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[9] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'
    ar2[10] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-2.jpg"/>'
    ar2[11] = '<img src = "http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg"/>'


    var output = Math.floor((Math.random() * ar.length));
    var output2 = Math.floor((Math.random() * ar2.length));
    $('#q12 textarea').val(ar[output]);
    $(ar2[output2]).insertAfter('#q12');
});

 

0 0
replied on June 10, 2014 Show version history

Does a text area pick up html code or does it just pick it up as another string?

I guess I'm not trying to randomize a picture and randomize the string displayed. I wanted to have the picture related to the string displayed. So if ar[2] = "anything that can grow will grow" I would have ar2[2] = some picture related to growing or if ar[5] = "If anything simply cannot go wrong it will anyways" ar2[5] = picture related to something bad happening and so on and so forth.

 

I attached a picture to show my setup. #q17 is the html input area.

Untitled.jpg
Untitled.jpg (254.6 KB)
0 0
replied on June 10, 2014

You can't add images to fields that way. Instead you add a line like this after you generate the randomized text:

 

$(ar2[output]).insertAfter('#q10');

 

0 0
replied on June 10, 2014

Got it! Do you have any good javascript references that might help me in the future?

I believe this post should be finished also!

0 0
replied on June 10, 2014

The Forms help has a few articles that might be interesting to you, like this one.

 

The jQuery documentation is very good, and you can find a lot of general coding advice on sites like Stack Overflow.
 

2 0
replied on June 10, 2014

In addition to the fine resources that Eric mentions, I've also gotten a fair amount of use out of the resources at the Mozilla Developer Network, here.

0 0
replied on June 10, 2014

Awesome, thanks guys!

0 0
replied on June 6, 2014 Show version history

The problem is probably your "#q1 input" selector.

 

Also note that you will always pull a quote from the first half of your array.  Use ar.length instead of 10 so that your range is automatically adjusted.

0 0
replied on June 6, 2014 Show version history

That code works for me. Check your selector on line 26 to make sure you're targeting the right field. If you want to populate a multi-line field, replace input with textarea in your selector.

0 0
replied on June 6, 2014

Change the selector to just:

$('#q1').val(ar[output]);

The reason is that you are already telling it to get the element id #q1. Looking for input is redundant because there is supposed to only be one #q1. I think it works if you mix classes and element names.

replied on June 6, 2014

Changing the selector to textarea still did not work either. 

0 0
replied on June 6, 2014
  • What type of field are you filling?
  • What is the identifier for the field, as shown on the CSS and JavaScript page in the preview?
You are not allowed to follow up in this post.

Sign in to reply to this post.