Javascript - getElementById.innerHTML Problem

Question

I want to create a simple formular which leads the user to 2 different pages (depending on what they choose). I'am using getElementById.innerHTML to differ the code within the site to create the two different <form action="SENDTHEUSERHERE" method="POST"> -HTML-Elements. Here's the code:

 if (blabla which works) 
  { 
    document.getElementById("insert").innerHTML = "<form action='insert.php' method='POST'>"; 
  }
 else if (blabla which works) 
  { 
    document.getElementById("service").innerHTML = "<form action='service.php' method='POST'>";  
  }

 // MORE BLABLA-CODE

  <span id='insert'></span>
  <span id='service'></span>

  // REST OF THE FORMULAR

When I'am sending this formular, it leads me simply to the same page it was sent from. I guess that means, that those .innerHTML-Elements aren't recognized. Have you any suggestions how I can solve this? Btw.. yes, I'am a Javascript Noob -_-

Thanks for any help!

Answer 1

Just change the form action instead of using innerHTML ...

if (conditionOne) {
    document.forms['formName'].action = 'insert.php';
} else if (conditionTwo) {
    document.forms['formName'].action = 'service.php';
} else {
    alert('Error!');
}

Answer 2

You're going to have to post either your full HTML page + javascript code or a working example showing the problem. From the little you posted, it's impossible to tell what could be wrong.

But, that said, you're going about this problem in the wrong way. Instead of changing the innerHTML of some nodes, have one form with no action, and then in javascript do something like:

<form id="myForm">

var myForm = document.getElementById( "myForm" );
myForm.action = ( someConditionHere ) ? "insert.php" : "service.php";

Answer 3

If your example is what you need to do, you can just modify the action attribute of an existing form.

<form method='post' action='nowhere'>
<stuff>
</form>

<script type='text/javascript'>
if (something) {
  document.forms[0].action = 'insert.php';
} else {
  //etc
}
</script>