Last Updated: February 25, 2016
·
650
· fernandoperigolo

Turn a form in a link and send it via POST

Backend devs sometimes make bad things, something like a form with only hidden inputs. I dont like it. This is an example:

<form action="/to/next/page">
  <input type="hidden" name="next-page" id="next-page" value="3" />
  <input type="submit" value="Next" />
</form>

If you only have access to the front and want to make it looks better, you can do something like this:

First of all, turn form in a link

<a href="/to/next/page?next-page=3">Next</a>

Oh! Beauty!

Make this little code to intercept the click and send the post

$('#my-link').click(function() {
  // Memo this to use latter
  var myLink = $(this);
  // Now i have the href content
  var href = myLink.attr('href');
  // And now i have a array, position 0 is our URL and position 1 is our params
  var hrefSplited = href.split('?');

  // Making the magic, turn my string params in a object
  var params = JSON.parse('{"' + decodeURI(hrefSplited[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');

  // Making the pot
  // The first params is the first part of href, the url
  $.post(hrefSplited[0], 
    params,
    function(data){
      alert('Success, link submited via post');
    }
  );

  // Prevent the link to follow
  return false;
});

It is just an example, maybe you can find other implementations for:

var params = JSON.parse('{"' + decodeURI(hrefSplited[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');