generate and submit form - simple solution

Question

I tried to use this :

<a href="#" onclick="$('<form method=POST action=/logout>').submit();return false;">
  Sign out
</a>

But $('<form method=POST action=/logout>').submit(); doesn't work in Firefox ang IE.

Is there an equally simple solution for inline using?

Current solution:

<a href="#" onclick="$('#logoutForm').submit();return false;">
Sign out
</a>
<form id="logoutForm" method="post" action="/logout"></form>

But I still want to understand why Firefox don't want to run jQuery $('<form method=POST action=/logout>').submit();. And what is the right way for FF?

Answer 1

If you really want it in a single line, try this:

<a href="#" onclick="$('body').append('<form id=\'submitme\' method=\'POST\' action=\'/logout\'></form>');$('#submitme').submit();return false;">
  Sign out
</a>

http://jsfiddle.net/TrueBlueAussie/wWj2M/

I have tried this fiddle in these browsers successfully:

• IE
• Chrome
• Firefox

Note: your original did not generate "complete" HTML, so I added missing quotes and closing form element.

Also tested now with a self-closing form tag, but that is not allowed so stick with the example above.

Answer 2

I can't write comments yet so I'll say this here. I'm not sure why would you want to do it like that and not use the normal way (since you don't seem to actually post any data)

<a href="#" href='/logout'>
  Sign out
</a>

or

<form method=POST action=/logout>
  <input type="submit" value='Sign out'/>
</form>

Answer 3

I don't know why you need to do this INLINE... but:

<a href="#" onclick="event.preventDefault(), $.post('login',function(req){console.log('success');});">

this function (is a callback of the async request - ajax-way):

function(req){console.log('success',req);}

allows you to manipulate the returned value req.