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

问题

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.

回答1:

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")

回答2:

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.

回答3:

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

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

回答4:

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

回答5:

This is an older question, but this should work

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

来源：https://stackoverflow.com/questions/8382184/this-form-submit-not-working-after-clicking-div-element-in-form