Set timeout on form section

user_12850622 0
Viewed 701
<!DOCTYPE html>

<head>
  <base target="_top">

  <script type="text/javascript">
    function f() {
      var refresh = document.getElementById('form');
      timer = setTimeout('f()', 1000);
      if (timer == 10) {
        clearTimeout(timer);
        refresh.src = 'New URL';
      }
    }

  </script>

</head>

<body onload="f()">

  <p>Complete the form</p>

  <form id="form" action="URL" target="_self" method="POST">
    <div><input type="text" placeholder="name" required name="Name"></div>
    <div><input type="email" placeholder="email" required name="E-mail"></div>
    <div><button type="submit">Send</button></div>
  </form>

</body>

</html>

based on the above code, I need to do that:

After 10 sec of page load, replace the form section in the page with the "New URL"

For some reason it's not working. Any help would be so much appreciated. Thanks in advance

javascript
3 Answers

setTimeout doesnt return a value, so your timer value can't reach 10. You should make 2 functions , f that start a timeout of 10000 and then fire a remplace() function that do your work.

Something like this : 

function f(){    
    var refresh = document.getElementById('form');
    timer = setTimeout('replace()', 10000);
}

function replace(){    
    var refresh = document.getElementById('form');
    refresh.src = 'New URL';
}
user_132126100

Issue is that timer == 10 is never going to happen. timer variable is a reference for canceling the timer. Here is the fixed version

<!DOCTYPE html>
<html>
  <head>
    <style>
      .content {
        color: red;
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <p>Complete the form</p>
    <form id="form" action="URL" target="_self" method="POST">
      <div><input type="text" placeholder="name" required name="Name"></div>
      <div><input type="email" placeholder="email" required name="E-mail"></div>
      <div><button type="submit">Send</button></div>
    </form>
    <div id="content" style="display: none;" class="content">
      This is new content!
    </div>



    <script type="text/javascript">
      function f() {
        const elementToHide = document.getElementById("form");
        elementToHide.style.display = 'none';
        const elementToShow = document.getElementById("content");
        elementToShow.style.display = 'block';
      }
      const timerRef = setTimeout(f, 1000 * 10);

    </script>
  </body>

</html>

And here the updated link to JSFiddle so you can check it out.

Also here is a link where you can learn more about the timeout.

EDIT:

For the change of content I would hide the form and show the new content that you can style like you would any other element.

user_112914130

There are several issues with your code:

  1. It seems you assume that the result of setTimeout() will give you sequential numbers from 1 to 10. This is just an id, nothing more.
  2. A form does not have a src attribute.

My answer addresses these 2 points. Still, it seems weird to hide a form after 10 seconds to replace it with something else. What if the user was still typing for example ?

function init() {    
  var refresh = document.getElementById('form');
  
  timer = setTimeout(hideForm, 10000);
}

function hideForm() {
  var form = document.getElementById('form');
  var newURL = document.getElementById('newURL');
  form.classList.add("hidden");
  newURL.classList.remove("hidden");
}
.hidden {
  display: none;
}
<body onload="init()">

<p>Complete the form</p>

<form id="form" action="URL" target="_self" method="POST">
  <input type="text" placeholder="name" required name="Name">
  <input type="email" placeholder="email" required name="E-mail">
  <button type="submit">Send</button>
</form>

<div id="newURL" class="hidden">New URL</div>
</body>

user_13037190
Related