Changing row color row on submit button

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • gubbachchi
    New Member
    • Jan 2008
    • 59
    #1

    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.
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Post your code.

      Use the style.backgroun dColor property to change the colour of the row.

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032
          #3
          Is this thread related to the same problem?

            Comment

            • gubbachchi
              New Member
              • Jan 2008
              • 59
              #4
              Originally posted by acoder
              Post your code.

              Use the style.backgroun dColor property to change the colour of the row.
              Here is my code,

              kaps.php

              Code:
              <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

              Code:
              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

                Comment

                • Rsmastermind
                  New Member
                  • Sep 2008
                  • 93
                  #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
                  Code:
                  <tr id='RowId' ........
function changeBakgrnd()
{
 var textId=$('RowId');
textId.className='Whatever You LIke';
}

                    Comment

                    • gubbachchi
                      New Member
                      • Jan 2008
                      • 59
                      #6
                      Originally posted by 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
                      Code:
                      <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.classNa me='Whatever You LIke';". Please help me.

                      With regrads,

                        Comment

                        • Rsmastermind
                          New Member
                          • Sep 2008
                          • 93
                          #7
                          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.Her e use onclick event.
                          Know, textId.classNam e='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.

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              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.getEle mentById().

                                Comment

                                • Rsmastermind
                                  New Member
                                  • Sep 2008
                                  • 93
                                  #9
                                  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.getEle mentById("");

                                    Comment

                                    Previous template Next
                                    Working...