473,387 Members | 1,585 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Changing row color row on submit button

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
8 2557
acoder
16,027 Expert Mod 8TB
Post your code.

Use the style.backgroundColor property to change the colour of the row.
Oct 1 '08 #2
acoder
16,027 Expert Mod 8TB
Is this thread related to the same problem?
Oct 1 '08 #3
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
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
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
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
16,027 Expert Mod 8TB
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
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

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

Similar topics

3
by: Emanuel Marciniak | last post by:
Hi all, We have the form which uses checkboxes for several fields and the target action points to outside webservice. Unfortunatelly they do not support checkboxes. How to pass it as a radio...
2
by: Bartosz Wegrzyn | last post by:
I do have a form with 4 submit buttons. Also I do have a script that checks that for for errors. Right now I have onsubmit() event for checki my form. After it is checked it runs my php script....
3
by: jeff | last post by:
Hello, I have a form that submits it's values to a pop-up window. I've simplied the code: <form name="formname" action="action.php" target="windowName" method="post" onsubmit="window.open('',...
8
by: Ryan | last post by:
I have a hidden field as such: <INPUT TYPE=\"hidden\" name=xmlfield > I have a button that i want to use to call a function to change the value: <INPUT TYPE=submit VALUE="Display XML"...
6
by: iwearwatches | last post by:
Group, What a root canal. Here is what I have: I have a page that has several layers that I will either show/hide based on a graphic/tab that the user clicks. (works perfectly)
2
by: chris | last post by:
i have a form with 3 buttons with a text box next to each button what i want to do is when a textbox is filled out the default button is changed to the button next to that text box rather than...
1
by: Chuck Anderson | last post by:
I'm using a simple, pseudo progress bar. Very simply, I display a still image next to a form submit button until the user clicks on it, and then I change the image source to an animated version of...
3
by: jonniethecodeprince | last post by:
Hello everyone. I want to change the style of a HTML element. I can change the paragraph alignment to left right, justify etc. But I can seem to find the code for any other style change, for...
8
by: mike_solomon | last post by:
I have a button <input type="submit" name="Delete" value="Delete"> This code can not be changed I want to use Javascript to change the type I tried:
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.