Having trouble hiding and showing a div using PHP+Jquery

Question

User submits their email address, email is checked if it's valid and not in the database..

The problem I am having is that I cannot get the form to hide and the thank you div to show, once the form has been submitted successfully. It currently replaces the email textbox with "Thank you!" text which I don't want.

What must be changed or added so the form is hidden (after it passes error/validation checks) and the thank you div is shown?

Thank you!!

Index.php

<?php

require "includes/connect.php";

$msg = '';

if($_POST['email']){

    // Requested with AJAX:
    $ajax = ($_SERVER['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest');

    try{
        if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
            throw new Exception('Invalid Email!');
        }

        $mysqli->query("INSERT INTO coming_soon_emails
                        SET email='".$mysqli->real_escape_string($_POST['email'])."'");

        if($mysqli->affected_rows != 1){
            throw new Exception('You are already on the notification list.');
        }

        if($ajax){
            die('{"status":1}');
        }

        $msg = "Thank you!";

    }
    catch (Exception $e){

        if($ajax){
            die(json_encode(array('error'=>$e->getMessage())));
        }

        $msg = $e->getMessage();        
    }
}
?>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Notify me test</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/script.js"></script>

</head>

<body>

<div id="launch">

    <h1>Notify</h1>

    <h2>Notify me</h2>

    <form id="form" method="post" action="">
        <input type="text" id="email" name="email" value="<?php echo $msg?>" />
        <input type="submit" value="Submit" id="submitButton" />
    </form>

    <div style="display:none" id="thankyou">
    Thank you!
    </div>


</div>

</body>
</html>

script.js

$(document).ready(function(){

    // Binding event listeners for the form on document ready

    $('#email').defaultText('Enter your Email Address');

    // 'working' prevents multiple submissions
    var working = false;

    $('#page form').submit(function(){

        if(working){
            return false;
        }
        working = true;

        $.post("./index.php",{email:$('#email').val()},function(r){
            if(r.error){
                $('#email').val(r.error);
            }
            else $('#email').val('Thank you!');

            working = false;
        },'json');

        return false;
    });
});

// A custom jQuery method for placeholder text:

$.fn.defaultText = function(value){

    var element = this.eq(0);
    element.data('defaultText',value);

    element.focus(function(){
        if(element.val() == value){
            element.val('').removeClass('defaultText');
        }
    }).blur(function(){
        if(element.val() == '' || element.val() == value){
            element.addClass('defaultText').val(value);
        }
    });

    return element.blur();
}

Answer 1

why do you do this if you dont want to replace input with thank you text?

else $('#email').val('Thank you!');

instead do else { $("#form").hide(); $("#thankyou").show(); } else { $("#form").hide(); $("#thankyou").show(); }

Having trouble hiding and showing a div using PHP+Jquery

Question

1 answers

solution1
2 ACCPTED 2011-03-14 14:25:43

Having trouble hiding and showing a div using PHP+Jquery

Question

1 answers

solution1 2 ACCPTED 2011-03-14 14:25:43

solution1
2 ACCPTED 2011-03-14 14:25:43