vendredi 28 mai 2021

HTML Javascript check if submit clicked before timer expired

I am trying to add a validation for promotion timer that allows users to get discount while timer is running (countdown).

Pseudo code

  1. Timer still running
  2. User fills out form and clicks submit button
  3. If condition : a) if timer still running -> send form and Add discount to this form submission b) if timer expired -> send form without discount code

(index.html) here is my script for timer inside html page

'''

    <script>
      // Set the date we're counting down to
      var countDownDate = new Date("May 30, 2021 09:17:25").getTime();
      
      // Update the count down every 1 second
      var x = setInterval(function() {
      
        // Get today's date and time
        var now = new Date().getTime();
          
        // Find the distance between now and the count down date
        var distance = countDownDate - now;
          
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
          
        // Output the result in an element with id="timer"
        document.getElementById("timer").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";
          
        // If the count down is over, write some text 
        if (distance < 0) {
          clearInterval(x);
          document.getElementById("timer").innerHTML = "EXPIRED";
        }
      }, 1000);
      </script>

'''

and when you click submit button it takes you to submission form on the other page (booknow.html)

(booknow.html) here is my script for submission form inside different html page

'''

<script>$(document).ready(function() {
            var $sendEmailEl = $('#send-email');
            var $subjectEl = $('#subject');
            var $bodyEl = $('#body');
            var $addressEl = $('#address');
            var $fnameEl = $('#fname');
            var $lnameEl = $('#lname');
            var $phoneEl = $('#phone');
            var $applianceEl = $('#appliance')
            var $dayEl = $('#day');
            var $myEmailEl = 'gmail.com';
            var $myEmailEncode = ('acbdefg' +  '@' + $myEmailEl );
            // adding coupon function if timer still running Start
            var $coupon = "";

            function addCoupon() {

            }
            // adding coupon function if timer still running End
            function updateEmailLink() {          
                $sendEmailEl.attr('href', 'mailto:'+ encodeURIComponent($myEmailEncode) +'?' + 
                'subject=' + encodeURIComponent($subjectEl.val()) + 
                '&body=' + 'Hi there' + '%0D%0A' + encodeURIComponent($bodyEl.val()) + '%0D%0A' + ' Address: ' 
                + encodeURIComponent($addressEl.val()) + '%0D%0A' + ' First Name: ' 
                + encodeURIComponent($fnameEl.val()) + '%0D%0A' + ' Last Name: ' 
                + encodeURIComponent($lnameEl.val()) + '%0D%0A' + ' Phone: ' 
                + encodeURIComponent($phoneEl.val()) + '%0D%0A' + ' Appliance: ' 
                + encodeURIComponent($applianceEl.val()) + '%0D%0A' + ' Prefered date: '
                + encodeURIComponent($dayEl.val())
                );
                // console.log($sendEmailEl.attr('href'));
            }
            $('#subject,#body').on('input', updateEmailLink);
            updateEmailLink();
        });
    </script>

'''

I should probably add var with random code "Discount777" somewhere inside timer script and then check with if statement inside submission script whether timer is running, and if so then grab that var = "Discount777" from a different page and send it along with the form. Or maybe there is an easier way?

Aucun commentaire:

Enregistrer un commentaire