Member Avatar for tenorjazz

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
  • 241 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by tenorjazz
Member Avatar for tenorjazz

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.