Changing row color row on submit button

gubbachchi

Hi all,

I would like to know how to change the background color of a particular row when the submit button is clicked. I mean to say when the user makes a wrong entry in the textbox and click submit button, the row containing that particular textbox should be changed to other color. can anybody give me some idea as to how can this be done. Can this be done with php or javascript.
Please give me some hints.

acoder

Post your code.

Use the style.backgroundColor property to change the colour of the row.

acoder

Is this thread related to the same problem?

gubbachchi

Post your code.

Use the style.backgroundColor property to change the colour of the row.

Here is my code,

kaps.php

Expand|Select|Wrap|Line Numbers

 <p>

<form  method="POST" name="kaps" id="kaps" action="" >
 
<table>

<tbody>

<tr class="s1">

<th scope="s2">My name</th>

<td colspan="2"><input type="text" name="name" value="<?print $name; ?>"></td>

</tr>
 
<tr>

<th scope="s2">Age</th>

<td colspan="2"><input type="TEXT" name="age" value="<?print $age; ?>"></td>

</tr>
 
<tr class="s1">

<th scope="s2">Sex</th>

<td colspan="2">

<select name="sex">

    <option value="0">Male</option>

    <option value="1">Female</option>

</select>

</td>

</tr>
 
<tr>

<th scope="s2">Country</th>

<td colspan="2">

<select name="con">

    <option value="0">Bangalore</option>

    <option value="1">Chennai</option>

    <option value="2">Delhi</option>

    <option value="3">Kolkatta</option>

    <option value="4">Other</option>

</select>

</td>

</tr>
 
</tbody>

</table>

<br>
 
<input type="submit" value="Submit" name="Submit"></label>

</form>

</p>

kaps.css

Expand|Select|Wrap|Line Numbers

 table {

    font: 11px verdana,verdana, arial;

    margin: 0;

    padding: 0;

    border-collapse: collapse;

    text-align: left;

    color: #333;

    line-height: 19px;

    }
 
caption {

    font-size: 14px;

    font-weight: bold;

    margin-bottom: 20px;

    text-align: left;

    text-transform: uppercase;

    }
 
td {

    margin: 0;

    padding: 2px 2px;

    border: 1px dotted #f5f5f5;

    }
 
th {

    font-weight: normal;

    }
 
tbody tr th {

    padding: 2px 2px;

    border-bottom: 1px dotted #fafafa;

    }
 
tr { 

    background-color: #FBFDF6;

    }
 
tr.odd {

    background-color: #EDF7DC;

    }

Please help me to solve this problem.

With regards

Rsmastermind

Just do onething

define the two different classes first as befor submit and one after submit
in those two classes mention the colour you like

Now on fire of the event like on submit or onclick call the function

take the id of the corresponding field and change the classname.With these syntax

Expand|Select|Wrap|Line Numbers

 <tr id='RowId' ........

function changeBakgrnd()

{

 var textId=$('RowId');

textId.className='Whatever You LIke';

}

gubbachchi

Just do onething

define the two different classes first as befor submit and one after submit
in those two classes mention the colour you like

Now on fire of the event like on submit or onclick call the function

take the id of the corresponding field and change the classname.With these syntax

Expand|Select|Wrap|Line Numbers

<tr id='RowId' ........

function changeBakgrnd()

{

var textId=$('RowId');

textId.className='Whatever You LIke';

}

Hi, thanks for the reply.

I need some more help regarding this.
Where will I include this part of code. How can I embed html with javascript in the body part. Please explain me more about this line since I my knowledge in javascript is poor. "textId.className='Whatever You LIke';". Please help me.

With regrads,

Rsmastermind

You can write this piece of code either in the same page or in the external js file
The methods are shown below

<script type="text/javascript">

the function body should be here enclose this tag in between the <head> </head> tag of your html page.

</script>

Call the function on event as per the requirement.Here use onclick event.
Know, textId.className='Whatever You Like '; Tells you that you are changing the class of element whose Id is stored in textId.If once the class is changed then the colour will also change you can change even style of the element in this way.

acoder

Note that the $() function is not available by default in JavaScript, so you need to either use a library which defines it, define it yourself, or use document.getElementById().

Rsmastermind

Yes if you are working in some project of company they might be using the library like prototype js framework.If not then just go with the basic one i.e document.getElementById("");

Changing row color row on submit button

Post your reply

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