Question

My situation

I have a piece of javascript that does several manipulations on a webform on form.php. The form is set to action="form.php" and thus loads itself upon submission. The webform is only built if (!isset($_POST['submit'])), so after posting, the input elements and containers that make up the webform are not there. This is generally how the code is structured:

<?php if (!isset($_POST['submit'])) { 
//the form has not been submitted
?>
  <form action="<?php $_SERVER['PHP_SELF']?>" method="post" id="form" name="form">
    <!-- general input elements -->
    <input type="submit" name="submit" value="Send">
  </form>
<?php }
else {
// the form has been submitted
  // posted values are submitted to a database
}
?>

The javascript still tries to do manipulations on these elements, though. Since these aren’t there anymore, errors occur. I could use a bunch of if (HTMLElement) statements for every manipulation to a certain HTMLElement, but I hope there is a more solid, more general solution.

The question

Given that the form submits to its page and that it’s not an option to simply keep showing the form after POSTing, do you have a suggestion how I can detect the POSTing of the webform and shut certain parts of my javascript down?

A more general question would be:

How can a php POST be detected by javascript?

Answer 1

One thing that comes to mind is something like this:

<?php if ($_SERVER['REQUEST_METHOD'] == 'POST') $isPost = true; ?>

// later on in your script

<?php if (!$isPost): ?>
<script type="text/javascript">
// the JS code that manipulates your form
</script>
<?php endif; ?>

Basically, if the form was posted, don’t render the JS code that manipulates it. If that code is mixed with other code you always want included, then you’ll have to work it a little differently. In that case you could try:

<script type="text/javascript">
var isPost = <?php echo $isPost ? 'true' : 'false' ?>;

if (!isPost) {
    document.getElementById('blah').doSomething();
}
</script>