Search code examples
htmlsubmithtml-select

how to set submit buttons as options?


I am doing a question and answer page. My question is can i use submit button as options. I have tried it but it seems to not work. Here is the code:

    <textarea name="questn" readonly="readonly" cols="45" rows="5">Question</textarea>
    <input type="submit" class="myButton" name="option" value="optiona" />
    <input type="submit" class="myButton" name="option"  value="optionb"/>
    <input type="submit" class="myButton" name="option"  value="optionc"/>
    <input type="submit" class="myButton" name="option"  value="optiond"/>

What i want to do here is that when user clicks on an option it will check whether the value is correct with the answer. I dont want to use a radio button for this. I am using images as options. Is this possible? Please help


Solution

  • You can do it with jQuery.

    visit this page

    http://www.w3schools.com/jquery/event_submit.asp

    you also must write a javascript code to trigger it when item selected/clicked

    Note: use form as selector

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>radio selector example</title>
    <script language="javascript" src="javascript/jquery-1-7-2-mini.js"></script>
    
    </head>
    
    <body>
    Chose your car:
    <form action="index.html" id="form_id">
    <input type="radio" class="radio" name="car" value="Car1" /> Car1<br />
    <input type="radio" class="radio" name="car" value="Car2" /> Car2<br />
    <input type="radio" class="radio" name="car" value="Car3" /> Car3<br />
    <input type="radio" class="radio" name="car" value="Car4" /> Car4<br />
    <input type="radio" class="radio" name="car" value="Car5" /> Car5<br />
    <input type="radio" class="radio" name="car" value="Car6" /> Car6<br />
    <input type="radio" class="radio" name="car" value="Car7" /> Car7<br />
    <input type="radio" class="radio" name="car" value="Car8" /> Car8
    </form>
    
    <script language="javascript">
    $(document).ready(function(){
        $("input.radio").click(function(){
            $("form#form_id").submit(); $()
        });                    
    
     });
    
    </script>
    
    
    </body>
    </html>