CODEWITHSUNDEEP
javascripthtml
pawn doe
pawn doe

Reputation: 53

HTML code getting changed in browser

I have following code inside javascript loop




document.getElementById("alladdress").innerHTML+="<form action=\"updateUserInfo\" method=\"POST\">";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"id\" value="+id+" hidden><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"contact\" value="+contact+"><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"add\" value="+add+" ><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"city\" value="+city+" ><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"zip\" value="+zip+" ><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"state\" value="+state+" ><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"submit\" value=\"Edit Address\"><br>";
document.getElementById("alladdress").innerHTML+="</form>";

but when i check in browser the ending form tag gets appended at the end of form tag (see first line below) because of this my submit button is not working please help me figure out what's the problem.

in my browser's elements tab it shows like below

<form action="updateUserInfo" method="POST"></form>
<input type="text" name="id" value="1" hidden=""><br>
<input type="text" name="contact" value="ijkl"><br>
<input type="text" name="add" value="abcd"><br>
<input type="text" name="city" value="efgh"><br>
<input type="text" name="zip" value="xyza"><br>
<input type="text" name="state" value="mnop"><br>
<input type="submit" value="Edit Address"><br>

Upvotes: 1

Views: 269

Answers (5)

Klezper
Klezper

Reputation: 49

You can also drop each line into an array and join them in the end.

var id=34,contact="Tom",add="asdf",city="NY",zip="12356",state="NY";
var form = Array();
form[0]="<form action=\"updateUserInfo\" method=\"POST\">";
form[1]="<input type=\"text\" name = \"id\" value="+id+" hidden>";
form[2]="<input type=\"text\" name = \"contact\" value="+contact+">";
form[3]="<input type=\"text\" name = \"add\" value="+add+" >";
form[4]="<input type=\"text\" name = \"city\" value="+city+" >";
form[5]="<input type=\"text\" name = \"zip\" value="+zip+" >";
form[6]="<input type=\"text\" name = \"state\" value="+state+">";
form[7]="<input type=\"submit\" value=\"Edit Address\">";
form[8]="</form>";

document.getElementById("alladdress").innerHTML = form.join('<br>',form);
<div id="alladdress">

</div>

Upvotes: 0

pictus
pictus

Reputation: 77

When adding each line seperatly the browser tries to fix your code. I recommend using template-strings, so you don´t have to struggle with escaping characters and appending all with one variable. 

const html = `
<form action="updateUserInfo" method="POST">
    <input type="text" name="id" value="${id}" hidden><br>
    <input type="text" name="contact" value="${contact}"><br>
    ....
</form>
document.getElementById('alladdress').innerHTML += html;
`

Upvotes: 0

brk
brk

Reputation: 50291

That is because browser by itself will try to balance the tags.

Alternatively you can create the template using template literals

document.getElementById("alladdress").innerHTML += "<form 
action=\"updateUserInfo\" method=\"POST\">";
<div id="alladdress"></div>

var id = 'testId';
var contact = 'contact';


document.getElementById("alladdress").innerHTML = `<form action="updateUserInfo" method="POST">
 <input type="text" name ="${id}" value="+${id}+" hidden><br>
 <input type="text" name = "contact" value="+${contact}+"><br>
</form>`;
<div id="alladdress"></div>

Upvotes: 0

Halyna
Halyna

Reputation: 196

Mayby start autosacrifice tag. Try to save in string variable and than innerHtml this value.

var block = document.getElementById("alladdress");
var str = '';
var id = 1, contact = 'default', add='true', city = 'NY', zip = 'true', state = '-';

str+="<form action=\"updateUserInfo\" method=\"POST\">";
str+="<input type=\"text\" name = \"id\" value="+id+" hidden><br>";
str+="<input type=\"text\" name = \"contact\" value="+contact+"><br>";
str+="<input type=\"text\" name = \"add\" value="+add+" ><br>";
str+="<input type=\"text\" name = \"city\" value="+city+" ><br>";
str+="<input type=\"text\" name = \"zip\" value="+zip+" ><br>";
str+="<input type=\"text\" name = \"state\" value="+state+" ><br>";
str+="<input type=\"submit\" value=\"Edit Address\"><br>";
str+="</form>";
block.innerHTML = str;
<div id="alladdress"></div>

Upvotes: 0

mingos
mingos

Reputation: 24502

The browser will try to fix invalid HTML, which means, among others, closing unclosed tags. Note that your first line:

document.getElementById("alladdress").innerHTML+="<form action=\"updateUserInfo\" method=\"POST\">";

creates invalid code. The browser will immediately close that tag for you.

If you want it to behave correctly, build the whole HTML string and do a single innerHTML assignment instead:

const html = "<form action=\"updateUserInfo\" method=\"POST\">"
    + "<input type=\"text\" name = \"id\" value="+id+" hidden><br>"
    + "<input type=\"text\" name = \"contact\" value="+contact+"><br>"
    + "<input type=\"text\" name = \"add\" value="+add+" ><br>"
    + "<input type=\"text\" name = \"city\" value="+city+" ><br>"
    + "<input type=\"text\" name = \"zip\" value="+zip+" ><br>"
    + "<input type=\"text\" name = \"state\" value="+state+" ><br>"
    + "<input type=\"submit\" value=\"Edit Address\"><br>"
    + "</form>";
document.getElementById("alladdress").innerHTML += html;

Upvotes: 3

Related Questions