JSFiddle - React, Tailwind, and code Playground

by padma rubhan

HTML

<form id="form1" class='left'>
    <p>Name:<br/><input type='text' id='name' name='name' /></p>
    <p>Password:<br/><input type='password' id='password' name='password' /></p>
    <p>Content:<br/><input type='file' id='file' name='file' /></p>
    <p><input type='submit' id='submit-button' /></p>
</form>

JavaScript

$('#submit-button').click(function(){
    let myForm = document.getElementById('form1');
		let formData = new FormData(myForm);

    var data=[]
    data.push(formData);
    data.push(formData);
    console.log(data);
    
    var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6IkN0ZlFDOExlLThOc0M3b0MyelFrWnBjcmZPYyIsImtpZCI6IkN0ZlFDOExlLThOc0M3b0MyelFrWnBjcmZPYyJ9.eyJhdWQiOiJodHRwczovL3Byb2RhZGVhdG9uaW90Lm9ubWljcm9zb2Z0LmNvbS9hZG9wdGVyd2ViYXBpc2VydmljZSIsImlzcyI6Imh0dHBzOi8vc3RzLndpbmRvd3MubmV0LzgzZTNmNmY0LTNlZTktNGIzOC1hOTMwLTU4ZTcxN2M5MDBjNS8iLCJpYXQiOjE1NjA3NzkxNjMsIm5iZiI6MTU2MDc3OTE2MywiZXhwIjoxNTYwNzgzMDYzLCJhY3IiOiIxIiwiYWlvIjoiNDJaZ1lEZ2ZsYjdobnVmMXlQUmd2aVA1ZlYrMXBnZnRtM3JndTVkV1FLUnhtclJUWmhVQSIsImFtciI6WyJwd2QiXSwiYXBwaWQiOiI5NzU4Zjc2Zi1hYzU3LTQ3YmYtYTNkYy03ZjZiNTc2NGMwZTAiLCJhcHBpZGFjciI6IjAiLCJpcGFkZHIiOiIxNjguNjIuMTY0LjE0MiIsIm5hbWUiOiJUZXN0IGVhdG9uIGluc3BlY3RvciIsIm9pZCI6ImJjODRhZTI5LTczNWEtNGIxZC1iNzY3LWQxNjQ0NWE2MGYyMyIsInNjcCI6InVzZXJfaW1wZXJzb25hdGlvbiIsInN1YiI6ImdPdm15b2dORnlDQ0FUWWN2ZmVzV0lab1dSZ3I4TU9KRURyT3p0SDhscXciLCJ0aWQiOiI4M2UzZjZmNC0zZWU5LTRiMzgtYTkzMC01OGU3MTdjOTAwYzUiLCJ1bmlxdWVfbmFtZSI6IjhjZmI4YTc1LWVjYzUtNDgxOS04NzA3LTgzNDk5N2UzYzk4MkBQcm9kQURFYXRvbklvVC5vbm1pY3Jvc29mdC5jb20iLCJ1cG4iOiI4Y2ZiOGE3NS1lY2M1LTQ4MTktODcwNy04MzQ5OTdlM2M5ODJAUHJvZEFERWF0b25Jb1Qub25taWNyb3NvZnQuY29tIiwidXRpIjoiaU1NOHRqcVd3VWFjanp6N3haUmdBQSIsInZlciI6IjEuMCJ9.UAenJRXWJMzeoNlTWKpyZw19BQrzXU4FbHHEgBh6d4yYtCDFTk0D7KTHNLBi2cxo1ruD69UHxtUTEK0xc5eufL7Wp_MfHw_EfqTO19Vd2ESJ3b4zH6ib3dHTkQQYwzg6mFFhMALwJQSgQcLjXwEfNaj6PYsS7Ikx7lKtsrpnk7VMAJjRvorNUSt98W29tVQ5YXBy1TqKVYzMN39EIhHSJa2ctq_CWwDei53o2WGBkHl1Ci8VzrLRivSLT-iKlqSTY747U3AyBixWQvq1BT-dwiRNDFK47Ib3Y0s8HSL0M12e6LsQVvyCHhlRBgsUn2UShHyyzGd4opjc0u27HUXWpQ";
    $.ajax({
  url: "https://localhost:44303/api/v2/nonTubularAnomaly/20190513-024153USGRRWHP6082123",
  dataType: 'jsonp',
  method: 'POST',
  data: data,
  success: function(data, status) {
    return console.log("The returned data", data);
  },
 ...