this.form.submit() not working after clicking div

Question

I was trying to test form submission using mouse clicks but the form doesn't seem to submit with vanilla javascript.

I'm using this simple markup and code:

<form name="form" id="price" action="" method="post">
<div class="category" name="price" value="50 dollars" 
onClick="this.form.submit();"
>price</div>

</form>

<?php
echo $_POST['price'];

?>

I can submit the form with Jquery, but I don't understand why this.form.submit() is not working with vanilla javascript? I'm using Chrome to test this.

Answer 1

This is an older question, but this should work

onclick="this.parentNode.form.submit()"

Answer 2

A div is not a form element. There is no this.form for it.

You can still do document.forms.form.submit() (.form since you have name="form")

Answer 3

Your code might work if you tried something like this:

onClick="document.forms["price"].submit();"

this in your case actually refers to the div tag, not the document object which contains the reference to the form itself.

Answer 4

Use following code if your form name is "filter-form"

onclick="return document.forms.filter-form.submit();"

Answer 5

A div isn't a form element (thus no .form property) nor has it a value. I think you wanted <input> instead of <div>.