-2

I'm using a nocode API that returns some HTML based on some parameters in the URL when the user makes a GET request. I'd like to improve the user experience and have a form like a contact 7 form that can map user input for each form field in the call to API.

For example form would look like following:

Name: Todd Email: todd@gmail.com Key: zjdHSDFHSDFHSDFS

My API is example https://api.com/endpoint/v1/

When the user enters name, email and key I need to make a call like this:

My API is example https://api.com/endpoint/v1?name={name}&email={email} with the Key field passed in as a header (X-BLOBR-KEY: {key})

I couldn't figure out how to do this with javascript or with a wordpress plugin.

peter todds
  • 89
  • 5
  • There's a little ambiguity here that you might want to clarify in your post. "a nocode API that returns some HTML based on some parameters in the URL" I assume you mean [nocodeapi.com](https://nocodeapi.com) and not a generic "no code" API, yeah? So you have an existing API that is successfully returning HTML already? And you want to modify that HTML to include a form? Will the form send users to an endpoint like `https://api.com/endpoint/v1?name={name}&email={email}` which also returns HTML or will it just make a call to submit the form and stay on the same page? – Blake Gearin Feb 22 '22 at 03:15
  • Thank you @BlakeGearin for responding to this. Yes exactly I meant nocodeapi.com not generic "no code" API. Also confirmed I have an existing API that is successfully returning HTML already (I actually use pythonanywhere but I don't think its relevant) I just have a URL no authentication. I'm using something called blobr as a wrapper around this API so I can have some kind of auth and I need to then pass in X-BLOBR-KEY in the header of a RESTful call to the wrapper API when the user submits the form so yes the form should redirect user to the wrapper endpoint that also returns HTML. – peter todds Feb 22 '22 at 03:46

1 Answers1

0

Here is some code. It is a generic HTML form and a custom submit function in vanilla JavaScript placed inside the head tag. I think it achieves what you want besides the header.

It is not possible to perform an HTTP redirect with headers, read more here. An alternative would be to perform an async request then if it returns HTML you could replace the existing HTML with the new HTML. This is a bit of hacky approach in my opinion.

As it stands, I'm not sure what value a header like this would be adding. If it's hard-coded into the HTML/JavaScript anyone could see it, manipulate it, or use it on their own form to spoof yours. To avoid this you could look into using PHP. I know W3 has resources for HTML forms with PHP.

<html>
  <head>
    <script>
      function submitFunction(e) {
        // Prevent the default form submitting actions to occur
        e.preventDefault();
        e.stopPropagation();

        // Get the form
        let form = document.querySelector("#myForm");

        // Get all field data from the form
        let data = new FormData(form);

        // Convert key-value pairs to URL parameters
        let params = new URLSearchParams(data);

        // Build the endpoint URL
        let newUrl = `https://api.com/endpoint/v1?${params}`;

        // Send to endpoint URL
        window.location.href = newUrl;
      }
    </script>
  </head>
  <body>
    <h2>HTML Form</h2>
    <form id="myForm" onsubmit="submitFunction(event)">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John">
      <br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe">
      <br><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>
Blake Gearin
  • 175
  • 1
  • 10