Changing the color of the td without updating the page with ajax

Navigation
2

How to solve this problem, I saw that there are solutions in ajax but I could not develop, what I need is to change the color of the td of a table without having to refresh the page , the color change of the td should happen when I click on the radio button that has a yellow value and after clicking the submit button it processes and changes the color for which I chose, the color should only change in this td the others must remain the colors already assigned. 

    <!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>Untitled Document</title>
    </head>

    <body>
    <table width="900" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td bgcolor="#00FF00">
                <form id="form1" name="form1" method="post" action="">
                    <input type="radio" name="radio" id="radio" value="verde" />
                    Verde
                    <input type="radio" name="radio" id="radio2" value="azul" />
                    Azul
                    <input type="radio" name="radio" id="radio3" value="amarel" />
                    Amarelo
                    <input type="radio" name="radio" id="radio4" value="rosa" />
                    Rosa 
                    <input type="submit" name="button" id="button" value="Submit" />
                </form>
            </td>
        </tr>
        <tr>
            <td bgcolor="#0099FF">
                    <form id="form2" name="form2" method="post" action="">
                    <input type="radio" name="radio" id="radio" value="verde" />
                    Verde
                    <input type="radio" name="radio" id="radio2" value="azul" />
                    Azul
                    <input type="radio" name="radio" id="radio3" value="amarel" />
                    Amarelo
                    <input type="radio" name="radio" id="radio4" value="rosa" />
                    Rosa 
                    <input type="submit" name="button" id="button" value="Submit" />  
                </form>
            </td>
        </tr>
        <tr>
            <td bgcolor="#FFFF00">
                <form id="form3" name="form3" method="post" action="">
                    <input type="radio" name="radio" id="radio" value="verde" />
                    Verde
                    <input type="radio" name="radio" id="radio2" value="azul" />
                    Azul
                    <input type="radio" name="radio" id="radio3" value="amarel" />
                    Amarelo
                    <input type="radio" name="radio" id="radio4" value="rosa" />
                    Rosa 
                    <input type="submit" name="button" id="button" value="Submit" />
                </form>
            </td>
        </tr>
    </table>
    </body>
    </html>
    
asked by anonymous 05.06.2014 / 02:59

1 answer

3

I made an example to change the td with some modifications, I put the value in English and I changed from submit to type button to be able to view without leaving the page.

JavaScript 

$('input[type=button]').click(function(){    
    cor = $(this).parent().find('input[type=radio]:checked').val();    
    $(this).parent().parent().css('background', cor);
});

Explaining, when you click the button that sends the form, it is called the click() that takes value of radio selected and changes the color of td .

See the example here .

    
05.06.2014 / 05:47
Download USB Drivers for Motorola [closed] How to increase the top margin of the element