1

The code is as follows:

    <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form>
    <input type=text name=tick1></input>
    <input type=text name=tick2></input>
    <input type=text name=tick3></input>
    <input type=submit></input>
</form>')">Kaarten bestellen</button>

</div>

I really can't see why it's not working. When i put the form as actual html outside of the script it works fine, and when i use something more like .innerHTML('test') it works just fine. I'm at a loss here.

8 Answers 8

4

You need to add \ (see Multiline String Variables in JavaScript) to end of every line in your multiline string:

<div id="js"><button onclick="document.getElementById('js').innerHTML=('<form>\
    <input type=text name=tick1></input>\
    <input type=text name=tick2></input>\
    <input type=text name=tick3></input>\
    <input type=submit></input>\
</form>')">Kaarten bestellen</button>

</div>

http://jsfiddle.net/o5tuqt1L/

1
  • Thanks a lot, that's going to be very useful in the future! Jan 23, 2015 at 10:24
2

It works fine. You just cannot use linebreaks in this js code. you could use + operator to connect strings.

document.getElementById('js').innerHTML=('<form>'
+'<input type=text name=tick1></input><input type=text name=tick2>'
+'</input><input type=text name=tick3></input><input type=submit>'
+'</input></form>');

working jsfiddle

1

The string literal is not closed, since its multiple rows...why don't you just hide it?

<div id="js">
    <button onclick="document.getElementById('myForm').style.display='block';this.style.display='none';">
        Kaarten bestellen
    </button>
    <form id="myForm" style="display:none">
        <input type=text name=tick1></input>
        <input type=text name=tick2></input>
        <input type=text name=tick3></input>
        <input type=submit></input>
    </form>
</div>

1

Javascript's innerHTML is a property, not a method, so you just assign a value to it like so

document.getElementById('js').innerHTML = "Hello, World.";

innerHTML Explanation

Your HTML has invalid syntax:

<form>
<input type=text name=tick1></input>
<input type=text name=tick2></input>
<input type=text name=tick3></input>
<input type=submit></input>
</form>

Your type and name attribute values need to be wrapped in double quotes ". The input element doesn't require contents either so you can make it self closing. Check this:

<form>
<input type="text" name="tick1" />
<input type="text" name="tick2" />
<input type="text" name="tick3" />
<input type="submit" />
</form>

Javascript strings are not multiline. So you need to escape line breaks, like so:

<form>\
<input type="text" name="tick1" />\
<input type="text" name="tick2" />\
<input type="text" name="tick3" />\
<input type="submit" />\
</form>

Explaination on Multi-Line Javascript Strings

1

this is also an answer if i understand your problem in right way.

<div id="js"><button onclick="document.getElementById('js').innerHTML='<form>'
    +'<input type=\'text\' name=\'tick1\'></input>'
    +'<input type=\'text\' name=\'tick2\'></input>'
    +'<input type=\'text\' name=\'tick3\'></input>'
    +'<input type=\'submit\'></input>'
 +'</form>'">Kaarten bestellen</button>

</div>
0

Try this

 <div id="js"><button onclick="document.getElementById('js').innerHTML='<form><input type=text name=tick1></input><input type=text name=tick2></input><input type=text name=tick3></input><input type=submit></input></form>'">Kaarten bestellen</button>

</div>
0
<div id="js"><button onclick="document.getElementById('js').innerHTML='\
    <form>\
        <input type=text name=tick1></input>\
        <input type=text name=tick2></input>\
        <input type=text name=tick3></input>\
        <input type=submit></input>\
    </form>\
'">Kaarten bestellen</button>
</div>
0

I think the problem is cause because the content to be displayed is spanning several lines without being concatenated properly. I have reworked it as follows;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <script type="text/javascript">
        function loadForm(){
            var formContent ="<form>"
                            +"<input type='text' name='tick1'></input>"
                            +"<input type='text' name='tick2'></input>"
                            +"<input type='text' name='tick3'></input>"
                            +"<input type='submit'></input>"
                            +"</form>";
            document.getElementById('js').innerHTML =(formContent);
        }
    </script>

    <div id="js">
        <button onclick="loadForm()">Kaarten bestellen</button>
    </div>

</body>
</html>

I think this also makes the code cleaner.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.