By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 1,962 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

Changing row color row on submit button

P: 59
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.
Oct 1 '08 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
Post your code.

Use the style.backgroundColor property to change the colour of the row.
Oct 1 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Is this thread related to the same problem?
Oct 1 '08 #3

P: 59
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
  1. <p>
  2. <form  method="POST" name="kaps" id="kaps" action="" >
  3.  
  4. <table>
  5. <tbody>
  6. <tr class="s1">
  7. <th scope="s2">My name</th>
  8. <td colspan="2"><input type="text" name="name" value="<?print $name; ?>"></td>
  9. </tr>
  10.  
  11. <tr>
  12. <th scope="s2">Age</th>
  13. <td colspan="2"><input type="TEXT" name="age" value="<?print $age; ?>"></td>
  14. </tr>
  15.  
  16. <tr class="s1">
  17. <th scope="s2">Sex</th>
  18. <td colspan="2">
  19. <select name="sex">
  20.     <option value="0">Male</option>
  21.     <option value="1">Female</option>
  22. </select>
  23. </td>
  24. </tr>
  25.  
  26. <tr>
  27. <th scope="s2">Country</th>
  28. <td colspan="2">
  29. <select name="con">
  30.     <option value="0">Bangalore</option>
  31.     <option value="1">Chennai</option>
  32.     <option value="2">Delhi</option>
  33.     <option value="3">Kolkatta</option>
  34.     <option value="4">Other</option>
  35. </select>
  36. </td>
  37. </tr>
  38.  
  39. </tbody>
  40. </table>
  41. <br>
  42.  
  43. <input type="submit" value="Submit" name="Submit"></label>
  44. </form>
  45. </p>

kaps.css

Expand|Select|Wrap|Line Numbers
  1. table {
  2.     font: 11px verdana,verdana, arial;
  3.     margin: 0;
  4.     padding: 0;
  5.     border-collapse: collapse;
  6.     text-align: left;
  7.     color: #333;
  8.     line-height: 19px;
  9.     }
  10.  
  11. caption {
  12.     font-size: 14px;
  13.     font-weight: bold;
  14.     margin-bottom: 20px;
  15.     text-align: left;
  16.     text-transform: uppercase;
  17.     }
  18.  
  19. td {
  20.     margin: 0;
  21.     padding: 2px 2px;
  22.     border: 1px dotted #f5f5f5;
  23.     }
  24.  
  25. th {
  26.     font-weight: normal;
  27.     }
  28.  
  29. tbody tr th {
  30.     padding: 2px 2px;
  31.     border-bottom: 1px dotted #fafafa;
  32.     }
  33.  
  34. tr { 
  35.     background-color: #FBFDF6;
  36.     }
  37.  
  38. tr.odd {
  39.     background-color: #EDF7DC;
  40.     }

Please help me to solve this problem.

With regards
Oct 3 '08 #4

P: 93
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
  1. <tr id='RowId' ........
  2. function changeBakgrnd()
  3. {
  4.  var textId=$('RowId');
  5. textId.className='Whatever You LIke';
  6. }
Oct 3 '08 #5

P: 59
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
  1. <tr id='RowId' ........
  2. function changeBakgrnd()
  3. {
  4.  var textId=$('RowId');
  5. textId.className='Whatever You LIke';
  6. }

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,
Oct 4 '08 #6

P: 93
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.
Oct 4 '08 #7

acoder
Expert Mod 15k+
P: 16,027
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().
Oct 4 '08 #8

P: 93
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("");
Oct 13 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.