js-html - typed textbox value not set in attribute?

Question

Fellows,
I wrote some code to save the current state of a web page. When there's a textbox where I change the value by input, the change isn't registered in the html code. Even when I call:

object.value = 'x';

is doesn't change the value. When I use:

object.setAttribute('value','x');

Then the change is registered in the html code.

having a loop go through textboxes setting up the onchange attribute isn't a solution as I have special textboxes that already have their onchange attribute setup.

Thanks for any help

function SaveHTML()
{
removeThis(get('Source'));
var newdiv = document.createElement('div');
newdiv.setAttribute('id','Source');
newdiv.style.position= 'absolute';
newdiv.style.top= (tempY-200)+'px';
newdiv.style.left= (tempX+30)+'px';
newdiv.style.backgroundColor = 'white';
var html=encodeURI(document.getElementsByTagName('body')[0].innerHTML);
newdiv.innerHTML='HTML:<br><textarea rows="20" cols="60">'+html+'</textarea><br><input type=button value=close onclick=removeParent(this)>';
document.body.appendChild(newdiv);
}

function LoadHTML()
{
removeThis(get('Source'));
var newdiv = document.createElement('div');
newdiv.setAttribute('id','Source');
newdiv.style.position= 'absolute';
newdiv.style.top= (tempY-200)+'px';
newdiv.style.left= (tempX+30)+'px';
newdiv.style.backgroundColor = 'white';
newdiv.innerHTML='HTML:<br><textarea id=code rows="20" cols="60"></textarea><br><input type=button value=cancel onclick=removeParent(this)> <input type=button value=load onclick=document.getElementsByTagName(\'body\')[0].innerHTML=decodeURI(get(\'code\').value)>';
document.body.appendChild(newdiv);
}

function get(Element)
{
return document.getElementById(Element);
}

function removeThis(obj)
{ 
try{
obj.parentNode.removeChild(obj);
}
catch (e) {
 return;
}
}

function removeParent(obj)
{
obj.parentNode.parentNode.removeChild(obj.parentNode);
}

Answer 1

Hm, that's odd. I wouldn't expect it to behave that way. Interesting.

You could simply loop through every input field at the time you save the HTML, and do a

object.setAttribute("value", object.value)

?

You could also use one of the big frameworks' event handling functions, they can attach events without overwriting old ones.

Answer 2

setAttribute and getAttribute should not be used as they are not standards, using .value should work. But another way to do this is with jQuery's attr method.

$('#myID').attr('id', 'newID');
$('#myID').attr('value', 'newValue');

Also you should be using the proper quotation marks like this:

newdiv.innerHTML='HTML:<br><textarea rows="20" cols="60">'+html+'</textarea><br><input type="button" value="close" onclick="removeParent(this)">';

and

newdiv.innerHTML='HTML:<br><textarea id="code" rows="20" cols="60"></textarea><br><input type="button" value="cancel" onclick="removeParent(this)"> <input type="button" value="load" onclick="document.getElementsByTagName(\'body\')[0].innerHTML=decodeURI(get(\'code\').value)">';

To set onchange for particular things try a jQuery selector:

$('#myID').onchange(function(){/* your stuff here */});

Answer 3

In the SaveHTML call I run this function. Works like a charm!

function TouchInputs()
{
var everything = document.getElementsByTagName('input');
var everythinglength = everything.length;
for(var i = 0;i<everythinglength;i++)
    {
        try{
            everything[i].setAttribute('value',everything[i].value);
        }
        catch(e){
                alert(e.message);
            }
    }
}