Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    182
    Thanks
    139
    Thanked 0 Times in 0 Posts

    Pure Javascript Equivalent to jQuery

    Hello,

    I need your help,

    What would be the pure/vanilla javascript (jQueryless) version of the below function?

    Code:
    $(':text').keyup(function() {
        if($('#first_name').val() != "" && $('#second_name').val() != "") {
           $('#submit').removeAttr('disabled');
        } else {
           $('#submit').attr('disabled', true);   
        }
    });

  • #2
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    0
    Thanked 11 Times in 11 Posts

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    And he even got an answer, despite the draconian rules at StackOverflow.
    Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results.
    Good thing we don't have a rule like that here or about 2/3rds of the questions would never get answered.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    the code is shorter using modern javascript than with old-school jQuery:

    Code:
    [].slice.call(document.querySelectorAll("input[type='text']"))
     .map(function(elm){
       elm.onkeyup= function() {
        submit.disabled= !(first_name.value && second_name.value)
       };
    });
    i know it's a duplicate question but i don't mind the opportunity to show that jQuery is obsolete...
    Last edited by rnd me; 09-28-2013 at 07:33 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    jason_kelly (09-30-2013)

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,215
    Thanks
    12
    Thanked 338 Times in 334 Posts
    PHP Code:
    [].map(function(elm){
       
    elm.onkeyup= function() {
        
    submit.disabled= !(first_name.value && second_name.value)
       };
    }, 
    document.querySelectorAll("input[type='text']")); 
    should also work.

    but i don't mind the opportunity to show that jQuery is obsolete...
    I wouldn’t call it obsolete, just "useful in some circumstances".
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    jason_kelly (09-30-2013)

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    I don't see what is wrong with


    Code:
    FN <input type = "text" id ="firstname">
    LN <input type = "text" id ="lastname"><br><br>
    <input type = "button" value = "Submit" id ="submit" disabled = true>
    
    <script type = "text/javascript">
    
    var first = document.getElementById('firstname');
    var second = document.getElementById('lastname');
    first.onkeyup = second.onkeyup = function() {
    document.getElementById('submit').disabled = !(first.value && second.value);
    }
    
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jason_kelly (09-30-2013)

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,215
    Thanks
    12
    Thanked 338 Times in 334 Posts
    I don't see what is wrong with
    the keyup event is defined on all text boxes, not just on the firstname/lastname fields.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    jason_kelly (09-30-2013)

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by Dormilich View Post
    the keyup event is defined on all text boxes, not just on the firstname/lastname fields.
    Huh?

    first.onkeyup = second.onkeyup = function() {

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jason_kelly (09-30-2013)

  • #9
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,215
    Thanks
    12
    Thanked 338 Times in 334 Posts
    these are just two. there is no mention in the OP that these are the only ones.

    though admittedly, this more and more becomes a discussion about how to design the logic, rather than to compare vanilla JS vs. jQuery. if we’re going that far, then we should rather hook into the submit event and check then, whether all required information is given (keyup is IMO a little overboarding if we just want to make sure these two fields are filled).
    Last edited by Dormilich; 09-28-2013 at 06:29 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    jason_kelly (09-30-2013)

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by Dormilich View Post
    these are just two. there is no mention in the OP that these are the only ones.

    though admittedly, this more and more becomes a discussion about how to design the logic, rather than to compare vanilla JS vs. jQuery. if we’re going that far, then we should rather hook into the submit event and check then, whether all required information is given (keyup is IMO a little overboarding if we just want to make sure these two fields are filled).
    This is not very good as a method of validation. There is no check as things stand that whatever is entered into the fields makes sense - a space is enough.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jason_kelly (09-30-2013)

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Philip M View Post
    I don't see what is wrong with


    Code:
    var first = document.getElementById('firstname');
    var second = document.getElementById('lastname');
    first.onkeyup = second.onkeyup = function() {
    document.getElementById('submit').disabled = !(first.value && second.value);
    }
    nothing really, it works i'm sure.

    what i psoted was to provide the OP with an equivalent. the code above leaves behind globals and requires editing the javascript in order to add more text inputs to the binding. making it functional solves the global problem while behaving more "jQuery-like".

    I fully admit that there is still undesirable hard-coding in the code i posted, but that was in attempt remain true to the form of the original...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    jason_kelly (09-30-2013)

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Dormilich View Post
    PHP Code:
    [].map(function(elm){
       
    elm.onkeyup= function() {
        
    submit.disabled= !(first_name.value && second_name.value)
       };
    }, 
    document.querySelectorAll("input[type='text']")); 
    should also work.
    i don't think that works.
    perhaps you were going for:
    Code:
    [].map.call(document.querySelectorAll("input[type='text']"), function(elm){
       elm.onkeyup= function() {
        submit.disabled= !(first_name.value && second_name.value)
       };
    });
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    jason_kelly (09-30-2013)

  • #13
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,215
    Thanks
    12
    Thanked 338 Times in 334 Posts
    i don't think that works.
    MDN quotes map() to be a generic function as Array.map(callback [, thisArg ]).
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    jason_kelly (09-30-2013)

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    Well, see, there is your problem. You are just inexperienced. <grin/>

    I can remember a handful of CPUs in the past that have had obscure logic errors in their built-in circuitry. One of the early x86 chips had an error in its floating point unit that I remember coding around. And I remember working on a 4-bit machine where you couldn't do a branch across a page boundary if the first byte of the branch instruction was in the last byte of the current page. And...

    But, of course, those experiences go back 40 years, not just 10 years.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Dormilich View Post
    MDN quotes map() to be a generic function as Array.map(callback [, thisArg ]).
    sure, but Array !== [] and [] does not inherit from Array, it inherits from Array.prototype...

    if in doubt, just try it...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    jason_kelly (09-30-2013)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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