Flow of control between JS and PHP

Question

I am having difficulty understanding the flow of code from JS and PHP.

I want to first validate the form content, and if the values are fine, I want to process the same in the PHP file.

I believe for calling the JS function to check validation, we need a onsubmit function. And I know to forward the processing of html, I need to specify the php file name in the action. Please help me explain how to work out the flow of control.

Tried using onsubmit() and php form data parsing

<form id="locationForm" action="<?php $_SERVER['PHP_SELF']; ?>"  method = "POST" onSubmit="validate()" > 

<div class = "rht">
        <input type="checkbox" id = "current"><b>Current Location</b><br>
</div>
<input  type="submit"  name= "submit" value="Submit">
</form>


<script>
function validate()
        {
            console.log('Inside val');
}

<?php         
         if (isset($_POST['submit'])) {
             $abc = $_POST['abc'];
         }
?>

</script>

I'll try to answer this for you. Give me 15 mins to write something up. — waterloomatt, Oct 17 '19 at 23:51

waterloomatt · Answer 1 · 2019-10-18T00:34:54.040

If I understand you correctly, you want to validate your form using Javascript (client-side validation), and if that passes validation, send the form to be processed by PHP (server-side processing).

When it comes to web development, especially forms and validation, it really helps to think in terms of request and response (or client and server). The browser (client) makes a request and the server sends a response. This sounds simple but is often overlooked when trying to wrap your head around these issues.

The normal use-case for this form are 2 simple requests - the first is a get request when the page is initially loaded and the second is a post request when the form is submitted. This is what it looks like.

When you browse to http://localhost, the browser sends a get request to the server. The server skips over the first if statement because it is not a post request and sends the response (only the HTML and JS) back to the browser.
The end-user interacts with the form in their browser and the JS prevents them from submitting the form until it is valid. Once the form is valid and they submit, a new post request is sent to the server.
Now, the server will execute the if statement because the request is a post.
Finally, after processing the server will send the response (HTML and JS) back to the browser again.

I've embedded most of my comments in the code. Please note that this is only using client-side validation. In any application other than a simple example you really should be doing both client-side and server-side validation.

Also, note with modern browsers you can simply add the required attribute to the form element and the browser will handle the validation. There are tons of built in validations that you can use. I highly suggest you read https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation and understand the difference between Javascript, HTML5, and server-side validation.

<?php

// This will only execute if the form was submitted. 
// We're making the assumption that if the form was submitted then it was valid. 
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
   // If you were going to do server-side validation, this is where you'd do it. 

   // Do your processing in here.
   $name = $_POST['name'];
}
?>

<!-- We don't need to specify an action if we want the current script to process the form. -->
<!-- Notice onSubmit needs the `return` keyword to actually stop the form from submitting. -->
<!-- Also notice, that the Javascript validation needs to return a boolean. -->
<form id="name-form" method="post" onSubmit="return validate(this)">

    <label>
        <input type="text" name="name">
        Name
    </label>

    <br>

    <input type="submit" name="submit" value="Submit">
</form>


<script>
    /**
     * Client-side validation. This method will return a boolean indicating if the given form is valid.
     * @param form
     * @returns {boolean}
     */
    function validate(form) {
        var name = form.name.value;

        // Return the inverse of the comparison.
        return !(name === '');
    }
</script>

Flow of control between JS and PHP

1 Answers1