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

Subscribe Post Reply

2558

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

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

Oct 3 '08 #4

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';

}

Oct 3 '08 #5

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,

Oct 4 '08 #6

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.

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

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("");

Oct 13 '08 #9

Similar topics

Changing form's field input type

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...

PHP

submit buttons - changing behaviour

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....

Javascript

How to submit form to pop-up window *when* changing a select, etc

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('',...

Javascript

changing the value of a hidden field

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"...

Javascript

changing the URL without reloading the page

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)

Javascript

changing default button

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...

Javascript

Changing image source stops working

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...

Javascript

Dynamically changing a paragraph to make it Bold

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...

Javascript

Problem changing button type in IE using Javascript

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:

Javascript

Migrating Website to Cloud - Emmanuel Katto

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

General

Navigating the Data Structures and Algorithms (DSA)

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...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

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...

Computer Hardware

Changing the language in Windows 10

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...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA