2

I can easily find how to submit an existing form using jQuery. But how can I, given a URL, and some parameters create and submit this form on the fly?

1 Answer 1

9

This sounds like a bad solution to a problem that can probably be better solved another way...

That being said, you can create a form and trigger the submit method on it easily enough:

$([
    '<form action="url.php" method="post">',
        '<input type="hidden" name="param1" value="foo"/>',
        '<input type="hidden" name="param1" value="foo"/>',
    '</form>'
].join('')).appendTo('body')[0].submit();

If you need to be able to specify the parameters and the url then you could write a function similar to this one:

function submitValues(url, params) {
    var form = [ '<form method="POST" action="', url, '">' ];

    for(var key in params) 
        form.push('<input type="hidden" name="', key, '" value="', params[key], '"/>');

    form.push('</form>');

    jQuery(form.join('')).appendTo('body')[0].submit();
}

and call it this way:

submitValues('url.php', { foo: 'bar', boo: 'far' });
Sign up to request clarification or add additional context in comments.

5 Comments

Hi Prestaul. This was a simple and great idea. I used it to post the values to a new window, using target blank. For that I added an argument to set the target of the from, and a remove() call after the submit (so I won't have any form leftovers in my markup)
@Mohoch, I'm glad this was helpful to you, but I should reiterate that I cannot think of a good reason to do this... If you find yourself needing this technique you most likely are abusing the POST method (i.e. you should be using GET) or someone has designed a workflow that is going to be as painful for users as it is for developers... My 2 cents.
what we were trying to do is to redirect the user to somewhere and pass parameters so they will not be visible to the user. We thought that a post is very simple, and it was. Why do you think this will be painful?
It just is not the way that the web was designed to work. POST is designed for modifying data on the server, GET is designed for retrieving data. If you use this technique your users will get prompted to "repost" if they refresh those pages. They also will not be able to bookmark those pages unless the params are in the url. "Painful" is probably an overstatement, but I still believe it is a degraded experience. The correct way to deal with this is to use a better routing layer to allow you to have prettier urls.
Also, if you are worried about SEO then you absolutely cannot use the technique you described. The search spiders will never index via POST and if your params are not part of the url then those pages are invisible as far as Google is concerned.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.