By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,963 Members | 2,016 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,963 IT Pros & Developers. It's quick & easy.

pass a html textbox value as an js argument

100+
P: 153
Hi all,

Been struggling with this for days now and could do with a bit of closure!

I want to pass this value

Expand|Select|Wrap|Line Numbers
  1.  
  2.     <INPUT TYPE = "text" NAME = "ballsToDrawTextBox" SIZE = "1" MAXLENGTH = "1" >
  3.  
as an argument for this function
Expand|Select|Wrap|Line Numbers
  1. ONCLICK = "lotteryDraw(document.lotteryForm.ballsToDrawTextBox.value)">
  2.  
  3.  
Help, I can't get it to work, is just my syntax?

Regards
Apr 15 '09 #1
Share this Question
Share on Google+
15 Replies


Dormilich
Expert Mod 5K+
P: 8,639
is the input value in lotteryDraw() passed correctly?
Apr 15 '09 #2

100+
P: 153
hi Dormillich

no it's not
Apr 15 '09 #3

Dormilich
Expert Mod 5K+
P: 8,639
try getting the value inside the function (not as parameter).
Apr 15 '09 #4

hsriat
Expert 100+
P: 1,654
@brendanmcdonagh
Post the complete code between the <form> tags. Then it would be easier.
Apr 15 '09 #5

100+
P: 153
Hi,
here is the full code for the form. I have to do it by just modifying the event handler (onclick) it's for Uni. The thing I need to learn by this question is this - How do you assign what is inputted in a textbox to a js variable to then pass as an argument for a function?
As you can see by the onclick in this code - I have tried many ways!

Regards

Expand|Select|Wrap|Line Numbers
  1. <FORM NAME = "lotteryForm">
  2.     <P>
  3.     Total Number of Balls in Pool:
  4.     </P>
  5.     <P>
  6.     <INPUT TYPE = "text" NAME = "numberOfBallsTextBox"  SIZE ="2" MAXLENGTH = "2">
  7.     </P>
  8.     <P>
  9.     Number of Balls to Draw:
  10.     </P>
  11.     <P>
  12.     <!-- Note the SIZE attribute, whose value determines the size in characters of a text box and
  13.     the MAXLENGTH attribute, whose value constrains the length in characters of the allowed input -->
  14.     <INPUT TYPE = "text" NAME = "ballsToDrawTextBox" SIZE = "1" MAXLENGTH = "1" >
  15.     </P>
  16.  
  17.  
  18.     <!-- The RESET input type creates a button which, when clicked, resets a form to its original state -->
  19.     <INPUT TYPE = "reset" NAME = "resetButton" VALUE = "Clear Form">
  20.  
  21.     <!-- COMPLETE THE ONCLICK EVENT HANDLER TO INVOKE lotteryDraw() WITH ARGUMENTS TAKEN FROM THE FORM INPUT TEXT BOXES -->
  22.     <INPUT TYPE = "button" NAME = "drawBalls"  VALUE ="Draw the Balls!"
  23.                     ONCLICK = " var first = document.lotteryForm.ballsToDrawTextBox.value, var second = document.lotteryForm.numberOfBallsTextBox.value, lotteryDraw(first, second)">
  24.  
  25.     <P>
  26.     Drawn Numbers:
  27.     </P>
  28.     <P>
  29.     <INPUT TYPE = "text" NAME = "drawnNumbersTextBox" SIZE = "30" MAXLENGTH = "30" >
  30.     </P>
  31.  
  32.     </FORM>
Apr 15 '09 #6

Dormilich
Expert Mod 5K+
P: 8,639
if you replace the (first 2) commas in line 23 by semicolons, your code should work.

nevertheless there's room for improvement:
- for such a special function it is convenient to get the parameters inside the function
Expand|Select|Wrap|Line Numbers
  1. function myFunction()
  2. {
  3.     var x = document.getElementById();
  4.     // code using x
  5. }
- the use of event handlers removes the need of onevent attributes, making for a cleaner HTML code
Expand|Select|Wrap|Line Numbers
  1. document.getElementById().addEventListener(event_type, myFunction, false);
  2. // cross-browser support => addEvent() => google
Apr 16 '09 #7

100+
P: 153
Thanks Dormillich

When I put the ;
Expand|Select|Wrap|Line Numbers
  1. in ONCLICK = " var first = 
  2.  
  3. document.lotteryForm.ballsToDrawTextBox.text; var second = 
  4.  
  5. document.lotteryForm.numberOfBalls.text; lotteryDraw(first, second);">
  6.  
