JavaScript cannot submit form, even though everything is as it should be?

Question

I got some problems with my JavaScript!

   <form action="addcategory.php" name="addContact">
   <input id="category" name="category" type="hidden" value="" />
   </form>

This is my form... nothing special here.

function addCategory(){
    if(document.getElementById('category').value = prompt("Indtast ny kategori", "Ny kategori")){
        document.forms['addContact'].submit();
    }
}

This is the JavaScript. The JavaScript is placed AFTER the form, so the DOM is loaded.

    <div onclick="addCategory()" class="save">Ny kategori</div>

That's the div that triggers the function... The div is placed at the beginning og the page, but should not make any difference.

When I click the div, a prompt comes up, I enter a string and press OK, but then i get the follow error: "Cannot call method 'submit' of undefined"

Please help, this is so annoying!

EDIT:

<?php
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleCRM | Kategorier </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="search_bar">
<a href="../"><div id="logo">
SimpleCRM
</div></a>
<div class="wrapper">
<div class="floats" style="float: left">
<table>
<tr>
<td>
<?php
?></td>
</tr>
<tr>
<td id="menu">
<div onclick="addCategory()" class="save">Ny kategori</div>
<div onclick="editContact()" class="button">Omdøb kategori</div>
<div id="delete" onclick="deleteContact()" class="button">Slet kategori</div>
</table>
</div>
<div class="floats" style="float: right">

<table>
<tr>

<td align="right">
<?php
?>
</td>
</tr>
<tr>
<td align="right">
<div onclick="wnidow.location = 'categories.php'" id="changecategories">Administrer kategorier</div>
<div onclick="window.location = '../logout.php'" id="logout">Log ud</div>
</td>
</table>
</div>
</div>
</div>
<div align="center" class="wrapper">
<div id="categories">
<form>
<select size="20" name="category">
<?php
?>
</select>
</div>
<div style="width:500px;" class="wrapper">
<div onclick="window.location = '../CRM?CRM='  +Math.floor((Math.random()*1000)+1)"  id="back">
Tilbage
</div>
</div>

</div>
<form action="addcategory.php" name="addCategory" id="addCategory">
<input id="category" name="category" type="hidden" value="" />
</form>
</body>
</html>
<script>
function deleteContact(){
    if(confirm('ADVARSEL:\nDu er ved at slette denne kontakt!'))
    {
        document.forms['delete'].submit();
    }
}
function editContact(){
    window.location.href = document.URL + '&edit=true';
}
function addCategory(){
    if(document.getElementById('category').value = prompt("Indtast ny kategori", "Ny kategori")){
        console.log(document.forms);
        document.forms.addCategory.submit();
    }
}
</script>

This is my entire document (the PHP code has been removed), so i hope you can now see everything more clearly...

Are you sure you mean to use `=` instead of `==`? What you have now will always assign whatever was entered to the value of `#category`, which will end up making this always truthy. — Bill Criswell, Mar 11 '14 at 18:06
`console.log(document.forms)` and make sure it's there. What you're doing should work... I think you just have a typo. — Bill Criswell, Mar 11 '14 at 18:10
@BillCriswell Yeah, it is supposed to change the value of my input in the form, and it does... it is just to make sure that the form is not submitted if you press cancel in the prompt. — user2140209, Mar 11 '14 at 18:11
I found the error... I somehow happend to delete the end-tag for the first form, so my form was inside the first form, and causing some JavaScript to malfunction... My bad, but thanks for all the answers anyway! — user2140209, Mar 11 '14 at 18:45

score 1 · Accepted Answer · answered Mar 11 '14 at 18:47

The problems is that you have a form tag inside another form element:

<form>
   <select size="20" name="category">
    ...
   <form action="addcategory.php" name="addCategory" id="addCategory">
    ...
</form>

This is invalid and the inner form tag is ignored, and hence an element with name or ID addCategory does not exist. Remove the first form tag, it doesn't seem to serve any purpose.

That's one if the reasons why proper indentation is important.

JavaScript cannot submit form, even though everything is as it should be?

1 Answers1