CODEWITHSUNDEEP
javascriptphpjquery
user4943236
user4943236

Reputation: 6324

How to change the color of dynamically generated text box

I'm facing difficulty in changing the color of the dynamically generated text box on click event. The idea is that if user would like to update text in the text box, the color of the text box should be changed. Here is my code: The below code actually fetches data from database and display it to the user

echo '<td>'.
     '<input type = "text" class="form-control" onclick="changeColor()" disabled = "disabled" 
     id ="'.$row["ID"].'"  name = "fieldText['.$row["ID"].
     ']" value = "'.$row["fieldText"].'">'."</td>";

On Click event, I would like to change the color of the text box, here is my attempt:

changeColor () { this.style.color = '#cc0000'; }

I have integrated this code in the above line, however it is giving me an error.

ERROR: TypeError: Cannot set property 'color' of undefined

Upvotes: 3

Views: 2399

Answers (4)

UnmeshD
UnmeshD

Reputation: 159

In order to get event from dynamically generated element, you need to bind event start with document object.

e.g.

$(document).on("click",".className or #id" ,function(e){
});

For input type use blur event or click event as per your requirement

$(document).on("click/blur","input[type="text"],function(e){
    $(this).css({'color': '#cc0000});
});

Upvotes: 0

An0nC0d3r
An0nC0d3r

Reputation: 1303

You can make it simpler by binding to the click event on inputs and remove the inline onClick()...

$('input').on('click', function(){

    $(this).css({ 'border': '1px solid black', 'background-color': 'white' });
})

And by making use of the 'data-' attribute, your can isolate which inputs you wish to bind to...

<input data-myattribute="" blah blah blah />

Then you could use

$(document).on('click', 'input[data="myattribute"]', function(){

    $(this).css({ 'border': '1px solid black', 'background-color': 'white' });
})

EDIT FROM FOLLOW UP QUESTION

HTML

<button id="update">Update</button>

JS

$('#update').on('click', function(){

    // Gets the input elements you're interested in
    var items = $(document).find('input[data="myattribute"]');
    // Loops through each jQuery object and you can apply whatever property values you want
    items.each(function(){
        $(this).css({ 'border': '1px solid blue', 'background-color': 'red' });
    });

});

Upvotes: 1

Niranjan N Raju
Niranjan N Raju

Reputation: 11987

First give a class to your input, may be Txt1

If you want to do it on click(),

echo '<td>'.'<input type = "text" class="form-control Txt1" onclick="changeColor()" disabled = "disabled" id ="'.$row["ID"].'"  name = "fieldText['.$row["ID"].']" value = "'.$row["fieldText"].'">'."</td>";

Style

.background{
     background-color : #90EE90;
}

Script

$(document).ready(function() {

  $(document).on("click",".Txt1",function() {
   $(this).addClass('background');
 });

 $(document).on("blur",".Txt1",function() {
   $(this).removeClass('background');
 });

});

If you want for on focus(), change code like this,

$(document).on("focus",".Txt1",function() {

Here is the working fiddle

Upvotes: 0

Tushar
Tushar

Reputation: 87203

Change the event handler to send the current context this to the event handler.

onclick="changeColor(this)"

And in JS use the element context and set the properties on it.

function changeColor (el) {
    el.style.color = '#cc0000';
}

I will recommend to use class instead of setting inline styles.

CSS:

.warning {
    color: #c00;
}

JS:

el.classList.add('warning');

As jQuery is included on the page, I'd recommend to use it to bind event.

$('input.form-control').on('click', function() {
    $(this).addClass('warning');
});

To change the color of the element on focus

input:focus, input:active {
    border-color: #c00;
}

Upvotes: 1

Related Questions