When i click, I'm getting a script error document.lotteryForm.numberOfBalls.text is not null or an object and the same for the other 2 text boxes.

I appreciate you trying to help me (as always!) and hope you can understand this is the way i'm required to do it.

here''s the function

Expand|Select|Wrap|Line Numbers
  1. function lotteryDraw(highBall, numberToDraw)
  2.     {
  3.  
  4.         var numberPool = new Array(highBall);
  5.  
  6.  
  7.         var sizeOfPool = highBall;
  8.  
  9.  
  10.         var drawnNumbers = new Array(numberToDraw);
  11.  
  12.  
  13.         for (var index = 0; index < highBall; index = index + 1)
  14.         {    
  15.             //creates an array of all possible numbers that can be drawn
  16.             numberPool[index] = index + 1; 
  17.         }
  18.  
  19.  
  20.         for (var drawnBall = 0; drawnBall < numberToDraw; drawnBall = drawnBall + 1)
  21.         {
  22.             //each loop a random number between 0 and highBall is returned by     
  23.  
  24.         //invoking getRandomNumber() . Then this number is removed from         
  25.  
  26.     //array to ensure no duplicates.
  27.  
  28.             var randomNumber = getRandomNumber(sizeOfPool);
  29.  
  30.             drawnNumbers[drawnBall] = numberPool[randomNumber];
  31.  
  32.             numberPool[randomNumber] = numberPool[sizeOfPool - 1];
  33.  
  34.             sizeOfPool = sizeOfPool - 1;
  35.         }
  36.         //Output containing the defined (in argument) amount of random integers     
  37.  
  38.     //within defined range.
  39.  
  40.         lotteryForm.drawnNumbersTextBox.value = drawnNumbers;
  41.       }
  42.  
Apr 16 '09 #8

Dormilich
Expert Mod 5K+
P: 8,639
why did you change document.lotteryForm.numberOfBalls.value in document.lotteryForm.numberOfBalls.text?
Apr 16 '09 #9

Dormilich
Expert Mod 5K+
P: 8,639
spoiler: fill array with values using while()
Expand|Select|Wrap|Line Numbers
  1. var i=0, myArray = []; // [] is the same as Array()
  2. while (i < length) { myArray.push(++i); }
  3. // or
  4. var i = 1, myArray = [];
  5. while (i <= length) { myArray.push(i++); }
more array functions here
Apr 16 '09 #10

100+
P: 153
I did try it with .value but just tried it again and it worked! thank you so much. It was only worth 2 marks but wanted to know how to do what I deemed simple.

Here is working code
Expand|Select|Wrap|Line Numbers
  1. <INPUT TYPE = "button" NAME = "drawBalls"  VALUE ="Draw the Balls!" 
  2.                     ONCLICK = " var first = document.lotteryForm.ballsToDrawTextBox.value; 
  3.  
  4. var second = document.lotteryForm.numberOfBallsTextBox.value; lotteryDraw(second, first)">
  5.  
I didn't do the function Dormillich but will remember your tip on how to fill array.
Apr 16 '09 #11

Dormilich
Expert Mod 5K+
P: 8,639
the path to enlightenment is a steep one.

once you realized that everything in Javascript is an object (and you know some OOP) then this language becomes easy and beautiful.

so all the best for your next project
Apr 16 '09 #12

Dormilich
Expert Mod 5K+
P: 8,639
I'm just in the mood for the following
Expand|Select|Wrap|Line Numbers
  1. Array.prototype.fill = function(start, end)
  2. {
  3.     if (typeof start != "number" || typeof end != "number")
  4.         throw new TypeError();
  5.  
  6.     while (start <= end)
  7.     {
  8.         this.push(start++);
  9.     }
  10.     return this.length;
  11. }
use it like
Expand|Select|Wrap|Line Numbers
  1. var myArray = [];
  2. myArray.fill(2, 7); // fills myArray with the numbers from 2 to 7
Apr 16 '09 #13

P: 16
Hi im also working on this and after finishing the other part (thanks for your help) I find myself stuck again with this even though he has posted "the working code" I cant get it to work
May 8 '09 #14

gits
Expert Mod 5K+
P: 5,390
what don't you get to work? please show the code you use.

kind regards
May 8 '09 #15

P: 16
It's ok I worked through it and found the problem, cheers anyway, I'm sure I'll need your help again soon enough lol
May 8 '09 #16

Post your reply

Sign in to post your reply or Sign up for a free account.