0

Using an onclick event I'm checking some radio buttons to make sure the correct one is pressed. That part works OK and generates an alert if the correct button isn't pressed. The problem is that the form is still processed even when I return false from the javascript function.

I've even removed the "document.send_mail.submit();" piece of javascript and the form is still being submitted.

I'm sure it's something simple and I'm just not seeing it!!

Here's the code:

HTML:

    <div id="pagecontent">
        <div id="contactform"> <!-- START ORDER CONTENT -->

                <p>
                    We want to hear from you.  Please let us know what's on your mind.
                </p>

            <form name="send_mail" action="contact_confirm.php" method="post">
                <br>
                Email:
                <br>

                <input type="text" size="60" maxlength="60" name="inEmail">
                <br>
                <br>
                Comment:
                <br>

                <textarea   rows="8" cols="200" name="inComment" wrap="physical" ></textarea><br />
                <br>
                <table cellpadding="10">
                    <tr>
                        <td colspan=2>
                            Help control spam - Simple test for human.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="images/dog1.jpg">
                        </td>
                        <td>
                            <input type="radio" name="pet" value="1">Cat<br>
                            <input type="radio" name="pet" value="2">Horse<br>
                            <input type="radio" name="pet" value="3">Dog<br>
                            <input type="radio" name="pet" value="4">Bird<br>
                        </td>
                        <td>
                            <button id="button_contact" class="btnSubmit" align="center" onclick="send_mail_button()">Send Comment</button>
                        </td>
                    </tr>
                </table>
           </form>    
        </div>             <!-- END ORDER CONTENT -->

Javascript:

<script type="text/javascript">
    function send_mail_button(){
        var radios = document.getElementsByName('pet');
        var pet_selected = "";

        for (var i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
                pet_selected = radios[i].value;
                break;
            }
        }
        if (pet_selected == 3){
            document.send_mail.submit();

        }else{
            alert("What's in the picture?");
            return false;
        }

    }
</script>
1
Contributor
1
Reply
3
Views
4 Years
Discussion Span
Last Post by tenorjazz
0

Been working on the problem and think I've got a solution...

The code I'm posting is a simplified version of what's above but it does what I was trying to do.

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <script type="text/javascript">
        function verify(){
            var radios = document.getElementsByName('pet');
            var pet_selected = "";

            for (var i = 0, length = radios.length; i < length; i++) {
                if (radios[i].checked) {
                    pet_selected = radios[i].value;
                    break;
                }
            }
            if (pet_selected != 3){
                alert("What's in the picture?");
                return false;
            }else{
                return true;
            }

        }
    </script>
</head>

<body>
<form ACTION="http://www.webreference.com" onSubmit="return verify()">
<table cellpadding="10">
    <tr>
        <td colspan=2>
            Help control spam - Simple test for human.
        </td>
    </tr>
    <tr>
        <td>
            <img src="images/dog1.jpg">
        </td>
        <td>
            <input type="radio" name="pet" value="1">Cat<br>
            <input type="radio" name="pet" value="2">Horse<br>
            <input type="radio" name="pet" value="3">Dog<br>
            <input type="radio" name="pet" value="4">Bird<br>

            <INPUT TYPE=SUBMIT VALUE="Submit">
        </td>
    </tr>
</table>
</form>

</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.