0

I have written a code in javascript which creates a p attribute dynamically along with a button which will remove the content. The function removeValue works fine in Chrome and Firefox but does not work in IE. Also, the setAttribute('style','') is not working in IE either. Lastly when I send the values to another page using window.location it sends undefined instead of the text.

Everything seems to work fine in Firefox and Chrome but I can't get it to work in IE (Currently using IE 7). How can I solve this issue?

The code:

function removeValue(ob)
{
    ob.parentNode.parentNode.removeChild(ob.parentNode);
}
function throwval(obj)
{
    var sent_id = obj.id;     //get id of the button 
    var v = document.getElementById(sent_id).value;
    var newp = document.createElement("p");     //create a new <p> tag
    var text = document.createTextNode(v);
    var buttonnode= document.createElement('input');
    buttonnode.setAttribute('type','button');
    buttonnode.setAttribute('name','del');
    buttonnode.setAttribute('value','Remove');
    buttonnode.setAttribute('style','background-color: Transparent;width: 125;color: blue;border:0');
    buttonnode.setAttribute('onclick','removeValue(this)');
    newp.appendChild(text);
    newp.appendChild(buttonnode);
    document.getElementById("getselected").appendChild(newp);    //append the new <p> tag in the div    
}
function sendvalues()
{
    var div_val = document.getElementById("getselected");
    if(!div_val.getElementsByTagName("p").length)
    {
        alert("Select a value");
    }
    else
    {
        //get seperate values of the paragraph inside div
        var str="|";
        for (i=0; i < div_val.getElementsByTagName("p").length; i++)
        {
            var paragraphs = div_val.getElementsByTagName("p");
            if(!paragraphs.item(i).textContent)
        {
            var pvalues = paragraphs.item(i).innerText;
        }
        else 
        {
            var pvalues = paragraphs.item(i).textContent;
        }
            //var sendpvalues = "products=" + pvalues;
            // alert(pvalues);

            str = str + pvalues + "|";
            //alert (str);
            //ajaxOb.send(sendpvalues);

        }   
        // alert(str);
        window.location="send_data.php?str="+str;
    }
}

Turns out that IE supports 'innerText' and firefox supports 'textContent'. I fixed the undefined issue by using 'if' statement. Code updated

c_d_n
  • 59
  • 1
  • 1
  • 13

1 Answers1

0

IE has an issue with the setAttribute function and event handlers. (Read here.) Use the onclick property in addition to setAttribute.

buttonnode.setAttribute('onclick','removeValue(this)');
buttonnode.onclick = function() { removeValue(buttonnode); };
Community
  • 1
  • 1
GJK
  • 37,023
  • 8
  • 55
  • 74
  • 1
    IE7, wow. You realize that most sites are now only supporting 9 and 10, right? Anyway, it probably didn't work because I used `this` incorrectly. I updated the code. Also, you should probably be using a debugger to look at these issue more closely (if you aren't already). – GJK Apr 14 '13 at 15:19
  • indeed, I am only using it for testing purposes. This worked. Thank you. I also fixed the `undefined` issue. now only the `style` problem remains – c_d_n Apr 14 '13 at 15:38
  • @GJK: That may be true of the kinds of sites that developers use but is not true at all in general. Huge numbers of sites still have to support IE 8 at least and will do for quite some time. There is still a lot of Windows XP around, for a start, and IE 8 is the last version of IE that will run on XP. – Tim Down Apr 14 '13 at 16:03
  • Also, there's no need for the `setAttribute()` line. The second line using the `onclick` property will work in everything. – Tim Down Apr 14 '13 at 16:04
  • Google dropped support for IE8 last November. When Google does something, that's pretty much a guarantee that it's OK for you to do it. – GJK Apr 14 '13 at 16:51
  • I disagree, although that move by Google (who have a vested interest in getting people off IE and onto Chrome) undeniably speeds things along. It really depends on your site's target audience. – Tim Down Apr 15 '13 at 14:19