Any script for number selection limiter (see example)

[hackarena]

I was searching for a script for a number selection and i came across one at dynamic drive http://www.dynamicdrive.com/dynamicindex12/lottery.htm

Please I want to know if anyone hav any script for number selection that can limit the number a user could select in an input field.

e.g say the following are input fields [_] [_] [_] [_] [_] [_]

Above illustration is an input field which a user needs to select 6 numbers ranging from 1-20.

Now I want to know if I can find any script that will disallow a user from typing a number exceeding 20.

Thanks for your help.

[ApacheTech]

I'd do it client side with a javascript validation function.

function validateNumberEntry(e) {
    var MAX_VAL = 20;    // Change maximum number here.
    var MIN_VAL = 1;      // Change minimum number here.

    var el = getElementById(e);
    var v = el.value;

    if (isNumber(v)) {
        if (v<MIN_VAL||v>MAX_VAL) {
            el.value = '';
            alert('Invalid Input. Valid number range is ' + MIN_VAL + ' through' + MAX_VAL);
        }
    } else {
        el.value = '';
        alert('Invalid Input. Valid number range is ' + MIN_VAL + ' through' + MAX_VAL);
    }
}

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
} 

Then use the HTML5 element.oninput event to call the function.

<input type="text" id="lot1" name="lot1" oninput="validateNumberEntry(lot1);"></input>

<input type="text" id="lot2" name="lot2" oninput="validateNumberEntry(lot2);"></input>

<input type="text" id="lot3" name="lot3" oninput="validateNumberEntry(lot3);"></input>

<input type="text" id="lot4" name="lot4" oninput="validateNumberEntry(lot4);"></input>

<input type="text" id="lot5" name="lot5" oninput="validateNumberEntry(lot5);"></input>

<input type="text" id="lot6" name="lot6" oninput="validateNumberEntry(lot6);"></input>

This way, you validate the input client side, before the form is POSTed; no callback is needed to alert the user to invalid entries.

Make sure you revalidate your values within the page you POST to though, before using them.

[hackarena]

I'd do it client side with a javascript validation function.

function validateNumberEntry(e) {
    var MAX_VAL = 20;    // Change maximum number here.
    var MIN_VAL = 1;      // Change minimum number here.

    var el = getElementById(e);
    var v = el.value;

    if (isNumber(v)) {
        if (v<MIN_VAL||v>MAX_VAL) {
            el.value = '';
            alert('Invalid Input. Valid number range is ' + MIN_VAL + ' through' + MAX_VAL);
        }
    } else {
        el.value = '';
        alert('Invalid Input. Valid number range is ' + MIN_VAL + ' through' + MAX_VAL);
    }
}

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
} 

Then use the HTML5 element.oninput event to call the function.

<input type="text" id="lot1" name="lot1" oninput="validateNumberEntry(lot1);"></input>

<input type="text" id="lot2" name="lot2" oninput="validateNumberEntry(lot2);"></input>

<input type="text" id="lot3" name="lot3" oninput="validateNumberEntry(lot3);"></input>

<input type="text" id="lot4" name="lot4" oninput="validateNumberEntry(lot4);"></input>

<input type="text" id="lot5" name="lot5" oninput="validateNumberEntry(lot5);"></input>

<input type="text" id="lot6" name="lot6" oninput="validateNumberEntry(lot6);"></input>

This way, you validate the input client side, before the form is POSTed; no callback is needed to alert the user to invalid entries.

Make sure you revalidate your values within the page you POST to though, before using them.

Thanks for answering me. I will try that out now.

Please i forgot to include this;

Is it possible to disallow repeating number i.e [1] [2] [3] [4] [5] [3]

You can see in the form above that 3 repeated.

So can you include a function in the php side that will disallow such?

[ApacheTech]

There's two ways you could do it. The first is slightly long winded...

if (isNumber(v) && (v == lot2.value || v == lot3.value || v ==...)) { ... } 

With this method you validate each v against all the other entries values if it matches bring up an error as before.

The second method is slightly more elegant but requires a working understanding of arrays. I'm more familiar with this method in VB.NET than in javascript, but the idea is:

1. Create an empty one dimensional array
2. When user confirms 1st number, add the 1st validated value.
3. When user confirms 2nd number, check to see if the 2nd value you want to store is already in the array.
4. If not, add 2nd validated value else display an error and reset value
5. Repeat steps 3 and 4 for the remaining values in turn.

Remember to be careful of stack overflow exploits etc. Keep the scope of the array within the function and cap the array at declaration.

[hackarena]

How do i get the value of checkboxes into a text area immediately the user checks the box.

i.e if 4 is checked, it will be transferred imediately to the first text area and the second checked follows.


