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

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.setAttrib开发者_StackOverflowute('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);
}

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.

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 */});

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);
            }
    }
}