JSFiddle - React, Tailwind, and code Playground

by enriquerene

HTML

<form
  action="domain/route/param?query=value"
  method="PUT"
>
  <label>
    <span>
      Name
    </span>
    <input
      type="text"
      name="put_name"
      value="Foo Bar"
    >
  </label>
  <label>
    <span>
      Age
    </span>
    <input
      min="0"
      type="number"
      name="put_age"
      value="29"
    >
  </label>
  <div>
    <button
      name="put_submit"    
    >
      Save Changes
    </button>
  </div>
  <div id="message"></div>
</form>

CSS

form,
label {
  display: flex;
  flex-direction: column;
}

#message {
  padding: 1.2em;
  margin: auto;
}

JavaScript

var getParentByTagName = ( element, tagName ) => {
	var tag = event.target;
  while ( tag.tagName != tagName ) {
  	tag = tag.parentElement;
  }
  return tag;
}

var handleSubmit = ( event ) => {
	event.preventDefault();
	var form = getParentByTagName( event.target, "FORM" );
  var url = form.getAttribute( "action" );
  var method = form.getAttribute( "method" );

  xhr = new XMLHttpRequest();
  xhr.open( method, url );
  xhr.setRequestHeader( "Content-Type", "application/json" );
  xhr.onload = () => {
  	if ( xhr.status === 200 ) {
    	location.reload( true );
    } else {
    	console.log( xhr.status, xhr.responseText );
    }
  }
  if ( method == "POST" || method == "PUT" ) {
	  var body = {};
	  var formFields = form.querySelectorAll( "[name^=put_]" );
	  formFields.forEach( field => {
	  	var name = field.getAttribute( "name" );
	    var name = name.substr( 4 );
	    if ( name != "submit" ) {
	    	body[ name ] = field.value;
	    }
    } );
  	var jsonBody = JSON.stringify( body );
    var message = "";
    message += "This script will send this: " + jsonBody;
    message += "Method: " + method;
    message += "url: " + url;
  	// xhr.send( jsonBody );
  } else {
  	var message = "";
  	message += "Method: " + method;
    message += "url: " + url;
    // xhr.send();
  }
  document.querySelector( "#message" ).innerHTML = message;
}

var putSubmiters = document.querySelectorAll( "[name=put_submit], [name=delete_submit]" );
putSubmiters.forEach( button => {
	button.addEventListener( "click", handleSubmit );
} );