javascript browser problem works in FF but not in IE and Chrome

Question

<div id = '147'> 
    <u><b><font color = 'blue'  onClick = 'javascript:showbox(147)'>Comment </font</b></u>
</div>

<script type='text/javascript'>
<!--        
    function showbox(var1) {
        document.getElementById(var1).innerHTML = var1 + " <form name = 'commentform'  method = 'post' action = ''><input type='text' name = 'comment' value='Enter Your Comment' ><input type='hidden' value= " + var1 + " name='wallpostid'> <input type ='hidden' value = '$userid' name = 'userid' > <input type='submit' name = 'send' value='Post your Comment' onClick='javascript:postcomment()'>  </form>";
        <b onclick= 'postcomment()' > </b>;
    }
    function postcomment() {
        document.commentform.comment.submit();
    }
-->
</script>

Above is the code. It is working in FF but not in IE or Chrome.

Can anyone tell where I went wrong. Any solution to make it work in all browsers?

What exactly is not working? What does it do and what do you expect it to do? Btw. I highly doubt it "works" in Firefox, you have JS syntax errors. And you really should have a look at CSS. — Felix Kling, Aug 21 '11 at 12:37

score 1 · Answer 1 · answered Aug 21 '11 at 12:37

1

There are some typos here is one:

"...<input type='hidden' value= " + var1 + " name='wallpostid'>... "

"...<input type='hidden' value='" + var1 + "' name='wallpostid'/>... "

Note the / and the two '

Also this line

    <b onclick= 'postcomment()' > </b>;

does not do anything as it is in javascript and not html section of the file.

answered Aug 21 '11 at 12:37

Hogan

69,564
10
76
117

The typos shouldn't affect whether or not it works. And the ` – Abraham Aug 21 '11 at 12:41
1

@Abraham: No he is not. ` – Felix Kling Aug 21 '11 at 12:43

Marcel · Answer 2 · 2011-08-21T13:01:31.517

First of all, your markup is a bit of a mess so no wonder there's a mess up amongst it. However I think your problem is that $userid is being passed through as a string and not it's value as a variable of some sorts.

Here's your markup tidied up a bit (but still leaves much to be desired) with some redundant stuff removed and the $userid echoed PHP-style.

<div id="147" onclick="showbox(this)"><a href="#">Comment</a></div>
<script>
function showbox(el) {
    el.innerHTML = el.id + '\
        <form name"="commentform" method="post" action="">\
            <input type="text" name="comment" value="Enter Your Comment" />\
            <input type="hidden" value="' + el.id + '" name="wallpostid" />\
            <input type="hidden" value="<?php echo $userid; ?>" name="userid" />\
            <input type="submit" name="send" value="Post your comment">\
        </form>';
}
</script>

score 0 · Answer 3 · answered Aug 21 '11 at 12:38

document.getElementById(var1).innerHTML = var1 + " <form name = 'commentform'  method = 'post' action = ''><input type='text' name = 'comment' value='Enter Your Comment' /><input type='hidden' value= '" + var1 + "' name='wallpostid' /> <input type ='hidden' value = '$userid' name = 'userid' /> <input type='submit' name = 'send' value='Post your Comment' onClick='javascript:postcomment()' /></form><b onclick= 'postcomment()' ></b>";

Abraham · Answer 4 · 2011-08-21T13:07:23.577

0

A bunch of things are wrong:
1. ID's can't start with a numeral
2. Use onclick, not onClick
3. Don't put javascript: in your onclick
4. Your <b onclick... is useless
5. Your postcomment function just submits the form - you don't need JS for that
6. Make sure you set an action for the form
Here's the complete fixed code:

<div id='div147'><u><b><font color='blue' onclick='showbox(147)'>Comment</font></b></u></div>
<script type='text/javascript'>      
function showbox(var1) {
    document.getElementById(var1).innerHTML = var1 + " <form name='commentform'  method='post' action='someurl.php'><input type='text' name='comment' value='Enter Your Comment'><input type='hidden' value='" + var1 + "' name='wallpostid'><input type='hidden' value='$userid' name='userid'> <input type='submit' name='send' value='Post your Comment'>  </form>';
}
</script>

edited Aug 21 '11 at 13:07

answered Aug 21 '11 at 12:39

Abraham

20,316
7
33
39

HTML5 allows IDs to start with numbers. And although HTML4 does not allow it, I doubt this is the reason for the problems. – Felix Kling Aug 21 '11 at 12:44
And your fixed code is slightly broken as you end a comment tag that was never started. – Lightness Races in Orbit Aug 21 '11 at 13:05
@Tomalak: What I mean is that once you put the `` into the innerHTML, you can't click it b/c it doesn't have any content! I fixed the comment, though ;) – Abraham Aug 21 '11 at 13:08

score 0 · Answer 5 · edited May 23 '17 at 12:21

0

While adding inner html some times run time errors are shown by some browsers. Reffer this question for better understandability for how to add inner html. Also I dont think you need onclick function for submitting form. It will submit automatically after clicking on submit

edited May 23 '17 at 12:21

Community

1
1

answered Mar 05 '12 at 12:40

Sarin Jacob Sunny

2,138
3
29
61

javascript browser problem works in FF but not in IE and Chrome

5 Answers5