Jquery issue in HTML


#1

So after doing some learning of Jquery, I’ve had another bash at my code but there still seems to be an issue that I can’t see no matter what I’m looking at…

<script type="text/javascript"> //Apparently adding type="text/javascript is no longer neccesary but I put it in just in case
    
    $(document).ready(function() {
        
        var empty = false; // Initially sets the Variable Empty to False
             $(".field").each(function() {
                 if (val().length == 0) { // Checks if the string length of any .field class input is empty
                  empty = true; // If so set Variable Empty to True
                 }
            });

            if (empty = true) { // If the Variable Empty is True then apple the Attribute DISABLED to the #send <input> button, preventing it from being clicked.
                $("#send").attr('disabled', true);
            } else {
                 $("#send").removeAttr('disabled', false); // If empty is False, then remove the attribute Disabled from the <input> button, which should ungrey the button and make it clickable
            }
        });
    });
    
</script>

And the input button at the end of the form:

<input id="send" disabled type="submit" name="send" value="send" >

I’ve tried removing the disabled attribute initially but it seems as though my Javascript code isn’t even effecting it…

I’ve even included this so it’s certainly not a matter of the browser not understanding:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Any clues peeps?


#2

its getting better, still a few issues, but you include comments and spend time learning, that is very good.

some issues, lets start here:

if (empty = true) 

a single equal sign means assign. So you assign a value of true to empty, so empty will always be true now. Use == or === for comparison. In this case, use === to ensure data types are a match

you need to take a look at this documentation:

http://api.jquery.com/jquery.each/

the each works with a function callback (function()) which can take two parameters: index and value

these variable give you access to the index and value. Maybe just log index and value to the console, to see there value?

if you are not familiar with the console (which can be handy for debugging), google:
chrome browser console

or firefox if firefox is your browser of choice. you can use console.log("i am being logged to the console") to log to the console. Replace the string with what you want to log to the console

see here:

https://developer.mozilla.org/en-US/docs/Web/API/Console/log

for more info

one final thing, looking the docs for removeAttr:

https://api.jquery.com/removeAttr/

we see:

.removeAttr( attributeName )

this function only has a single parameter, yet you provide two arguments at function call:

$("#send").removeAttr('disabled', false);

which can’t be.


#3

one final thing, looking the docs for removeAttr:

https://api.jquery.com/removeAttr/

we see:

.removeAttr( attributeName )

this function only has a single parameter, yet you provide two arguments at function call:

$("#send").removeAttr(‘disabled’, false);

which can’t be.

But there are only 2 functions in the code, and both function calls are empty?

$(document).ready(function(//this is empty)
$(".field").each(function(//and so is this)

#4

lets do some Javascript:

// function expression with no parameters
function exampleFunction(){
    console.log("hello world");
}

// function call 
// with no arguments, given the function doesn't have parameters
exampleFunction();

now look at this:

// function with parameter name
function exampleFunction(name){
    console.log("hello: " + name);
}

// function call with argument for name parameter
exampleFunction("mistah");

read the comments as well.

so your code has several function calls:

.ready()
.each()
.val() // you implemented this one wrong, we will get to it later
.attr()
.removeAttr()

All these functions are defined within the jquery library. So someone wrote a function named removeAttr and gave it a single parameter (which you can find in the docs), so when you call the function here:

$("#send").removeAttr('disabled', false);

you should provide one argument, you provided two arguments: 'disabled' and false. Parameters get there values from the arguments at function call, what is a function with a single parameter suppose to do with two arguments?

.each() is particular tricky, here:

$(".field").each(function()

you call the .each() function, but the each function takes an function as argument. So here you are declaring/expressing a function. Which you really should give parameters. See the docs


#5

So for the .each(function() to work, it needs a parameter in order to have an input with the enabling and disabling function of my code.

Hmm… maybe the function() isn’t even required in this instance.

Bear with me, just thinking out loud… parameters have always been a part of JS I’ve really struggled to understand.


#6

yes, it need parameters to get the values (input fields) its looping over, so you can retrieve the values from the input fields

no? function() is required, the person who wrote the .each() function wrote it in such a way that the argument should be function(). function() need parameters.

Just look at the documentation for .each() to see how to work with it.


#7

Sorry for wasting your time Stetim, but this is beyond my capacity to understand, I need to seek out help with this.


#8

let me help you a little bit then:

$(".field").each(function(index, value) {
   console.log(index + ": " + value)
});

have you figured out how to use the console yet?

the value variable will contain the input fields, calling .val() on the input fields (stored in value variable) will you actually give whats inside text fields