How to run javascript function only once?

Question

Recently, I've asked a question on how to get the data value of input without a submit button.

The answer has worked brilliantly well for me and now I've moved on to the second stage where I want to save the javascript's variable into my php's variable, so that I can use phpmail to send out the data.

I understand that there is no direct way of assigning the value of a javascript's variable to a php's variable.

So, I came up with the following codes: (jquery ver 3.4.1 min)

index.php

    <form>
        <input type="text" name="nameValidation" id="nameValidation" placeholder="Name">
        <input type="number" name="phoneValidation" id="phoneValidation" placeholder="Phone">
        <input type="email" name="emailValidation" id="emailValidation" placeholder="Email">
    </form>

    <div id="display"></div>
    <script>
        $(function() {

            $('#nameValidation').on('input', function() {
                var nameValisession = $(this).val();
                sessionStorage.setItem("nameValiSession", nameValisession);
            }); 

            $('#phoneValidation').on('input', function() {
                var phoneValisession = $(this).val();
                sessionStorage.setItem("phoneValiSession", phoneValisession);
            }); 

            $('#emailValidation').on('input', function() {
                var emailValisession = $(this).val();
                sessionStorage.setItem("emailValiSession", emailValisession);
            }); 

        }); 

        window.onbeforeunload = function() {
            return "email will get sent!";
        }

    </script>

This page has no error and works as intended. It collects the data on keyup and sets it to session storage.

index2.php

<body onload="myFunc()">
    <div id="display"></div>
    <div id="display2"></div>
    <div id="display3"></div>
    <script>
        var nameValisession = sessionStorage.getItem("nameValiSession");
        var phoneValisession = sessionStorage.getItem("phoneValiSession");
        var emailValisession = sessionStorage.getItem("emailValiSession");
        document.getElementById("display").innerHTML = nameValisession;
        document.getElementById("display2").innerHTML = phoneValisession;
        document.getElementById("display3").innerHTML = emailValisession;


        function myFunc(){
            myFunc = function(){}; 
            window.location.replace("index2.php?myName=" + nameValisession + "&myPhone=" + phoneValisession + "&myEmail=" + emailValisession); 
        };

    </script>

    <?php
        $myName = $_GET["myName"];
        $myPhone = $_GET["myPhone"];
        $myEmail = $_GET["myEmail"];

        echo "PHP RESULT: " . $myName . " - " . $myPhone . " - " . $myEmail;
    ?>

</body>

Now, this is the page where I intend to bring all the data from index1.php , convert the javascript's variable to php's variable by setting the values as a URL parameter and using PHP to fetch the result.

This is working for me, except for the part, it is constantly reloading. According to the answer here, it will load myFunc once and then stop it, however, in my case, it is permanently looping without stopping the function.

How do I go about fixing this issue to make the function load only once?

It looks like OP is trying to make it so that if myFunc is called again, it won't reload the page.However, it won't work because reloading the page resets the javascript, so it endlessly loops. — Declan McKelvey-Hembree, Aug 26 '19 at 06:23
This is "supoosed" to stop the function from loading again, but it not working for me. It loads each time the page refreshes, thus making an infinite reload loop. — Gosi, Aug 26 '19 at 06:23
Yes, you are right Declan, it resets the script, thus keeps calling in the function again. I would like to know how to just call in a function just once. — Gosi, Aug 26 '19 at 06:25
every time `index2.php` loads, it runs `myFunc()` ... that's why it keeps reloading ... the line `myFunc = function(){};` has no effect, since the page is reloaded — Jaromanda X, Aug 26 '19 at 06:25
I would rethink the architecture entirely. This is very brittle and the only way I can think of you can make it work is either to make a third page where the data is sent via redirection, or remove it from local storage on redirect so you know it doesn’t need to do it again. Which means it’s lost if errors occur. Is there a specific need to do it this way and not just send the data from index.php regularly? — Sami Kuhmonen, Aug 26 '19 at 06:26
how to stop the page reloading ... don't load index2.php on loading index2.php — Jaromanda X, Aug 26 '19 at 06:26
Why do you want to save it on php instead of just using it directly? — user3153340, Aug 26 '19 at 06:33
@user3153340 Because I want to send the data as an email, so I want to use phpmail to do so.. — Gosi, Aug 26 '19 at 06:35
You don't need to "save it", just use it. Ajax call to a php file, send the values via post/get, and use them as you like in your php code. Nothing else needs to be done to make that work. Everything else is just extra code with no functional purpose. — user3153340, Aug 26 '19 at 06:37
@user3153340 Ok I'll go read up on how to use Ajax to call the javascript variable to php. — Gosi, Aug 26 '19 at 06:41
@SamiKuhmonen @JaromandaX Thank you guys, based on your comments, I've made the redirect to a new page `index3.php` with the parameters and now it works. — Gosi, Aug 26 '19 at 07:04

score 1 · Accepted Answer · answered Aug 26 '19 at 06:28

Before you reload the page, check to see if the data you want is already in the query params -- if it is, don't reload. Either check one of your existing parameters' existence and don't reload if it's there, or else add a boolean parameter like needs_reload that you can set to false when you run myFunc, and then only run myFunc if needs_reload is true.

score 1 · Answer 2 · answered Aug 26 '19 at 06:51

1

Why not use sessionStorage and set an appropriate flag?

if (sessionStorage.getItem('myFlag') != 'yes') {
    sessionStorage.setItem('myFlag', 'yes');
    // do your stuff 
}

answered Aug 26 '19 at 06:51

Honk der Hase

2,459
1
14
26

How to run javascript function only once?

2 Answers2