CODEWITHSUNDEEP
phpjavascriptformsalert
MillerMedia
MillerMedia

Reputation: 3671

Trying To Create A Javascript Alert Window That Doesn't Reload The Page When OK Is Clicked

I have a PHP form that I've set up with a POST method. When all the fields aren't filled out I have a Javascript alert box that pops up and states 'Please fill out all fields!' When I click 'OK' on the alert window it reloads the form behind it clearing all the data that was entered. Is there a function that can keep the alert box's OK button from reloading the entire page? Here's my code:

<?php

if (isset($_POST['brandname']) && isset($_POST['firstname']) && isset($_POST['lastname']) && isset($_POST['email']) && isset($_POST['website'])){
    $brandname = $_POST['brandname'];
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $website = $_POST['website'];

    if(!empty($brandname) && !empty($firstname) && !empty($lastname) && !empty($email)){
        $to = '[email protected]';
        $subject = 'Submission Form';
        $body = $firstname;
        $headers = 'From: '.$email;

        if (@mail($to, $subject, $body, $headers)){
        }
    }else{
        echo '<script type="text/javascript">
        window.alert("Please fill out all fields!")
        </script>';
        }

    }
    ?>

Upvotes: 0

Views: 3213

Answers (3)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

Since your code sample is PHP-code, it seems that you are posting the form and validate it server-side, and then you show an alert if any field is empty? In that case, the page has already reloaded, before the alertbox is shown. You are mixing server-side and client-side code.

If you want to show an alert box if the user hasn't filled in all the fields (without reloading the page), you will have to do the validation with JavaScript. You should still keep your PHP-validation as well though!

If you use jQuery for instance, you could do something like this:

$("#your-form-id").submit(function(){
    // Check all your fields here
    if ($("#input-field-1").val() === "" || $("#input-field-2").val() === "")
    {
        alert("Please fill out all fields");
        return false;
    }
});

It can of course be done without jQuery as well. In that case you can use the onsubmit attribute of the form tag to call a JavaScript function when the form is posted, and within that function you do the validation of the form, show an alert box if any field is empty, and then return false from the function to prevent the form from being posted to the server.

Upvotes: 2

Prof
Prof

Reputation: 2908

Yeah i assume you need something like this:

<script type="text/javascript">
function do_some_validation(form) {

  // Check fields
  if (! /* Contition 1 */ ) return false;
  if (! /* Contition 2 */ ) return false;
  if (! /* Contition 3 */ ) return false;
  form.submit();

}
</script>

<form onsubmit="do_some_validation(this) return false;" action="script.php" method="post">

// Fields

</form>

This will only submit the form once all JavaScript conditions in do_some_validation are met... Please note this is not advised over and above PHP validation, this should be used purely for comfort for the user not having to submit the page when there's something Javascript can validate against

For any further PHP validation messages, you can either pass variables into GET or SESSION, eg.

<?php
session_start();

if (count($_POST)) {
  if (!/* Condition 1 */) $_SESSION['error'] = "Message";

  if (!isset($_SESSION['error'])) {
    // Proceed
    } else header("Location: script.php");

}
?>

On the page:

<?php if (isset($_SESSION['errir'])) {

  echo $_SESSION['error'];
  unset($_SESSION['error']);

} ?>

Upvotes: 2

Ahmad Hajjar
Ahmad Hajjar

Reputation: 1853

You are alerting your user after posting response ... in this case I would re-post the whole form again with its values set to $_POST or variables that were set using it, for example :

  <input type='text' name='brandname' value='<?php echo $_POST['brandname'];?>' />

or :

  <input type='text' name='brandname' value='<?php echo $brandname; ?>' />

and so on

But in this case I recommend using client-side validation on the form (Using javascript)

Upvotes: 2

Related Questions