Using PATCH method in html form - html

Question

How to use PATCH method in an html form to send data to a server?
I've already done this
Html
<form class="type-title" method="POST" id="alter">
<input type="hidden" name="_method" value="PATCH"/>
<input id="alter" type="text" name="alter"/>
<button onclick="alter_name();">update</button>
</form>
JS
function alter_name(){
fetch("http://127.0.0.1:3000/api/member", {
method: 'PATCH',
headers: {
'Content-type' :'application/json'
},
body: {
"name":alter_name.value.toString()
}
}),then((response) =>{
return response.json();
}).then((data) =>{
console.log(data);
})
}
but it still not work

Answer 1

The main issue is how you have addressed the input value. Your form's id: id="alter" is the same name as the input which is invalid, but in your script you are not referencing this field correctly at all, lets fix all this...
Firstly with the HTML form, do not post back as that might affect other workflows on the form. We do this by forcing the button to act as a simple standalone HTML Button instead of being the submit button for the form. Do this by setting the type attribute of the button to "button":
_I've also changed the Id of the form to be unique and removed the _method hidden input.
<form class="type-title" id="alter_form">
<input id="alter" type="text" name="alter"/>
<button onclick="alter_name();" type="button">update</button>
</form>
You were on the right track with using javascript and fetch() to send the data as your API is not likely to be setup to accept form-data if you are using PATCH as the method on a standard form submit.
The other fix is in the script itself, we need to deliberately stringify the object payload that we sent in the body, this way we can control or enforce the serialization instead of relying on javascript, we can also more easily inspect the contents when or if it goes wrong.
Notice how the field is referenced using the path formId.fieldId.value
The other issue you had was that your JSON object wasn't formed correctly, you had quotes around the property name, which would have resulted in quotes being escaped and encoded into the JSON string value, which we don't want.
Finally, I've specified the encoding in the Content-Type as it was required on my system to parse the content on the server side.
function alter_name(){
let content = {
Details: alter_form.alter.value.toString()
};
fetch("http://127.0.0.1:3000/api/member", {
method: 'PATCH',
headers: {
'Content-type': 'application/json; charset=UTF-8',
'Accept': 'application/json'
},
body: JSON.stringify(content)
}).then((response) => {
console.log('PATCH Response.status: ', response.status);
if(response.status !== 204)
return response.json();
else
return response.statusText;
}).then((data) => {
alert(data);
});
}
For a few bonus points, I've added some handling for a 204: No Content response from the server. Many PATCH implementations do not return content unless you explicitly request it with a Prefer HTML Header.