e.g; (*)1 ()2 ()3 (*)4 ()5 (*)6 =>> here 6,4,1 have been selected.

[6] [4] [1] [] [] [] =>> here it goes into the text area immediately.

[keyboard1333]

You could do this with a bit of javascript though. If you did want to use javascript - do you only want each number to appear once in the text field?

 <html>
 <head>
 <script type="text/javascript">
 function insert(elem) {
 var text1 = document.getElementById('text1');
 if(text1.value == "") {
 text1.value = elem.value;
 elem.disabled = "true";
 } else {
 text1.value = text1.value + " " + elem.value;
 elem.disabled = "true";
 }
 }
 </script>
 </head>
 <body>
 Check 1 <input type="checkbox" id="check1" value="1" onclick="insert(this)" /><br />
 Check 2 <input type="checkbox" id="check2" value="2" onclick="insert(this)" /><br />
 Check 3 <input type="checkbox" id="check3" value="3" onclick="insert(this)" /><br />
 Check 4 <input type="checkbox" id="check4" value="4" onclick="insert(this)" /><br />
 Check 5 <input type="checkbox" id="check5" value="5" onclick="insert(this)" /><br />
 Check 6 <input type="checkbox" id="check6" value="6" onclick="insert(this)" /><br />
 Text 1  <input type="text" id="text1">
 </body>
 </html>

[hackarena]

You could do this with a bit of javascript though. If you did want to use javascript - do you only want each number to appear once in the text field?

 <html>
 <head>
 <script type="text/javascript">
 function insert(elem) {
 var text1 = document.getElementById('text1');
 if(text1.value == "") {
 text1.value = elem.value;
 elem.disabled = "true";
 } else {
 text1.value = text1.value + " " + elem.value;
 elem.disabled = "true";
 }
 }
 </script>
 </head>
 <body>
 Check 1 <input type="checkbox" id="check1" value="1" onclick="insert(this)" /><br />
 Check 2 <input type="checkbox" id="check2" value="2" onclick="insert(this)" /><br />
 Check 3 <input type="checkbox" id="check3" value="3" onclick="insert(this)" /><br />
 Check 4 <input type="checkbox" id="check4" value="4" onclick="insert(this)" /><br />
 Check 5 <input type="checkbox" id="check5" value="5" onclick="insert(this)" /><br />
 Check 6 <input type="checkbox" id="check6" value="6" onclick="insert(this)" /><br />
 Text 1  <input type="text" id="text1">
 </body>
 </html>

Here is a screenshot of what i meant.

If it is unchecked, it also goes away from the text area as illustrated in the second screenshot.

[ApacheTech]

Have you thought about achieving this effect with six drop down boxes? You could have only the first ddb active to start and when the first value is chosen, it triggers the second ddb to be enabled and removes the first ddb's selected value from the second ddb's list. Rinse and repeat up to six.

Or have one DropDownBox and a confirm button. The confirm button updates a label (not a textbox, as they are user editable) to display the chosen numbers and removes the selected value from the DDB's list, therefore the same numbers cannot be chosen twice. This method self validates the values so you wouldn't need to do all the complicated checks for validation. Another button saying "Reset" would re-add the the chosen values to the DDB's list and clear the label, allowing a fresh set of numbers to be chosen.

[ApacheTech]

Here's a StepWise for my preferred method:

• OnPageLoad:
  * Fill ddbLotteryNumbers with values from 1 to 40.
  * Disable btnSubmit if enabled.

• ddbLotteryNumbers - DropDownBox (ComboBox)
  Description: Displays numbers from 1 to 40 in numerical order.
  OnSelect:
  * Selects the value for the chosen number.

• btnConfirmNumber - Button
  Description: Button to confirm a single chosen lottery number.
  OnClick:
  * Amends strLotteryNumbers with selected value from ddbLotteryNumbers, delineated with a single whitespace.
  * Removes the selected value from ddbLotteryNumbers's list, to save repetition.
  * Once six numbers have been confirmed, enable btnSubmit.

• btnSubmit - Button
  Description: A button to confirm all six lottery numbers and send them to the next form.
  OnClick:
  * Explode strLotteryNumbers into an array, delineated by a single whitespace.
  * Pass the array to the next form and doSomething() with it. (End of page script).

• btnReset - Button
  Description: A button to reset the currently selected lottery numbers.
  OnClick:
  * Resets ddbLotteryNumbers to it's default values.
  * Sets strLotteryNumbers to an empty string.
  * Disable btnSubmit if enabled.

• strLotteryNumbers - Label / String
  Description: A string to be formatted and displayed on the page to show the user which numbers they have chosen. This will also be used to form an array to be passed to the next form.

[hackarena]

This is a good one thanks