Form will not submit if .remove() is used?
I'm having a spot of bother with either Firefox, jQuery or both. OS is Windows 7, Firefox is version 4.0.1 and jQuery is between 1.5 - 1.6.
Basically I have a form with a button element within, to which a click event is attached via jQuery which removes the button's closest parent div. This all works wonderfully.
Now the problem comes when you try to submit the form after carrying out开发者_开发知识库 the aforementioned action. Chrome, IE, Opera and Safari submit the form fine. Firefox on the other hand refuses to submit the form at all.
I've even tried $("form").submit(); in Firebug to no avail.
Here is a test on jsFiddle, simply click the - button and then submit in Firefox to see what I mean.
Any help on the matter is much appreciated!
Edit: I need to be able to submit the form via a Javascript/jQuery event attached to a button outside of the form element.
I think I've got the final solution for this problem. I've spend the last couple of days struggling with this strange behavior and finally came accross this thread and this one which helped me a lot.. =))
The button element has a 'type' attribute which is set by default to 'submit' in almost all browsers (except IE).
The problem seems to be related to the fact that we're removing the node while processing the submit event and therefore breaking the submit event of the form...
So adding type="button" to the button element will actually solve this issue.
Here is a workign jsFiddle example.
I have no idea why this is the case, but if you replace:
<button name="test">-</button>
with:
<input type="button" value="-" name="test" />
and use $("input[name=test]") instead of $("button[name=test]") then it appears to work.
You can see this working in this fiddle.
try using this instead:
<input type="submit" value="submit" />
if you put it before the tag it will submit the form automatically.
<!DOCTYPE html>
<head>
<title>Firefox/jQuery Submit Bug?</title>
</head>
<body>
<form method="post" action="index.php" id="fform">
<div>
<input type="text" name="foo" value="bar" />
<button name="test">-</button>
</div>
<input type="submit" value="submit" />
</form>
</body>
The answere of "paic_citron" is correct but, due you do the "POST" via Ajax you can replace this button:
<button name="test">-</button>
with hyberlink and some css:
<a href="#" class="bnt btn-warning" name="test">
<i class="icon-remove icon-white"></i>
</a>
Here the jsFiddle that works
加载中,请稍侯......
精彩评论