Jquery Change Input background color if entry matches PHP Array?

Question

I have a simple form that has 3 fields. user, id, email. I have 2 PHP arrays $user & $id

When a user enters there name into the user or id fields I want the respective php arrays checking and if the name or id is in the array then change the background color of the input box they are currently in.

If they update there entry then the checking should continue and if no match is found then revert the background back to it's original white color.

If they empty the input field then the color should change back to white.

The page may be preloaded with values, so I may be changing the background color using php on the initial load..

I've found this, which sort of works for the specified characters in it's array:

$('input').bind("change keyup", function() {
 var val = $(this).val();
 var regex = /["<>&]/g;
 if (val.match(regex)) {
   $(this).css("background", "red");
   val = val.replace(regex, "");
   $(this).val(val);
 }
 $("p").html(val);
});

I've tried to update it to support a php array, but it doesn't work and I don't know how to make it check either array and revert the color back.

This is what I have so far :

JFIDDLE

Thanks :)

UPDATE

I've got this working using the following :

$(function(){
 $('input').bind("change keyup", function() {
    var val = $(this).val();
    if ($(this).attr('id')=="user") {
    var check = <?php echo json_encode($user)?>;
 } else {
    var check = <?php echo json_encode($id)?>;
}
if ($.inArray(val, check) != -1) {
    $(this).css("background-color", "red");
 } else {
    $(this).css("background-color", "white");
    }
  });
});

But is there a neater way to write this ?

Thanks :)

@Hardy - Thanks anyway to do this without additional plugins ? — JeffVader
– JeffVader, Commented Dec 29, 2013 at 12:35
So are you just trying to check for duplicate values? And set background to red if given value already exists in some fields? — Hardy
– Hardy, Commented Dec 29, 2013 at 12:43
Correct. If the user enters a value that is already in the array, set the background color of the input field they are currently to red. and revert it back to white if the either clear the input field or enter a value that is not in the array. Thx — JeffVader
– JeffVader, Commented Dec 29, 2013 at 12:48
I've got this working and have update the original post. Anyway to make the code neater ? — JeffVader
– JeffVader, Commented Dec 29, 2013 at 13:10

Barmar · Accepted Answer · 2013-12-29 12:34:07Z

1

if you want to use your php array in javascript, you can do this:

var myArray = <?php echo json_encode($myArray) ?>;

and do the javascript magic

edited Dec 29, 2013 at 12:34

Barmar

789k57 gold badges555 silver badges669 bronze badges

answered Dec 29, 2013 at 12:32

Sebastian Viereck

6,12563 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JeffVader Over a year ago

Thanks I have this in my script, but it doesn't seem to work. var user = <?php echo json_encode($user)?>;

Collectives™ on Stack Overflow

Jquery Change Input background color if entry matches PHP Array?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related