Ruben D.S. Ruben D.S. - 15 days ago 5
Javascript Question

Javascript | Button is not submitting form with .innerHTML

I have a problem with a javascript function that sets the .innerHTML of a div.
The HTML code that should appear in the div is a form.
Before i have tested the form it self (without the javascript) and it works. It sends the information to the page is requested.

But when I made the form appear in a div with .innerHTML the layout of the form works fine but the button isn't submitting the form. It does not do anything.

Hope you can help me out. I'm just starting to get some javascript in my head :-)

function reactieID(a,b,c,d){
document.getElementById('myModal').innerHTML= ('<form name="getTheInfo" method="post" action="actionpage.php">');
document.getElementById('myModal').innerHTML+=('<div class="subtitel">Reactie</div>');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="a" type="text" value="'+a+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="b" type="text" value="'+b+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="c" type="text" value="'+c+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="d" type="text" value="'+d+'" />');
document.getElementById('myModal').innerHTML+=('<input size="80" name="reactie" type="text" class="textfield" />');
document.getElementById('myModal').innerHTML+=('<input type="submit" value="Toevoegen" />');
document.getElementById('myModal').innerHTML+=('</form>');
document.getElementById('myModal').innerHTML+=('<a class="close-reveal-modal">&#215;</a>');}


UPDATE:
I have try to add within the line of the button
onclick="this.form.submit()"
but that didn't work either :-(




PROBLEM SOLVED ! (thanks to the help of FrostbiteXIII)



Answer

Its the form tags that it doesnt like - if you put these in first, I suspect it will work a treat. :)

for example:

<html>
<head>
<script>
function reactieID(a,b,c,d){ 
    document.getElementById('myModal').innerHTML+=('<div class="subtitel">Reactie</div>');
    document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="a" type="text" value="'+a+'" />');
    document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="b" type="text" value="'+b+'" />');
    document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="c" type="text" value="'+c+'" />');
    document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="d" type="text" value="'+d+'" />');
    document.getElementById('myModal').innerHTML+=('<input size="80" name="reactie" type="text" class="textfield" />');
    document.getElementById('myModal').innerHTML+=('<input type="submit" value="Toevoegen" />');
    document.getElementById('myModal').innerHTML+=('<a class="close-reveal-modal">&#215;</a>');
}
</script>
</head>
<body onload="reactieID('a','b','c','d')">
<form name="getTheInfo" method="post" action="actionpage.php">
    <div id='myModal'></div>
</form>
</body>
</html>

EDIT: You can even specify the form tag first:

<form name="getTheInfo" id="getTheInfo" method="post" action="">

and then add js to your function above to specify the action to take, and this still works fine:

document.getElementById('getTheInfo').action = "actionpage.php";