CODEWITHSUNDEEP
javascripthtmlforms
user2140209
user2140209

Reputation: 17

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

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...

Upvotes: 0

Views: 129

Answers (1)

Felix Kling
Felix Kling

Reputation: 816262

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.

Upvotes: 1

Related Questions