asked on

What is the meaning of: username_check' : 1,

I'm trying to include a live test for unique email and name. The concept is to initially disable the submit button, and then re-initialize it if the credentials check-out to be unique. At this point clicking the submit button would initial the signup.php routines. Otherwise, the user would receive an error message to try again.

I have include the code "name_check' : 1," and "email_check' : 1," as ajax({ data arguments; because I've seen them in other code found online. But I don't understand what they mean: Is username_check a standard ajax function? I couldn't find any reference in the documentation. Does this code assign the value 1 to username_check?

$('document').ready(function(){

    let name_state = false;
    let email_state = false;

    $("input[type=submit]").attr('disabled','disabled');


    // Verify user name is unique in database
    //
    $('#name').on('blur', function(){
        let name = $('#name').val();
        if (name == '') {
            name_state = false;
            return;
        }
        $.ajax({
            url: 'check_credentials.php',
            type: 'post',
            data: {
                'username_check' : 1,
                'name' : name,
            });
            .done function(response){
                if (response == 'taken' ) {
                    name_state = false;
                } else if (response == 'not_taken') {
                    name_state = true;
                }
            }
        });
    });

    // Verify user email is unique in database
    //
    $('#email').on('blur', function(){
        var email = $('#email').val();
        if (email == '') {
            email_state = false;
            return;
        }
        $.ajax({
            url: 'check_credentials.php',
            type: 'post',
            data: {
                'email_check' : 1,
                'email' : email,
            });
            .done function(response){
                if (response == 'taken' ) {
                    email_state = false;
                } else if (response == 'not_taken') {
                    email_state = true;
                }
            }
        });
    });
    checkAll;
});

    function checkAll () {
         if((name_state && email_state)==true) {
          $("input[type=submit]").removeAttr('disabled');
         } else {
          $('#error-msg').html=("These credentials are already taken. Try again.");
         }
    }

Open in new window

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

I think Scott has covered this sufficiently - just going to add a few things.

There are no "specific" AJAX functions. AJAX is a strategy used in development - it does not come with a specific set of functions.
At the heart of every AJAX request is the XMLHttpRequest Object. The methods and properties on this object are all about initiating and responding to an asynch request.

Any data you send as part of the data: property on a jQuery.ajax() request is only what you want to see in your script. If you send email_check_1 then it should be because somewhere in your script you intend to use that value. If you are not using it in your script you are just using up bandwidth.

Some general comments on your code.
Line 6

 $("input[type=submit]").attr('disabled','disabled');

Open in new window

Two points
1. Learn the difference between attributes and properties. Attributes are the values that were specified on the element. Properties are the internal representation of those values.
From jQuery .prop()

Since jQuery 1.6, these properties can no longer be set with the .attr() method. They do not have corresponding attributes and are only properties. ... The .prop() method should be used to set disabled and checked instead of the .attr() method.

While .attr() CAN still be used to disable a control in light of the above it should be avoided
2. I don't know why you would use jQuery to disable the control on document load. If it needs to be disabled by default then simply give the control the disabled property in the HTML markup.

Next
line 3,4 and 12: let - this will have problems with older browsers (IE < 11) - just something to be aware of.

The [;] on line 23 concerns me - that should be throwing an error and your script should simply not work.

Be wary of online code - always use it to learn but bear in mind that the code you are seeing could
a) Be based on out of date thinking
b) Written by someone good at SEO but not so good at coding (the number of ads on the page is a good indication)
c) Both

dlearman1

ASKER

Scott... Sorry I didn't give you any points. My mistake in choosing best solution vs assisted solution sequence.

Julian...

1. Yes I know the difference. Just a little sloppy with language in my text. I will try to be more careful.

2. Well I had it disabled in HTML and that was fine. Then I wondered how it would work in js, since I would need it to re-enable the button. So I just tried it.

Next. Good point. I'll not use ES6 until Edge has better market share, and IE11 has less. I'll fall back to var.

I will correct line 23 code. Thanks.

I'm aware of the pitfalls of online code. Hopefully I have learned enough to recognize some of the "tell" signs. Plus I don't give weight to undated postings or unknown authors. I prefer gitHub, stack overflow, sitepoint.