Contact Form Nightmare


#1

I thought a weekend away from this mess would help but I’m at an absolute loss… I’ve tried everything I can, frankensteined the code, gone to stack overflow.

All solutions I have tried lead me bloody nowhere.

I have this form: http://martinbodger.com/_html/contacttest.html

If the fields aren’t filled… the button is disabled.

the Javascript I used in the .js file I linked to my html page within the code does this:

(function() {
    $('form > #send').keyup(function() {

        var empty = false;
        $('form > #send').each(function() {
            if ($(this).val() === '') {
                empty = true;
            }
        });

        if (empty) {
            $('#send').attr('disabled', 'disabled'); 
        } else {
            $('#send').removeAttr('disabled');
        }
    });
})()

Now apparently, that is supposed to disabled the send button if the fields aren’t filled.

Originally I wanted it to be disabled until reCAPtcha came back with a confirmed call back but that didn’t bloody well work either… despite many on stack overflow claiming it to work fine (It did not for me… again very annoyed.)

I thought maybe because the Input Button field was within the form it might read wrong in the JS code, but no… still nothing.

Even changing this:

 $('form > input').keyup(function()

to this

 $('form > #send').keyup(function()

(send is the ID I gave the button)

Did nothing… now the reason the button is greyed out on the site is because of this line of CSS:

input[disabled]#send,
input[disabled]#send:hover,
input[disabled]#send:active,
input[disabled]#send:focus { 
        background: grey;
        opacity: 0.5;
        text-decoration: none;
}

Which I was hoping would dissapear should the fields become filled hence removing the Disabled attribute… regardless the button continues to not work.

So from what I’ve had so far, the removeAttr() has not been my friend this day.

Does anyone have a clue as to what I’m doing wrong… I’m losing my god ■■■■ mind.


#2

doing a search for <script in your html file will return a single result:

<script type="text/javascript" src="../_js/website.js"></script>

so my question, where did you include jquery? The browser doesn’t understand Jquery by itself.

People on stackoverflow assume you know you need to include the library you are using


#3

I must be misunderstanding?

jQuery is Javascript right?

That tag links to a file that contains the Javascript code… though now I’m wondering if it’s not the same thing.


#4

No, jquery is a Javascript library

the browser only understands Javascript, but someone wrote clever JavaScript code, which became the jquery library

but without the library, the knowledge is lost/not understood. You need to include the jquery library, given the code snippet you provide didn’t include any html, the people who looked assumed you include jquery. Which 9 of 10 is fair assumption (understand what you are working with is very important in programming)


#5

Okay… but I still have the same problem:

This is all placed within my head tag:

<script src="../_js/jquery-3.3.1.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
    
    (function() {
    $('form > #send').keyup(function() {

        var empty = false;
        $('form > #send').each(function() {
            if ($(this).val() === '') {
                empty = true;
            }
        });

        if (empty) {
            $('#send').attr('disabled', 'disabled'); 
        } else {
            $('#send').removeAttr('disabled');
        }
    });
})()
    
</script>

And the issue is still there… so even if they were to assume that I’d done that properly I’ve still got the problem of it not working.


#6

the button with id #send is not a direct child of form, so $('form > #send') is the wrong selector for the job. Both for the keyup event and .each() loop.

your loop is looping over what exactly? It doesn’t look right, i think you .find() to find all the input fields


#7

I really have no idea, I’m just copying and pasting code it with very little in the way of knowledge of how this really should be working.

I know which fields to edit to make it match my code and even then I come up with nout.


#8

A post was split to a new topic: Contact form


#9

Then i am not the person to help you, if you don’t understand how jquery selectors work, that is problematic.


#10