How can you get your php POST code to run BEFORE your Javascript code?

window.onsubmit() fires when the form is submitted, but before the data is sent to the server. If you want to generate the alert after the page has returned from the server based on the input value you're filling with php, you can do something like this:

$(document).ready(function() {
  if($('#fruit').val() != '') {
    alert($('#fruit').val());
  };
});

This isn't necessarily the best way to handle the situation (as others point out), but I believe it's the most direct answer to what you're asking.

How can you get your php POST code to run BEFORE your Javascript code?

Your PHP code ever runs before as your javascript does except using ajax.

In your case you just want to display something in an alert. If I understand you you have to store the variable which contains the "error" and echo into a javascript variable.

Of course the following lines should be in the same php file.

<script type="text/javascript">
 var error = "<?php echo $error; ?>";
 alert(error);
</script>

A more standard and flexible pattern is to separate the PHP that is to be done with an ajax request as its own file not directly inside the HTML.

So lets create an ajax endpoint

my-ajax-endpoint.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $user_input = trim($_POST["letter"]);

    if ($user_input == 'A') {
        $fruit = "apples";
    } elseif ($user_input == 'B') {
        $fruit = "bananas";
    } else {
        $fruit = "No fruit for you!";
    }
    echo json_encode(array("fruit" => $fruit)); // encode as json
}

Now we have an HTML form that we want to handle with an ajax request using jQuery.

The form we are acting on

<form id="form_to_submit" action="my-ajax-endpoint.php" method="POST">
    <fieldset>
        <label>Type A for apples and B for bananas:</label>
        <input type="text" name="letter" id="letter"> 
        <input type="text" name="fruit" id="fruit"> 
        <button type="submit" id="click">Click Here to see your fruit selection.</button>
    </fieldset>
</form>

We hook in into the forms onsubmit method

Ajax hook for form submit

$("#form_to_submit").submit(function (evt) {
  evt.preventDefault();
  var $form = $(this); // the form we are acting on
  // xhr is a defered object
  var xhr = $.ajax({
    url: $form.attr('action'), // the url of the action
    data: $form.serialize(), // send all the form fields
    method: $form.attr('method') // POST or GET
  });

  // handle the data
  xhr.done(function (data) {
    // find the fruit field and store the fruit value
    $form.find("[name=fruit]").val(data.fruit);
    alert("Your fruit: " + data.fruit);
  });

  // handle HTTP errors
  xhr.fail(function (jqXHR, textStatus) {
    alert("Error: " + textStatus);
  });

});

This is a flexible pattern that you can use with many different use cases. You can pass back more data with json_encode() using an associative array. Using $form.find("[name=youinput]") will easily allow you to update form elements.

Well, that's not how you should approach this problem...

I believe that what you trying to achieve can simply be done with Ajax.

I like to work with jQuery to make Ajax calls, here is an example:

$.ajax({
  url: "test.html",
  context: yourFormFields
}).done(function() {
  $( this ).addClass( "done" );
});

If you want to know more: http://api.jquery.com/jquery.ajax/

I would suggest doing this all in jQuery/Client Side.

Note: this does not answer your question, it's just a suggestion.

This way, you don't need to reload the page.

Add an onClick listener to the submit button and use preventDefault to prevent the submission. Then do the check and insert the result into input:

$('#click').click(function(event){
    event.preventDefault();
    var letter = $('#letter').val(),
        fruit = "No fruit for you!";
    switch(letter){
        case 'A':
            fruit = 'Apple';
            break;
        case 'B':
            fruit = 'Banana';
            break;
    }
    $('#fruit').val(fruit);
});