Using an Image as a Submit Button in HTML

Posted by: twmeier

Tagged in: Javascript , HTML

There are times when you want to use an image as a button to submit a form. One case is when you need to use JavaScript to check the html form was submitted correctly. Here is the code:

<script>
    function checkForm()
    {
        var msg = "Please correct the following: \n\n";
        var error = false;
       
        if(document.formName.elementName.value=="") {
            msg += "You must enter a date.\n";
            error = true;
        }
       
        if(error){
            alert(msg);           
        }else{
            if(confirm("Are you sure you want to submit this form?")){                                               
                document.formName.submit();       
            }                   
        }
    }
</script>

<form name="formName" action="/index.php?&task=something" method="post">
    <input type="text" name="elementName" id="elementId" value="">
    ....
</form>


<a href="#" onclick="checkForm(); return false;"><img src="/images/brown_submit.jpg" /></a>


The method above works in all browsers, and is easy to use. When you click the image, the JavaScript function is called. If there are no errors in the form, the function submits the form. Its that easy.

Comments (1)add comment

Adddictive Media said:

0
Website Design Company Delhi
Addictive Media is a premium provider of website design and web development services for businesses. Our primary aim is to create a compelling, targeted yet simple user experience that not only promotes a business but also spreads a positive outlook about it- Website Design Delhi, Website Design Company Delhi

We launch websites that launch businesses. And this is the real goal of all the services that are provided by us. As a creative agency we understand the importance of the four Ds - Discovering, Designing, Developing and Delivering. We closely monitor all the stages that go into developing a successful website. For us the relation with our clients does not end with the delivery of the final product, it continues as long as the clients use our designed product..
 
February 22, 2010 | url
Votes: +0

Leave a Comment

busy