CODEWITHSUNDEEP
javascriptjqueryhtml
Phil C.
Phil C.

Reputation: 114

Hide the password textbox and submit

This is a simple password checking function I messed around with for a little bit. I've tried a lot of different methods (including, but not limited to: .css(), .on('click'), .click(), .animate(), .show(), .hide(), .preventDefault() on the submit), put selectors into variables, moved around all sorts of IDs and $('input[name="s"]') and all sorts of selectors. Not sure if the function won't work, or maybe something else within the script. I've taken the function out of the $(document).ready() tree, and moved it all around inside of it. I'm sure that isn't the problem now, but I'm starting to not be sure about anything at this point.

I'm trying to get the function to hide the password textbox and submit(or is button better?) and show a textarea for news input, with a button to append the update.The appendedTo and .append() section works, but I can't seem to get the passwordcheck function to work. Sometimes it will alert me if it's wrong, but when it's right the if methods don't seem to work. Then I'll change it a few times and the alert will no longer show, nor will the if work any longer.

Any help would be appreciated, and I can provide any code snippets or chunks at request.

Function in question:

function passwordcheck() {
        var $newspass = $('#newspass');
        var $submitpass = $('#submitpass'); // <--- variables were at one point selectors
        var $newssubmit = $('#newssubmit');     //    written out, I've changed this a lot
        if ($newspass.val() === 'comecorrecT') {
                $submitpass.css('display', 'hidden');
                $newspass.css('display', 'hidden');
                $('#newsinput').css('display', 'block');
                $newssubmit.css('display', 'static');
        } else {
            alert("Try again, please.");

        }
    };

Rest of the script, for reference:

$(document).ready(function(){
// billboard functions
    var $billboard = $('.billboard');
    $billboard.mouseenter(function(){
        $(this).fadeTo('slow', 0.98);
        });
    $billboard.mouseleave(function(){
        $(this).fadeTo('slow', 0.72);
        });
    var $learn = $('#learn-more');
    $learn.hover(function(){
        $(this).fadeTo('slow', 1);
        }, 
    function() {
        $(this).fadeTo('slow', 0.6);
        });
// news and updates/appendedTo
    var $submitpass = $('#submitpass');
    var $newssubmit = $('#newssubmit');
    $submitpass.click(passwordcheck());
    $newssubmit.click(function(){
        $('#appendedTo').append('<div class="update">'+$('#newsinput').val()+'</div>');
// passwordcheck();
        });
    });

I've been working with it for a little while now, and I know you guys will have a profound explanation or two.

Upvotes: 3

Views: 133

Answers (2)

baao
baao

Reputation: 73211

The way you are doing it now, you are simply passing "undefined" instead of a function (which would be what the passwordcheck function returns) as you are calling the function instead of passing a reference to it in this line:

$submitpass.click(passwordcheck());

Which should be

$submitpass.click(passwordcheck);

In the last block of your code, after 

// news and updates/appendedTo

This being said, don't use client side JavaScript for authentication, the password you are checking against is visible for anyone using the site.

Upvotes: 3

Santhosh
Santhosh

Reputation: 89

Try this:

function passwordcheck() {
        var newspass = $('#newspass').val();
        var submitpass = $('#submitpass').val();
        var newssubmit = $('#newssubmit').val();
        if (newspass == 'comecorrecT') {
                $('#submitpass').hide();
                $('#newspass').hide();
                $('#newsinput').show();
        } else {
            alert("Try again, please.");

        }
    }

Upvotes: 0

Related Questions