don't submit form if form is empty

StackOverflow https://stackoverflow.com/questions/16751387

Question

this is my first post and i'm rather new to php + ajax.

I have most of my coding set up only problem now is that when i press the submit button an notification shows up that only should show up when the text fields aren't empty.

This is my code:

<head><script> 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#ContactForm').ajaxForm(function() { 
            alert("Thank you for subscribing to SHCA"); 
            document.forms["ContactForm"].reset();
        }); 
    }); 

</script> </head>

followed by some php coding:

<?php
        if(strlen($_POST['name']) > 0 AND strlen($_POST['email']) > 0)
        {
        if(isset($_POST['submit']))
        {
         $hostdb = '';
         $namedb = '';
         $userdb = '';
         $passdb = '';

        $conn = mysqli_connect($hostdb , $userdb, $passdb ,$namedb);


        $sql = "INSERT INTO subscribers (name, email) VALUES('$_POST[name]', '$_POST[email]')";



        if (!mysqli_query($conn, $sql))
        {
        die('Error: ' .mysql_error($conn));
        }

        if (!mysqli_ping($conn)) {
echo 'Lost connection, exiting after query #1';
exit;
}

mysqli_close($conn);
}}
else
{

?>

        <form id="ContactForm" action="" method="post">

                    <label for="author">Name:</label> <input type="text" id="name" name="name" class="required input_field float_r" />
                    </br>
                    </br>
                    <label for="email">Email:</label> <input type="text" id="email" name="email" class="validate-email required input_field float_r" />

                    <div class="cleaner h10"></div>

                    <input type="submit" value="Subscribe" id="submit" name="submit" class="submit_btn float_l" />
        </form>
        <?php } ?>

hope anyone here is able to tell me what i should do to only show the "Thank you for subscribing to SHCA" message when the textfields aren't empty

final anwser Dereck forgot the '' in the objects so shout out to dereck for helping me!

$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('#ContactForm').ajaxForm(function() { 
        if( !$('#name').val()) {
             alert("please enter your name");
        }
        if(!$('#email').val()) {
            alert("plese enter your email adress");
            }
        else{
            alert("Thank you for subscribing to SHCA"); 
        }

        document.forms["ContactForm"].reset();
    }); 
});
Was it helpful?

Solution 2

This should do it without having to do a refresh

$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('#ContactForm').ajaxForm(function() { 
        if( !$(#name).val() || !$(#email).val()) {
             //don't display
        }else{
            alert("Thank you for subscribing to SHCA"); 
        }

        document.forms["ContactForm"].reset();
    }); 
});

OTHER TIPS

You need to check the contents of the fields before submitting to the server, a simple script method can check before you submit. If the fields are empty then display an error messge and don't submit the form.

function SubmitDetails()
{
    if(window.ContactForm.name.value == "")
    {
        window.alert("Please enter a name");
        return;
    }if(window.ContactForm.email.value == "")
    {
        window.alert("Please enter an email" );
        return;
    }

    window.ContactForm.submit();
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top