Make a html page refresh only if data has been entered

Question

I have a contact form for my website which I would like to auto refresh due to inactivity only if data has been entered. I have managed so far to implement the auto refresh due to inactivity but how do I add an if statement where the auto refresh code runs only when data is entered.

<!-- Timeout -->
<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    idleInterval = setInterval(timerIncrement, 60000); // 1 minute
    $('body').mousemove(function (e) {
     idleTime = 0;
    });
    $('body').keypress(function (e) {
        idleTime = 0;
    });

    $('body').click(function() {
       idleTime = 0;
    });
});
function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 1) { // 1 minute
        window.location.assign("");
    }
}
</script>
<!-- End of Timeout -->

    <!--Contact form -->
<div class="contact-clean" style="background-color: #ffffff;">
            <form method="post" name="contactform" action="contact-form.php" enctype="multipart/form-data">
                <div class="form-group"><input class="form-control" type="text" name="firstname" placeholder="First Name" required="" minlength="2"></div>
                <div class="form-group"><input class="form-control" type="text" name="lastname" placeholder="Last Name" required="" minlength="3"></div>
                <div class="form-group"><input class="form-control" type="email"name="email" placeholder="Email" inputmode="email" required=""></div>
                <div class="form-group"><textarea class="form-control" name="message" placeholder="Message" rows="14"></textarea></div>

Timer code was copied from here https://stackoverflow.com/questions/667555/how-to-detect-idle-time-in-javascript-elegantly — GetSet, Feb 01 '20 at 19:55

ilyas Jumadurdyew · Answer 1 · 2020-02-01T20:33:34.860

0

Check if input is not empty

$('#your_form_id').submit(function (e) {
    e.PreventDefault();
    if ($('[name="your_inut_name"]').text().length >= 1) {
        $('#your_form_id').submit();
    else {
        alert("Text field can not be empty!")
})

Execute function on element change

$(#your_input).change(function () {
    do_whatever_you_want();
})

https://www.javatpoint.com/jquery-change

I may be wrong in syntax (not a cool js developer) and approach is like this.

edited Feb 01 '20 at 20:33

answered Feb 01 '20 at 19:50

ilyas Jumadurdyew

883
11
24

Thank you for your answer. The only issue is that the code you provided appears to be for form submission. I am specifically looking to check the fields in the contact form and if data has been entered to run the auto refresh code. – Feb 01 '20 at 19:56
What if all fields are full, And what should happen if some of the fields are not. – ilyas Jumadurdyew Feb 01 '20 at 20:22
The form should refresh if any of the fields have any data in them AND there has been no activity for a minute. – Feb 01 '20 at 20:25

score 0 · Answer 2 · answered Feb 01 '20 at 20:16

Create an ID for your form and access name attributes with Javascript:

const form = document.getElementById('yourFormId');
const formData = new FormData(form);

// If "firstname" is not empty, do something:
if (formData.get('firstname')) { 
     // refresh
}

// Do the same with any input from your form or all

Daemon Beast · Answer 3 · 2020-02-01T21:36:59.797

0

You can use this code to check if any inputs have a value in them. If they do, the website reloads.

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 1) {
        $("input, .form-control").each(function() {
            if ($(this).val() != "") {
                window.location.assign("");
            }
        });

        $("textarea, .form-control").each(function() {
            if ($(this).val() != "") {
                window.location.assign("");
            }
        });
    }
}

edited Feb 01 '20 at 21:36

answered Feb 01 '20 at 20:23

Daemon Beast

2,794
3
12
29

Try `window.location.reload()` instead. – Daemon Beast Feb 01 '20 at 21:14
Still nothing happens. – Feb 01 '20 at 21:20
If you are the user who deleted your account (`user12825624`), may I ask why? – Daemon Beast Feb 02 '20 at 10:12

score 0 · Answer 4 · answered Feb 01 '20 at 20:26

0

You're looking for the... oninput="" ...to catch when the user enters data and it's used like this...

 <input oninput="Counter=0;" class="form-control" type="text" name="firstname" placeholder="First Name" required="" minlength="2">

This will trigger every time the user types a character.

In this example I've made the trigger reset a refresh counter variable called "Counter" to zero.

answered Feb 01 '20 at 20:26

user4723924

1

That isn't what the person wants. They want the page to refresh after a minute if any of the inputs have a value in them. – Daemon Beast Feb 01 '20 at 20:31

score 0 · Answer 5 · answered Feb 01 '20 at 20:50

<form id="contact">
      <input type="text" value="test" />
      <input type="text" value="s" />
      <input type="text" value="" />
      <input type="text" value="" />
    </form>

    <script>
      let idleInterval = null;
      const hasEntries = () => {
        let data = new FormData(document.getElementById("contact"));
        let entry = data.values();
        return entry !== null;
      };
      const refresh = () => {
        if (hasEntries()) {
          window.location.href = window.location.href;
        }
      };
      const setInactivityTimer = () => {
        idleInterval = setInterval(refresh, 60000);
      };
      const clearInactivityTimer = () => {
        clearInterval(idleInterval);
        if (hasEntries) {
          setInactivityTimer();
        }
      };
      let inputs = document.querySelectorAll("input");
      inputs.forEach(input => {
        input.onkeypress = () => clearInactivityTimer();
      });
      document.body.onmousemove = () => clearInactivityTimer();
      document.getElementById("contact").querySelector("input");
    </script>

Test: https://codesandbox.io/s/youthful-cache-jo2t2

Make a html page refresh only if data has been entered

5 Answers5