Question

I have been creating a website to allow users to rate an image uploaded by another user. I have my code working great. The user is presented with the image, a button to flag the image, 10 radio buttons to choose their rating and a submit button (all within the same form).

My problem is that I would like to remove the submit button and process the form when the user clicks the radio button. The problem with this is that the flag button (image button) is also submitting the form. My code is below:

HTML

<form name="ratebox" action="Box.php?bid=<?php echo $boxId ?>" method="post">
    <table style="margin: 0 auto;">
        <tr>
            <td colspan="2"><img src="img/boxes/<?php echo $boxId ?>.png" title="<?php echo $boxName ?>" height="350" width="350"></td>
        </tr>
    <tr>
    <input
        type="image"
        name="flag_submit"
        src="img/Flag.png"
        onmouseover="this.src='img/Flag_Click.png'"
        onmouseout="this.src='img/Flag.png'"
        height="30"
        width="30"
        />
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align:center;">
            1<input type="radio" name="rdoRate" value="1" >
            2<input type="radio" name="rdoRate" value="2" >
            3<input type="radio" name="rdoRate" value="3" >
            4<input type="radio" name="rdoRate" value="4" >
            5<input type="radio" name="rdoRate" value="5" >
            6<input type="radio" name="rdoRate" value="6" >
            7<input type="radio" name="rdoRate" value="7" >
            8<input type="radio" name="rdoRate" value="8" >
            9<input type="radio" name="rdoRate" value="9" >
            10<input type="radio" name="rdoRate" value="10" > 
        </td>
    </tr>
    <tr><td colspan='4' align='center'><input type='submit' name='rate_submit' value='Rate'></td></tr>
</table>
</form>

PHP

if (isset($_POST['flag_submit_x']))
{
        //Code to process the flagged image
}

if (!empty($_POST['rate_submit']))
{
        //Code to process the rated image
}

Is there any way I can submit the form when a radio button is pressed and retrieve the value of the radio button that has been pressed?

Answer 1

Yes, you need to use Javascript for that. Using jQuery,

$('input[type=submit]').click(function(){
     return false;
});

$('input[type=radio]').click(function(){
    $('form').submit();
});

You need to learn how to use $.ajax() to transfer info to and from PHP. Read this.