Pausing site until button press Javascript

Question

I am trying to make my website first ask Simple data and than continue loading the page, but I can't figure it out.(so first ask data and than print PRINT THIS AFTER)

this is what I have now:

<html>
<h1>PRINT THIS BEFORE</h1>
    <form id="login">
        name: <input id="name" type="text">
        password: <input id="password" type="password">
        <input value="log-in" type="button" onclick="sendIt()">
    </form>
    <script>
        var send = false;
        function sendIt() {
            send = true;
        }

        var i = setInterval(function(){
            console.log("f")
            if(send) {
                document.getElementById("login").remove();
                clearInterval(i)
            }
        }, 100);
    </script>

    <h1>PRINT THIS AFTER</h1>

please help me

-------------EDIT----------------

I decided to use innerHTML to edit the html in a div with the id edit so it wont load the html yet

Code:

<html>
<h1>PRINT THIS BEFORE</h1>
    <form id="login">
        name: <input id="name" type="text">
        password: <input id="password" type="password">
        <input value="log-in" type="button" onclick="sendIt()">
    </form>
    <script>
        var send = false;
        function sendIt() {
            send = true;
        }

        var i = setInterval(function(){
            console.log("f")
            if(send) {
                document.getElementById("login").remove();
                document.getElementById("edit").innerHTML = "<h1>PRINT THIS AFTER</h1>";
                clearInterval(i)
            }
        }, 100);
    </script>
    <div id="edit">
    </div>

Edward B. · Accepted Answer · 2017-05-14 19:50:31Z

I've read the other replies here and your comments. As others here suggested, the easiest way to do this would be to either hide the H1 or put the H1 in a hidden div, and you can then show that div via your "sendIt" function with Javascript if the login was successful. For what it's worth, you can't "pause" a site from loading content. Anything embedded in the HTML is going to load regardless of what Javascript is doing.

If hiding the content is not good enough (maybe for security reasons, you don't want to show someone content unless they are signed in, as hiding it would still let them view the source), there's only two other ways to do this. The first is server side programming. Post to the same page and if the login conditions exist, show the content instead of the login form.

The second method you can use an AJAX request. If the login is successful, you can dynamically load content from another web page on your server that contains the content you want to show. Note, the page you are dynamically loading should have some type of security (like server side programming) that validates if the person is logged in, otherwise you're back in the same hole, same goes for the server side method. If the content or AJAX page isn't validated in some way, they will find a way to view it anyway.

This problem is a little steeper than what you are asking us, but there are plenty of tutorials out there on a simple AJAX request or using server side programming languages like PHP. Now that you have an idea of how to do this, you can start experimenting.

Thank you, I decided to use javascript to append the h1 to the body when the function is finished

Daniel Taub · Accepted Answer · 2017-05-14 19:25:37Z

0

    <html>
<h1>PRINT THIS BEFORE</h1>
    <form id="login">
        name: <input id="name" type="text">
        password: <input id="password" type="password">
        <input value="log-in" type="button" onclick="sendIt()">
    </form>
    <script>
        var send = false;
        function sendIt() {
            send = true;
        }

        var i = setInterval(function(){
            console.log("f")
            if(send) {
                document.getElementById("login").remove();
                document.getElementById("h1show").removeAttribute("hidden");
                clearInterval(i)
            }
        }, 100);
    </script>

    <h1 id="h1show" hidden>PRINT THIS AFTER</h1>

Use hidden attribute on the h1, and then just remove it by :

document.getElementById("h1show").removeAttribute("hidden");

and it will show up.

answered May 14, 2017 at 19:25

Daniel Taub

5,4478 gold badges47 silver badges78 bronze badges

2 Comments

Ian.V Over a year ago

Is there a way without making it hidden and not loading at all

Daniel Taub Over a year ago

What do you mean you want the h1 part will not show in your page?

h0x91B · Accepted Answer · 2017-05-14 19:30:17Z

0

Your form making submit when you press on button then page refresh is happen and you see your form again.

If you want to make request without page refresh you should return false on submit and have to use AJAX technology.

You can use CSS to show\hide your site content or backend to control your HTML.

If you want that your HTML will not contain a site content, after login make redirect to page with cookie checking or load a site content via AJAX.

answered May 14, 2017 at 19:30

h0x91B

1,26615 silver badges19 bronze badges

Comments

alessandrio · Accepted Answer · 2017-05-14 19:31:55Z

0

get necessary info

login.html

<h1>PRINT THIS BEFORE</h1>
<form id="login" action="data.html">
    name: <input id="name" type="text" required>
    password: <input id="password" type="password" required>
    <button type="bubmit">log in</button>
</form>

if prev page contains required info send to new page

data.html

<h1>PRINT THIS AFTER</h1>

answered May 14, 2017 at 19:31

alessandrio

4,3802 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

Pausing site until button press Javascript

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related