Processing Data after Form POST

JavaScript
1

Hey Friends, like many of you, I’m fairly new to all of this. I need some help to get over a bump, so if anyone has a moment and a solution, I would like to hear from you! I have a very simple form sending a POST to remote server, which is working great! My issue is in processing the RESPONSE. On success the server responds with:

{“Response”:“Success”,“Message”:“Originate successfully queued”}

I need to take this and display the same or similar message to the end user. Here’s the source:

Untitled 1
call 
<input type="hidden" name="i" value="2"/>
<input type="image" name="submit" src="images/c2c_button.png" border="0" alt="Submit" style="width: 145px; height: 37px;" class="submitposition"/>
</form>

Please note that two other responses are possible, one of course is an error response, the other, I’m not to sure of.

2

Here is an example to alert the message, i would rather have a div with a turnery operator that says if response render message essentially.

// Function to send POST request
async function sendDataToAPI(data) {

try {

Send it…
},
body: JSON.stringify(data), // Convert data object to JSON
});

// Check if the response is successful
if (!response.ok) {
  throw new Error(`HTTP error! Status: ${response.status}`);
}

// Parse JSON response
const responseData = await response.json();

// Handle the response data
console.log("Response received:", responseData);
// Perform actions based on the response
if (responseData.success) {
  alert("Data submitted successfully!");
} else {
  alert("Submission failed: " + responseData.message);
}

} catch (error) {
// Handle errors (e.g., network issues, server issues)
console.error(“Error sending data:”, error);
alert(“An error occurred while sending data.”);
}
}

3

hey thanks for your response. Are you suggesting just adding this to a script? How would I invoke this script??

4

You would add something like this, by adding in the header or footer with the files name

Honestly i would think you would make the api call in js as well unless the server side or your host has a big infrastructure for that kind of thing like netlify.

5

Well, my understanding of this is that you can take the JSON response from a form action POST and convert that into a js string? Here’s the response I’m receiving:

{“Response”:“Success”,“Message”:“Originate successfully queued”}

This is my first time around fiddling with JSON. The concept and principal seems to be straight forward as per:

I just can’t find a way to feed that response message through to JSON, then convert it to a javascript object.

Any advice?

6

Well that’s what props are for you should be able to access it by displaying

<div> <p> ${response.message} </p></div>
7

I see various ways of processing the JSON, looks simple enough, into JS, but can’t find a way to take the string as displayed in the browser? Am I missing something here? I have a form POST and on success it replies with the JSON response message as shown above. Is there a method of taking it directly from the browser and working with it???

8

Once you learn how to do this you it will be a huge milestone, you can do so much once you can handle data from api’s so persist! You want to take data and handle it by displaying it into the dom. The browser already has access to it by the dev tools but users don’t know how to do that, so your job is to display it. This is what the javascript is for.

One method is once the data arrives you have an you tell js where to put the data. You have a hidden invisible div with a class of lets say data. Then tell js to put form data into a paragraph inside the div called data.

Document.query.selector(“.div”) something like this i’m riffing it. Then you pass it the json data you give a varable name to.

Take it step by step, can you console log the data, can you select a div, can you add static data to that div. Then put it all together.

9

ok let me research this based on the document object model. BUt that will have to be tomorrow…!! I’ll get BACK to you!

1 Like