pass php post variable from css

Question

I've made a index.php page with a form and some python code to be executed with php, and I would like to show a spinner gif while the php executes the python code. I found that: https://stackoverflow.com/a/34298686/11160699 but I can't figure out how to pass POST variables to php then. Here's my code:

index form:

<form action="welcome.php" method="post">
            <div class="row">
                <div class="col-25">
                    <label for="fname">Website url</label>
                </div>
                <div class="col-75">
                    <input type="text" name="site" placeholder="Enter the site to be validated" autocomplete="off"  pattern="(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+" required>
                </div>
            </div>
            <div class="row">
                <!--input type="submit" value="Validate"-->
                <div><input type="submit" name="user_button" value="I'm a normal user"></div>
                <div><input type="submit" name="programmer_button" value="I'm a programmer"></div>
            </div>
        </form>

php code:

 ob_start();
            $url = $_POST["site"];
            $path="pyt";
            $dir = chdir($path); 
            list($scriptPath) = get_included_files();
            echo exec("C:/Users/me/PycharmProjects/env/Scripts/python main.py  '$scriptPath' '$url'");

call to php file after loader.gif:

<div id="ok">

<h1> Please Wait </h1>
<p> Processing the url. It may take a few seconds. </p>
<img src='images/loader.gif' alt='loading' />

</div>
<style>
#runPHP
{ 

  background-image:url(phps.php);
  display:none;
}
</style>
</head>
<body>

<div id="runPHP"></div>

Any idea? I know I could also use Javascript, but I don't know how to do it.

Kryptur · Accepted Answer · 2019-05-21 12:53:50Z

1

First: Be aware that you execute code that contains user input! Thus, the user can try to execute code on your server that HE wants but you don't to seriously damaging your server or your data!

To solve your issue with your loading spinner, you should try to use Javascript and a single page for form input and loading spinner. When you have included jQuery, intercept the Form Submit and send the data with AJAX. While the request is running, you can show your loading spinner.

$(function() {
  $("form").submit(function(e) {
    e.preventDefault(); // Prevent the default submission of the form
    var form = $(this);
    var url = form.attr('action'); // Extract the URL from the form

    // Show your loading information and hide the form
    $("#loading_div").show();
    $("form").hide();

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // Send the form information as 
           success: function(data) {
               // Script has finished
               // Do something here...
           },
           error: function() {
               // Script execution not successful
           }
    });
  });
});

And your index:

<form action="welcome.php" method="post">
            <div class="row">
                <div class="col-25">
                    <label for="fname">Website url</label>
                </div>
                <div class="col-75">
                    <input type="text" name="site" placeholder="Enter the site to be validated" autocomplete="off"  pattern="(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+" required>
                </div>
            </div>
            <div class="row">
                <!--input type="submit" value="Validate"-->
                <div><input type="submit" name="user_button" value="I'm a normal user"></div>
                <div><input type="submit" name="programmer_button" value="I'm a programmer"></div>
            </div>
        </form>

<div style="display: none;" id="loading_div">
    <h1>Please wait</h1>
    <p> Processing the url. It may take a few seconds. </p>
    <img src="images/loader.gif" alt="loading" id="loader" />
</div>

I assume your second snippet with "php code" is the welcome.php?

edited May 21, 2019 at 12:53

answered May 21, 2019 at 9:25

Kryptur

7557 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Willy Over a year ago

I've a page with the index, one which is named "welcome" and contains the php code which executes a python script that does some stuff and creates a new page with the result of the python script, which I have to display after the execution of the python script. I know, it sounds like a tongue twister :D Anyways, even with your suggestion I still can't see the loading spinner...

Kryptur Over a year ago

Make sure that the Javascript handler is bound after the page has loaded. You can wrap it in $(function() {...}) to achieve this. Further, what do the Browser Developer Tools show you?

Willy Over a year ago

mmm ok now I can load the spinner (the Javascript handler was bound before the page was loaded, so I fixed it), but it seems that it is not calling the php in the welcome page

Kryptur Over a year ago

Again, check the console and the network tab of your browser

Willy Over a year ago

Using the console made me realise I just had to wait. Many thanks for your help!

|

Collectives™ on Stack Overflow

pass php post variable from css

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related