Changing td color without updating the page with ajax

Asked

Viewed 1,004 times

2

How to solve this problem, I saw that there are solutions in ajax but I couldn’t develop, what I need is to change the color of td of a table without having to refresh the page, change the color of the td should happen when I click on radio button which has a yellow value and right after clicking the button submit it process and change the color I chose, the color should change only 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>
php jquery html ajax table

  • You need the change to occur after processing on the server (with server confirmation via Ajax) or you need to change the color only in the client (before or after the ajax request)?

1 answer

3


I made an example to change the td with some modifications, I put the value in English and I changed submit for the guy 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, by clicking the button that sends the form, is called the click() who catches the value of radio selected and changes the color of the td.

See here the example.

  • You could optimize this caching routine $(this). Parent() since it is used twice. ;)

  • Exactly what I needed, it worked but I came across a problem, and if it was to change the color of the three as it would look ?

  • I don’t know if I’m right, but I noticed that by adding another . Parent() it changes the color of the tr example $(this). Parent(). Parent(). css('background', color);

Browser other questions tagged php jquery html ajax table

You are not signed in. Login or sign up in order to post.