SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post I can't add space

    Hi, I need some help how can i add space if i will input numbers in textfield,I want that if the user will input 888 it will add space directly after the last 8 then if he will continue to add 4 digits 5555 it will add space after the last digit 5,can you help me please how can i achieve this.

    my code is not working.

    Code:
     $(function(){
                 $('#txtno').keyup(function(e){
                     e.preventDefault();
                    var counter = 0;
                    var dgt = $(this).val();
                      if(counter == '3'){
                        
                        dgt = $(this).val() + " ";
                      }else if(counter == '7'){
                         dgt = $(this).val() + " ";
                      }
                      else{
                          dgt = $(this).val();
                      }
    
                    $(this).val(dgt);
                    counter++;
                  });
               });

    Thank you in advance.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Having read your code, it might be better to first take a step back and tell us what you are trying to achieve.

    Obviously the user should input something, but what are the possible permutations?
    Is text allowed, are numbers allowed?
    What is it that the user is inputting? A serial number?

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, a user will input mobile numbers and the format something like this 888 9256 269.

    Hope this helps.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hey jemz,

    So which characters are allowed in a mobile number on your page?
    As an average user, I would expect to be able to enter:

    Code:
    + - ( ) 1 2 3 4 5 6 7 8 9 0
    What do you think?

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hey jemz,

    So which characters are allowed in a mobile number on your page?
    As an average user, I would expect to be able to enter:

    Code:
    + - ( ) 1 2 3 4 5 6 7 8 9 0
    What do you think?
    Hi pullo,

    only this
    1 2 3 4 5 6 7 8 9 0
    will be allowed,but if the user will input zero digit in the begining, this will not be allowed or will be disregard

    Thank you in advance.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Ok, so how long may the number be?
    And where do you want spaces inserted?

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ok, so how long may the number be?
    And where do you want spaces inserted?
    10 digits only

    where do you want spaces inserted?
    Okay so if the user will input this mobile numbers.

    8569236987

    The spaces will be inserted on this

    Code:
    856space9236space987
    hope this helps.

    Thank you in advance.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Ok, well this should demonstrate the basic concept:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Validate phone number</title>
      </head>
      
      <body>
        <input type="text" id="mobileNo" maxlength="12" placeholder="Mobile number"/>
        
    
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script>
          String.prototype.insertAt=function(index, string) { 
            return this.substr(0, index) + string + this.substr(index);
          }  
            
          function digitPressed(event){
            var keyPressAcceptable = false;
            // Allow: backspace, delete, tab, escape, and enter
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
              // Allow: Ctrl+A
              (event.keyCode == 65 && event.ctrlKey === true) || 
              // Allow: home, end, left, right
              (event.keyCode >= 35 && event.keyCode <= 39) || 
              // Allow: 0 - 9
              (event.keyCode >= 48 && event.keyCode <= 57)) {
              // let it happen, don't do anything
              keyPressAcceptable = true;
            }
            return keyPressAcceptable;
          }
          
          function formatNumber(el){
            var newValue = el.val().replace(/\s+/g, '');
            if (newValue.length > 3){
              newValue = newValue.insertAt(3, " ");
            }
            if (newValue.length > 8){
              newValue = newValue.insertAt(8, " ");
            }
            el.val(newValue);
          }
          
          $("#mobileNo").keydown(function(event) {
            if (! digitPressed(event)){
              event.preventDefault();
            }
          });
          
          $("#mobileNo").keyup(function(event) {
            formatNumber($(this));
          });
        </script>
      </body>
    </html>
    Any questions, let me know.

    References:
    http://stackoverflow.com/questions/4...another-string
    http://stackoverflow.com/questions/9...x-using-jquery

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post

    Hi pullo, Thank you for helping me,it works like a charm

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    No problems!

    If the format is very important to you, don't forget to check it on the server, too, as someone with JS disabled could easily negate this.

  11. #11
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post

    Hi pullo,
    Any questions, let me know.
    can i ask about this code
    String.prototype.insertAt=function(index, string) {
    return this.substr(0, index) + string + this.substr(index);
    }
    Thank you in advance.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Sure, well this:

    Code JavaScript:
    String.prototype.myFunction = function() {
      ...
    }

    is just a way of adding a function to the String class so that you so can use it on any String object.

    And this:

    Code JavaScript:
    return this.substr(0, n) + myVar + this.substr(n);

    concatenates the first n characters of a string, a variable and the remaining n characters of the string, then returns it.

    Is there one particular bit you don't understand?

  13. #13
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    is just a way of adding a function to the String class so that you so can use it on any String object.
    You mean you are making your own function for the Strings object ?

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo,

    don't forget to check it on the server
    I am submitting my form via jquer.ajax,and in my adduser.php i made some serverside validation with my fields if there is a problem or an error the returned in my ajax will alert the error message.my question for this is this still prawn to tampering even though the returned error came from my server side ?

    Code:
     var serializeform = $('#myform').serialize();
      $.ajax({
                         type: 'post',
                         data: serializeform,
                         url: "adduser.php",
                         success: function(data){
                          
                              if(data=="ok"){
                                  //some of my script here.
                              }
                             else
                               alert(data);
                          }
    
    
                      });

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    You mean you are making your own function for the Strings object ?
    Yes.

    For example, imagine you wanted to extend the String class by a function that determined whether a given string contained a vowel.
    You could do it like this:

    Code JavaScript:
    String.prototype.containsVowel = function() {
      return this.match(/[aeiouAEIOU]/);
    }
     
    if("Pfffttth!".containsVowel()){
      console.log("Vowel found!");
    } else {
      console.log("No vowels here. Move along!");
    }
     
    words = ["cat", "Dog", "rbbt", "fi$h", "xxxxxxxxxxx", "Pullo"];
     
    words.map( function(word) {
      if (word.containsVowel()){
        console.log("Vowel found in " + word);
      }
    });

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    my question for this is this still prawn to tampering even though the returned error came from my server side ?
    It's not prone to tampering if you check the input on the server.
    However, if you rely solely on JS to display the errors, then anyone with JS turned off won't know why their form didn't submit if they don't fill it out correctly.

  17. #17
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    It's not prone to tampering if you check the input on the server.
    However, if you rely solely on JS to display the errors, then anyone with JS turned off won't know why their form didn't submit if they don't fill it out correctly.

    Hi pullo, if the user will turn of the JS,what i want is that my server validation will take place,i mean it will prompt to the user so that the user will know there is an error in the form.,but i was worried my code because i am submitting the form through jquery.ajax,and i could not display the error message which is validated from the server..

    Thank you in advance.

  18. #18
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, I apologize ,i was not thinking that the JS is disabled and the user cannot submit the form...

  19. #19
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for helping me this thread

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    No probs.

    Just to elaborate on what I was saying though, in a perfect world you would create your form first and make sure that it submits properly.
    Then you would add the AJAX functionality on top of that.

    Here's an example.

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>AJAX form demo</title>
        <style>
          div{ padding:5px; margin:5px; }
          .required {color: red; font-weight: bold; }
        </style>
      </head>
      
      <body>
        <form action="index.php" method="post">
          <div>
            <label for="name"><span class="required">*</span> Name:</label>
            <input type="text" name="name" id="name" />
          </div>
          <div>
            <input value="Submit" name="submit" type="submit" />
          </div>
        </form>
        <div id="results"></div>
        
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $("input:submit").on("click", function(e){
            e.preventDefault();
            var name = $("#name").val();
              
            $.ajax({
              type : "POST",
              url : "index.php",
              data: {name: name},
              success : function(res) {
                $("#results").html(res);
              }
            });
          });
        </script>
      </body>
    </html>
    PHP Code:
    <?php
    $retVal 
    "";
    $name $_POST['name'];

    if (isset(
    $_SERVER['HTTP_X_REQUESTED_WITH'])){
      
    $retVal .= "<p>Form submitted via AJAX</p>";
    } else {
      
    $retVal .= "<p>Form submitted via POST</p>";
    }

    if (
    $name == ""){
      
    $retVal .= "<p>Name: left blank</p>";
      
    $retVal .= "<p>Please fill out your name and resubmit the form.</p>";
    } else {
      
    $retVal .= "<p>Name: " $name "</p>";
      
    $retVal .= "<p>Thank you for submitting the form, " $name ."!</p>";
    }

    echo 
    $retVal;
    ?>
    Here's a demo.
    The name field is required. Try submitting the form with and without JavaScript enabled.
    Both should work.

  21. #21
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    No probs.

    Just to elaborate on what I was saying though, in a perfect world you would create your form first and make sure that it submits properly.
    Then you would add the AJAX functionality on top of that.

    Here's an example.

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>AJAX form demo</title>
        <style>
          div{ padding:5px; margin:5px; }
          .required {color: red; font-weight: bold; }
        </style>
      </head>
      
      <body>
        <form action="index.php" method="post">
          <div>
            <label for="name"><span class="required">*</span> Name:</label>
            <input type="text" name="name" id="name" />
          </div>
          <div>
            <input value="Submit" name="submit" type="submit" />
          </div>
        </form>
        <div id="results"></div>
        
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $("input:submit").on("click", function(e){
            e.preventDefault();
            var name = $("#name").val();
              
            $.ajax({
              type : "POST",
              url : "index.php",
              data: {name: name},
              success : function(res) {
                $("#results").html(res);
              }
            });
          });
        </script>
      </body>
    </html>
    PHP Code:
    <?php
    $retVal 
    "";
    $name $_POST['name'];

    if (isset(
    $_SERVER['HTTP_X_REQUESTED_WITH'])){
      
    $retVal .= "<p>Form submitted via AJAX</p>";
    } else {
      
    $retVal .= "<p>Form submitted via POST</p>";
    }

    if (
    $name == ""){
      
    $retVal .= "<p>Name: left blank</p>";
      
    $retVal .= "<p>Please fill out your name and resubmit the form.</p>";
    } else {
      
    $retVal .= "<p>Name: " $name "</p>";
      
    $retVal .= "<p>Thank you for submitting the form, " $name ."!</p>";
    }

    echo 
    $retVal;
    ?>
    Here's a demo.
    The name field is required. Try submitting the form with and without JavaScript enabled.
    Both should work.
    Hi pullo i tried it and it works,i disabled the JS,..but i have still problem you are using $("input:submit") but my code here is i am getting the id of my submit,that's why i could not process the php script if the JS is disabled..do you have some idea ?or i need to recode and use this $("input:submit") ?

    Thank you in advance.

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Quote Originally Posted by jemz View Post
    you are using $("input:submit") but my code here is i am getting the id of my submit,that's why i could not process the php script if the JS is disabled..do you have some idea ?or i need to recode and use this $("input:submit") ?
    Sorry, that was left in the code from a previous experiment where I had two submit buttons.
    You could just as easily write $("#myForm").on("submit", function(){ ... }) or something like that.

    If you can post a code sample, I'm sure we'll be able to get it working with AJAX and without.

  23. #23
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, Can i ask about this part
    var newValue = el.val().replace(/\s+/g, '');

    Thank you in advance

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    That just strips all of the white space out of the string, so that the program can figure out where to reinsert the spaces.
    If you didn't have that it would start inserting double spaces and so on and things would get messy.

    Basically it transforms this "123 456 789" into this "123456789"

  25. #25
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you pullo


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
  •