I'm having a little trouble setting a form using inner HTML:

document.getElementById("Button").innerHTML='<form action="add.php" method="post" onSubmit="track('P1');">'+
'<input type="hidden" name="add" value="true"> '+
'<input type="hidden" name="item" value="P1"> '+
'<input type="hidden" name="pID" value="3"> '+
'<input type="hidden" name="qty" value="1"> '+      
'<input name="image" type="image" onMouseOver="this.src='/img/shop/r_addbasket.png'" '+
'onMouseOut="this.src='/img/shop/addbasket.png'" '+
'value="Add to Basket" src="/img/shop/addbasket.png" alt="AddtoBasket"></form>';

I assume its because I've got some ' inside the form thats throwing it off. I tried using an escape character but didn't work.

TIA

I'm having a little trouble setting a form using inner HTML:

document.getElementById("Button").innerHTML='<form action="add.php" method="post" onSubmit="track('P1');">'+
'<input type="hidden" name="add" value="true"> '+
'<input type="hidden" name="item" value="P1"> '+
'<input type="hidden" name="pID" value="3"> '+
'<input type="hidden" name="qty" value="1"> '+      
'<input name="image" type="image" onMouseOver="this.src='/img/shop/r_addbasket.png'" '+
'onMouseOut="this.src='/img/shop/addbasket.png'" '+
'value="Add to Basket" src="/img/shop/addbasket.png" alt="AddtoBasket"></form>';

I assume its because I've got some ' inside the form thats throwing it off. I tried using an escape character but didn't work.

TIA

• javascript
• html

2 Answers 2

try this, you didnt escape the ' when using it in a different context

document.getElementById("Button").innerHTML='<form action="add.php" method="post" onSubmit="track(\'P1\');">'+
'<input type="hidden" name="add" value="true"> '+
'<input type="hidden" name="item" value="P1"> '+
'<input type="hidden" name="pID" value="3"> '+
'<input type="hidden" name="qty" value="1"> '+      
'<input name="image" type="image" onMouseOver="this.src=\'/img/shop/r_addbasket.png\'" '+
'onMouseOut="this.src=\'/img/shop/addbasket.png\'" '+
'value="Add to Basket" src="/img/shop/addbasket.png" alt="AddtoBasket"></form>';

Don't escape anything. You don't need to escape XML:

    var xml = <form action="add.php" method="post" onSubmit="track('P1');">
    <input type="hidden" name="add" value="true" /> 
    <input type="hidden" name="item" value="P1" /> 
    <input type="hidden" name="pID" value="3" /> 
    <input type="hidden" name="qty" value="1" />     
    <input name="image" type="image" onMouseOver="this.src='/img/shop/r_addbasket.png'" 
    onMouseOut="this.src='/img/shop/addbasket.png'"
    value="Add to Basket" src="/img/shop/addbasket.png" alt="AddtoBasket" />
</form>
    document.getElementById("Button").innerHTML = xml;

Make sure to close the input tag (as I did above). This is cleaner and easier to read than trying to add the escape characters.