Newbie Question - Working with RESPONSE after FORM POST!

JavaScript
1

Hey Friends, hope I’m posting this to right category. I have question that I’m sure of you will find quite easy to answer while other’s struggle to learn. In short, I need to process the response from a form post. Should I post this to a remote server using JSON and process the response in JSON? I just want to send up a dialog box when the end user clicks the send button according the response, which seems to come back in JSON.

Here’s my HTML and FORM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<!-- css start -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- css end -->

<!-- Start Scripts -->
<script src="scripts/phoneformat.js" type="text/javascript" language="javascript" ></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- End Start Scripts -->
</head>

<body>
	<form id="FormName"action="https://click2call.aosystemsgroup.com/wcb.php" method="post" name="frame">
	<div class="input-container">
		<span class="material-icons icon" style="font-size: 14px; background: rgb(22,58,130); background: linear-gradient(0deg, rgba(22,58,130,1) 30%, rgba(112,172,222,1) 70%)">call</span>
		<input type="text" name="p" placeholder="Phone Number:" id="webcallbackinput" name="webcallbackinput" class="input-field" onkeydown="javascript:backspacerDOWN(this,event);" onkeyup="javascript:backspacerUP(this,event);"/>
	</div>

	<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>	
   	
</body>
</html>
1 Like
2

Depends on what the server is expecting. The fact that you are asking this question makes me believe that your intention is to use AJAX to post the data to that URL in your form action without actually sending the browser there. Correct?

depends on what the server sends back.

I cannot intuit from the form action what it’s expecting you to do, nor what its response will be.

1 Like
3

I’m not even sure if this is possible after my reasearch, but… What I am trying to do is send a POST request to my PBX, which works great, then I receive what appears to be a response back in jason, which is:

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

As a result, I’m looking at articles which discuss parsing a JSON string into a JS object, which I can then manipulate in JS.

What I can’t seem to find is a method to detect the JSON as it appears in my html document and parse it! Does that make sense?

1 Like
4

The server typically gives back the content but also a set of headers. In the headers you will often get a “Content-Type” header that would be set to “application/json” and you can certainly read that and know you have some JSON and then parse it.

Read up on response headers here… https://developer.mozilla.org/en-US/docs/Web/API/Response/headers

5

Hey Marty, I’m pretty sure it feeds something back in the header, but POSTS are hidden no? Unlike GETS which aren’t quite hidden from view? Maybe I can use Firefox Developer tools to find it?

6

Headers are always sent in response (no matter if it is POST/GET etc.). You don’t see them on a web page or anything.

And yes, you can use developer tools in all browsers to see them.

7

Marty is it possible to get the response from the DOM? I just want to build a condition based on the response.

8

No no… the response is for the page, nothing to do with the dom. You can get the header from the response and do things with it. Read up on the Javascript I showed you. When the page is given to your browser, JS reads the headers, you can then do whatever you need to with the page.

9

Marty do I have to execute the script as part of the POST process or do I just call the script in tags? Sorry, confused here, always a block the first time trying something new.

10

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

is already a jScript object literal.

11

Dennis, how to do I read that in though? Am I using the DOM for that? Is there another method to do this? Once I read it in, I just want a pop up based on the response - if it’s a success, throw up a success message, otherwise a failed message.

13

I am not sure this is what you are asking but something like this?

myRequest = “https://reqbin.com/echo/get/json”

fetch(myRequest).then((response) => response.json()).then((data) => {
alert("Status response: " + data.success);
}).catch(console.error);

image
image1596×359 43.4 KB

14

Yes, exactly. But how is that being triggered? Is it reading the dom? The script is here: https://bluetileinstaller.com/livecall/livecall.htm

15

The idea is to post a phone number to a PBX system - which it does. The response back could be a success, fail, or server busy. I just want a pop up on the success condition which is returned from the PBX Server as such:

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

16

So using what @Zensei said to you, once you’re inside the second then, the data variable holds the contents of the object returned to you.

If it holds the structure you have described, data.Response would hold “Success”, “Fail”, or “Server Busy”.

17

Move the script below the form:

<body>
	<form id="FormName">
                     your stuff here .....
	</form>

	<script>

		let form = document.getElementById('FormName');

		form.addEventListener('submit', (event) => {
			// Prevent default form submission
			event.preventDefault();

			const formData = new FormData(form);

			fetch('/', {
				method: 'POST',
				body: formData
			})
				.then(response => response.json())
				.then(data => {
					// Handle the server's response
					// console.log(data.Response);
					alert("Status response: " + data.Response + ".\nMessage: " + data.Message);

					// clear the field
					let webcallbackinput = document.getElementById('webcallbackinput');
					webcallbackinput.value = ""
				})
				.catch(error => {
					console.error('Error:', error);
				});
		});

	</script>

Result:

image
image844×402 19.1 KB

18

oh that’s very cool. i have to study this stuff…

19

hang on here, your taking the POST and performing this from the script???

20

So what Zensei is doing is chaining.
x.functionOne().functionTwo()
is essentially the same as

let result = x.functionOne();
result.functionTwo();

fetch will post the data to the API. This is the most common way of performing what’s called an AJAX (Asynchronous Javascript and XML, if you care) request, which generates another HTML request from the browser to the target resource.
then tells it “When you get a response from the thing before me, (then) do this with it.”
the first then tells the result to be parsed as a JSON object.
the second then (which is waiting for the first then’s result, because chaining) takes the result (which is now a json object), and acts upon it.
catch is there so that if any part of the chain collapses and throws an error, we can see the error generated.

AJAX is how a lot of things work - like this forum. You can see in real time who’s writing a post, and when new posts appear… that’s a whole lot of AJAX requests going back and forth between your browser and the server to check on the status of the thread.

21

Here what I did to the fetch line;

		fetch('https://click2call.aosystemsgroup.com/wcb.php', {
			method: 'POST',
			body: formData
		})

but it’s not throwing up the response? It is however working as it should.