print html input properties and variables on screen in Javascript file

Question

i call a javascript function from an input text control (in a php file):

<input name="first_name"  id="first_name" size="30" maxlength="25" type="text" value="{$fields.first_name.value}" onblur="checkvalid(this);">

This is the function in the javascript file:

function checkvalid(control){
  alert(control);   
}

now i need to debug this control and see its properties, variables and values (not using the Visual studio, using 'eclipse'). so i guess my only option is print on screen the properties of the html input control but when i do alert(control), i get "[object HTMLInputElement]" message and not the properties of the control.

how can i debug the html control? and if i can't , how can i print its properties and variables?

Answer 1

The properties you refer to are actually called attributes. Let's make a function that will iterate over an element's attributes, list them in a nicely formatted string and alert.

function check(element) {
    var attrs = element.attributes;
    var output = "";

    for (var i  = 0; i < attrs.length; i++)
        output += attrs.item(i).name + ': ' + attrs.item(i).value + '\n';

    alert(output);
}

Now we'll call it for your element. It's got id="first_name" , so we may use document.getElementById .

check(document.getElementById("first_name"));