String concatenation error

I have a HTMl form

<form action="" method="post" enctype="multipart/form-data">
    <p>
        Banner Ad Name :<br />
        <input type="text" name="bannerAdName" id="bannerAdName" />
    </p>
    <p>
        Your web page :<br />
        <input type="text" name="bannerAdWeb" id="bannerAdWeb" />
    </p>
    <p>
        Ad image :<br />
        <input type="file" name="bannerAdImage" id="bannerAdImage"开发者_开发问答/>
    </p>
    <p>
        Title :<br />
        <input type="text" name="bannerAdTitle" id="bannerAdTitle" />
    </p>
    <p>
        Description :<br />
        <textarea name="bannerAdDesc" id="bannerAdDesc" ></textarea>
    </p>
    <div id="button"><input type="button" value="VIEW" onclick="return upload()"/></div>

    <input type="hidden" value="POST" />
</form>

And a Javascript

<div id="banAdT">

                                   <script>
                        document.getElementById("bannerAdWeb").onchange = function() {
                        document.getElementById("banAdT").innerHTML = '<a href="'+this.value+'">';
                        }
                    </script>

                    <script>
                        document.getElementById("bannerAdTitle").onchange = function() {
                        var u = this.value;
                        document.getElementById("banAdT").innerHTML += u;
                        document.getElementById("banAdT").innerHTML += '</a>';
                        alert(document.getElementById("banAdT").innerHTML);
                        }
                    </script> 
    </div>

I am expecting the alert to show something like <a href="someurl">Some Title</a> . But instead it shows <a href="someurl"></a>Some Title ! Please help..I can't find where I have done the wrong

Try something like this:

            <script>
                document.getElementById("bannerAdWeb").onchange = function() {
                document.getElementById("banAdT").innerHTML = '<a id="bandAdTLink" href="'+this.value+'"></a>';
                }
            </script>

            <script>
                document.getElementById("bannerAdTitle").onchange = function() {
                var u = this.value;
                document.getElementById("bandAdTLink").innerHTML += u;
                alert(document.getElementById("banAdT").innerHTML);
                }
            </script>

Solution explanation: you should never insert invalid HTML into the DOM via javascript.

You can't put invalid bits of HTML into the DOM and expect them to remain. The browser will error correct, e.g.

document.getElementById("banAdT").innerHTML = '<a href="'+this.value+'">';

That will be error corrected by the browser to an empty A element.

var u = this.value;
document.getElementById("banAdT").innerHTML += u;

That will likely append a u character after the A element.

document.getElementById("banAdT").innerHTML += '</a>';

No idea what the browser will make of that, it is literally creating:

<a href="..."></a>u</a>

so whatever happens is browser dependent.

Use DOM methods, don't mess around with innerHTML and string manipulation for non-trivial stuff. E.g. create the A element like:

var a = document.createElement('a');
a.href = this.value;

and later

a.appendChild(document.createTextNode('u'));

then append the a element something like:

document.getElementById("banAdT").apppendChild(a);

The problematic code is this:

document.getElementById("banAdT").innerHTML += u;
document.getElementById("banAdT").innerHTML += '</a>';

Those should be document.getElementById("bannerAdTitle").value.