How to submit a form using the GET method and use a URI pattern?

Question

I read this article http://blog.welldesignedurls.org/2007/01/11/proposing-uri-templates-for-webforms-2/ about URI templates, but it seems like this is a dead project.

So, is there such a form of sending?

<form action="/orders/{id}" method="get"> <input type="text" name="id"/> <input type="submit" value="Submit"/> </form> 

Form after sending forward to the odd URL: / orders /% 7Bid% 7D? id = 1

Answer 1

You can use the GET method, but you will get name-value pairs in the url and it will not get the pattern. If you enter “5” in this form:

 <form action="/orders" method="get"> <input type="text" name="id"/> <input type="submit" value="Submit"/> </form> 

At submit, will you receive URL / orders? id = 5, not / orders / 5.

If you are looking for / orders / 5, this can be done quite easily with some jquery:

 <script type="text/javascript" language="javascript"> $("form").submit(function () { // prevent the default GET form behavior (name-value pairs) event.preventDefault(); // Get the action attribute var action = $("form").attr("action").toLowerCase(); // For each form element found, replace {elementName} in the action attribute to build a URL from template var values = $("form").serialize().split("&"); for (var i = 0; i < values.length; i++) { var tokens = values[i].split("="); action = action.replace("{" + tokens[0].toLowerCase() + "}", tokens[1]); } // Send the user off to the URL w/ template elements replaced window.location.href = action; }); </script> 

You would need to add some escaping, perhaps, and handle the condition where the template input was not available, and maybe check some other cases of edges, but the code above works in the base case with any number of template elements and would bring you to / orders / 5 in the above.

Answer 2

Forget closing the action attribute.

 <form action="/orders/{id}" method="get"> <input type="text" name="id"/> <input type="submit" value="Submit"/> </form> 

and to pass {} use the escape() function.

Example

 $queryString = "/orders/{id}"; $safeQueryString = escape( $queryString ); <form action="<?=$safeQueryString?>" method="get"> 

Submission Form Id

 $('input[type="submit"]').on('click',function(e) { e.preventDefault(); var forms = $(this).parents('form'); var formID = forms.attr('id'); //appending form id to form action var dataString = forms.serialize()+'&formID='+formID; forms.submit(); });