unable to get post data in php from data generated by javascript - php

Question

<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
element.setAttribute("placeholder", "Enter a new category name");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div id="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/><br/><br/>
<input type="input" name="link" placeholder="Enter a link here"><br/><br/><br/>
<select name ="category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
<br/><br/>
</div>
<select name="site_type">
<?php
displaySitetype();
?>
</select><br/><br/><br/>
<input type="submit" value="Submit data">
</form>
<?php
if($_POST['category']=="Create new category") {
if($_POST['new_cat'])
{
$new_cat=mysql_real_escape_string($_POST['new_cat']);
create_new_catentry($new_cat);
$catname=$new_cat;
}
?>
I am not able to get the value of new_cat using $_POST in the same page. What am i doing wrong? I am not able to solve it. I am able to get every other post data from the page without any fault, is there any naming stuff gone wrong? I am not sure what the problem is, is my Javascript wrong?
Update: Please note that the php script down at the bottom is just a small part of a system not the whole part.

Answer 1

In your JS code you're appending the new <input> within the cat div, but this way it will be outside the <form>. Append your field to the form, assigning it an id, like this:
HTML:
<form method="post" action="" id="catform">
JS:
var foo = document.getElementById("catform");
foo.appendChild(element);

Answer 2

In your javascript add new attribute:
element.setAttribute("id", "new_cat");