Results 1 to 10 of 10

Thread: Any script for number selection limiter (see example)

  1. #1
    Join Date
    Apr 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Any script for number selection limiter (see example)

    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.

  2. #2
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

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

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

        
    var el getElementById(e);
        var 
    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.

    HTML Code:
    <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.

  3. #3
    Join Date
    Apr 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ApacheTech View Post
    I'd do it client side with a javascript validation function.

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

        
    var el getElementById(e);
        var 
    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.

    HTML Code:
    <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?

  4. #4
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

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

    PHP Code:
    if (isNumber(v) && (== lot2.value || == lot3.value || ==...)) { ... } 
    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.

  5. #5
    Join Date
    Apr 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to return values of check box into text area

    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.

  6. #6
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,529
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    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?

    Code:
     <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>
    Last edited by keyboard; 04-22-2012 at 10:00 PM.

  7. #7
    Join Date
    Apr 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by keyboard1333 View Post
    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?

    Code:
     <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.

  8. #8
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    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.

  9. #9
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    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.

  10. #10
    Join Date
    Apr 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is a good one thanks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •