Using PUT method in HTML form

Question

Can I use a PUT method in an HTML form to send data from the form to a server

User · Answer

Unfortunately  modern browsers do not provide native support for HTTP PUT requests  To work around this limitation  ensure your HTML form   s method attribute is    post     then add a method override parameter to your HTML form like this     lt input type  hidden  name   METHOD  value  PUT   gt    To test your requests you can use  Postman  a google chrome extension

User · Answer

I wrote an npm package called  html-form-enhancer   By dropping it into your HTML source  it takes over submission of forms with methods aside from GET and POST  and also adds application json serialization   lt script type module quot  src  quot html-form-enhancer js quot  gt  lt  script gt    lt form method  quot PUT quot  gt       lt  form gt

User · Answer

XHTML 1 x forms only support GET and POST  GET and POST are the only allowed values for the  method  attribute

User · Answer

Can I use  Put  method in html form to send data from HTML Form to server    Yes you can  but keep in mind that it will not result in a PUT but a GET request  If you use an invalid value for the method attribute of the  lt form gt  tag  the browser will use the default value get      HTML forms  up to HTML version 4    5 Draft  and XHTML 1  only support GET and POST as HTTP request methods  A workaround for this is to tunnel other methods through POST by using a hidden form field which is read by the server and the request dispatched accordingly  XHTML 2 0 once planned to support GET  POST  PUT and DELETE for forms  but it s going into XHTML5 of HTML5  which does not plan to support PUT   update to    You can alternatively offer a form  but instead of submitting it  create and fire a XMLHttpRequest using the PUT method with JavaScript

User · Answer

method hidden field workaround  The following simple technique is used by a few web frameworks    add a hidden  method parameter to any form that is not GET or POST    lt input type  hidden  name   method  value  PUT  gt    This can be done automatically in frameworks through the HTML creation helper method  fix the actual form method to POST   lt form method  post   processes  method on the server and do exactly as if that method had been sent instead of the actual POST   You can achieve this in    Rails  form tag Laravel   method  PATCH     Rationale   history of why it is not possible in pure HTML  https   softwareengineering stackexchange com questions 114156 why-there-are-no-put-and-delete-methods-in-html-forms

User · Answer

for people using laravel  lt form method  quot post quot      gt   csrf  method  put        lt  form gt

User · Answer

If you are using nodejs  you can install the package method-override that lets you do this using a middleware  Link to documentation  http   expressjs com en resources middleware method-override html After installing this  all I had to do was the following  var methodOverride   require  method-override   app use methodOverride   method

User · Answer

To set methods PUT and DELETE I perform as following    lt form   method  PUT    action  domain route param query value   gt     lt input type  hidden  name  delete id  value  1    gt     lt input type  hidden  name  put id  value  1    gt     lt input type  text  name  put name  value  content or not    gt     lt div gt       lt button name  update data  gt Save changes lt  button gt       lt button name  remove data  gt Remove lt  button gt     lt  div gt   lt  form gt   lt hr gt   lt form   method  DELETE    action  domain route param query value   gt     lt input type  hidden  name  delete id  value  1    gt     lt input type  text  name  delete name  value  content or not    gt     lt button name  delete data  gt Remove item lt  button gt   lt  form gt    Then JS acts to perform the desired methods    lt script gt     var putMethod     event     gt            Prevent redirection of Form Click      event preventDefault         var target   event target       while   target tagName     FORM             target   target parentElement            While the target is not te FORM tag  it looks for the parent element         The action attribute provides the request URL      var url   target getAttribute   action              Collect Form Data by prefix  put   on name attribute      var bodyForm   target querySelectorAll    name  put           var body            bodyForm forEach  element   gt              I used split to separate prefix from worth name attribute        var nameArray   element getAttribute   name    split                var name   nameArray  nameArray length - 1           if   element tagName     TEXTAREA               var value   element getAttribute   value              else             if element is textarea  value attribute may return null or undefined          var value   element innerHTML                     all elements with name  put    has value registered in body object        body  name     value                 var xhr   new XMLHttpRequest         xhr open   PUT   url         xhr setRequestHeader   Content-Type    application json          xhr onload        gt           if   xhr status     200               reload   uses cache  reload  true   force no-cache  I reload the page to make  redirects normal effect  of HTML form when submit  You can manipulate DOM instead           location reload  true             else            console log  xhr status  xhr responseText                         xhr send  body             var deleteMethod     event     gt         event preventDefault         var confirm   window confirm   Certeza em deletar este conte  do           if   confirm            var target   event target         while   target tagName     FORM               target   target parentElement                  var url   target getAttribute   action            var xhr   new XMLHttpRequest           xhr open   DELETE   url           xhr setRequestHeader   Content-Type    application json            xhr onload        gt             if   xhr status     200                location reload  true               console log  xhr responseText               else              console log  xhr status  xhr responseText                               xhr send                 lt  script gt    With these functions defined  I add a event listener to the buttons which make the form method request    lt script gt    document querySelectorAll    name update data    name delete data     forEach  element   gt        var button   element      var form   element      while   form tagName     FORM            form   form parentElement            var method   form getAttribute   method         if   method     PUT            button addEventListener   click   putMethod              if   method     DELETE            button addEventListener   click   deleteMethod                  lt  script gt    And for the remove button on the PUT form    lt script gt    document querySelectorAll    name remove data     forEach  element   gt        var button   element      button addEventListener   click   deleteMethod     lt  script gt      - - - - - - - - - - -   This article https   blog garstasio com you-dont-need-jquery ajax  helps me a lot   Beyond this  you can set postMethod function and getMethod to handle POST and GET submit methods as you like instead browser default behavior  You can do whatever you want instead use location reload    like show message of successful changes or successful deletion    - - - - - - - - - - - - - - - - - -  JSFiddle  https   jsfiddle net enriquerene d6jvw52t 53

User · Answer

According to the HTML standard  you can not  The only valid values for the method attribute are get and post  corresponding to the GET and POST HTTP methods   lt form method  put  gt  is invalid HTML and will be treated like  lt form gt   i e  send a GET request   Instead  many frameworks simply use a POST parameter to tunnel the HTTP method    lt form method  post      gt     lt input type  hidden  name   method  value  put    gt        Of course  this requires server-side unwrapping

[html] Using PUT method in HTML form

Examples related to html

Examples related to forms

Examples related to http