Contact Form --- JS Thank you Message

JavaScript
23

I know, I suggested some nonsense, sorry about that.

I will try to figure it out

24

The Thank you message is not hidden - look

25

did you add CSS selector for hidden class?
I f yes, where is it?

Also, is this your script in HTML file? Is it placed in the head tag?
If it is placed in the head tag, try to move it to the end of body, place it right before body closing tag

<script type="text/javascript" src="assets/js/general.js"></script>

The end of your html should look more or less like this:

        <div class="hidden" id="thankYou">
            <h2>Thank you so much</h2>
        </div>


    </div>
    <script type="text/javascript" src="assets/js/general.js"></script>
</body>
</html>
1 Like
26

yes… the problem is the display:none working have a look this simple page

27

It’s working now but after submitted the form the thank you message don’t show up.
Try here

28

you shouldn’t use javascript in your head element because HTML is executed line by line. This is a simplified version of the events that take place when you put your script tag inside of the Head tag.

  1. The browser will load the javascript file.
  2. It will run all of its code and conclude that there are no elements with the id of “myButton” because the DOM node for that element has not been created yet.
  3. The browser will start processing the body and its contents
  4. The DOM node for the <button> element will be created during this step.

you need to either add the script tag at the end of your body or you need to use a defer attribute in the script tag.

if you want to learn more about this behavior, this answer on stack overflow explains it in much more detail.

29

I am bit confused by your page now.

When I checked it, there was 2 subscribes buttons.
One of them shows ‘thank you’ when i click, another - does not.

I don’t even remember if I’ve ever seen form layout with two identical subscribe buttons.

30

There is a simpler way ( I think ) . . .

Basically, I have an ‘empty’ paragraph with a certain ID … in this case, ‘emlwaiter’.

The button activates the function ‘emladrex’ which changes the text inside the paragraph to the relevant instructions about clicking / right-clicking to send / copy valid email address.
Then the id of the paragraph is changed so it does not keep updating the text if they click repeatedly.

I use an image of the email address because spiders/ bots cannot ‘see’ it and people can (for noscript or something).

IN MY INDEX.HTML FILE:

<div class="centers">
                <p id="emltext">Contact Us on the email address below</p>
                <p id="clicktext">Click &nbsp; 'I&nbsp;am&nbsp;not&nbsp;a&nbsp;robot' &nbsp; for the valid email address:</p>
                <form name="NoRobot" id="NoRobot" action="">   
                    <input type="button" id="emlbutton" value="I am not a robot" onclick="emladrex();" title="Click for valid email below">
                    <p id="emlwaiter">&nbsp;</p>
                </form>
                               
                <a id="emladrimg" href="mailto:admin @ this site .co .za" target="_blank" title="admin email address- Click I AM NOT A ROBOT for email above"><img id="emlpic" src="/media_gen/emlad.png" alt="admin email address"></a>
        </div> <!-- centers -->

IN MY CSS FILE:

#emlwaiter { /* instructions to wait.. click/ right-click) */
        color: red;
        margin: 0 auto;
        padding: 0;
    }

IN MY JAVASCRIPT FILE:

document.getElementById("emlwaiter").innerHTML = "Click below: then Wait a moment for mail app to open<br/>or Right-click to copy for web-based email";
    document.getElementById("emlwaiter").id = "emlwait";

Just a thought.

[My script line is in the header and it works, because they usually get to click after it has loaded. But I might put it in the body for really slow connections . . .]

1 Like
31

Oh Great! I am going to test it and will let you know.

32

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.