How to submit the Data to a server?

I have a project, that need to submit two sets of data to the server,Name Date,Phone number Date.But I don’t know how to realize the function of the submitted data.

Requirements of the project:
1.name and telephone number can not be empty.
2.If the data is empty to error prompt, and enter again.
3.The background service personnel need to be able to read your code.

Here is a Demo, hoping to get help.

submit text to server.zip (19.3 KB)

Here is a function you can run “on Mouse Click” of the submit button. You would have to create your error box and output box (if you want it) and give them the appropriate IDs.

var data = {
	"name": "",
	"phoneNumber": ""
};
error.box = hypeDocument.getElementById('errorBox');
var name = hypeDocument.getElementById('inputName');
var phoneNumber = hypeDocument.getElementById('inputNumber');
var output = hypeDocument.getElementById('output');

// this is a conditional to check if the inputs are empty (or less than 3 characters for the name)
if (name.value.length <= 2){
    // create the error message you want to use inside the error text box
    error.box.innerHTML = "You must input a name! Minimum 2 Characters";
    // start the timeline that makes error box visible    
    hypeDocument.startTimelineNamed('error', hypeDocument.kDirectionForward)
	return false; // cancel the submission
} else if (phoneNumber.value.length <= 0){
    // create the error message you want to use inside the error text box
    error.box.innerHTML = "You must input a number!";
    // start the timeline that animates a text box with the error message inside
    hypeDocument.startTimelineNamed('error', hypeDocument.kDirectionForward)
	return false;
}

// if all the conditions are met then proceed. Reverse animate the error box and fill the inputted data into the output box.
hypeDocument.continueTimelineNamed('error', hypeDocument.kDirectionReverse, false)
output.innerHTML =  "Thank you! You have submitted: " + name.value + " as the name and " + phoneNumber.value + " as the number";

// finally this is the data object with the values added. You can use this data to send to your server.
data.name = (name.value).toLowerCase();
data.phoneNumber = phoneNumber.value;

As you have not specified the nature of the server side “service” or what language is being used I cannot show you any more. Any developer would be able to take that data object and gather and convert it server side.

3 Likes

Thank you very much, I will try your code.

If successful, I will tell you.

I will ask you again if I don’t succeed.

Thank you again for your answer patiently.:grinning:


// finally this is the data object with the values added. You can use this data to send to your server.
data.name = (name.value).toLowerCase();
data.phoneNumber = phoneNumber.value;

My server backstage workers let me ask you:
our server is “tomcat” by developing with JSP.
Next, we how to call my JSP page to send data?

In most cases you would want to send data in a http request to a url that points to your server page. Unfortunately, I’m not 100% on JSP. Here is what I would put after the code above to send the data as a parameter via a “POST”. In my example i use a .php file but that could easily be a .jsp file.

param = "data=" + JSON.stringify(data);
	
var xhttp = new XMLHttpRequest();
	  
xhttp.open("POST", "data.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// this sections is to get a response back like a thank you message or something  
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
		output.innerHTML = this.responseText;
	}
}
	  
xhttp.send(param);

I really want to learn you to write code logic,here are my documents written in accordance with your code.submit text to server 2.zip (23.1 KB)

But I don’t know how to implement error.box,Should I use it?
< input type="text" id="errorBox" value="" name="errorBox" >

output.innerHTML is also such a situation,How should I write?
<output name="output" id="output" value="">

I can’t write data.php,but I have put it in the repository,that only a beginning.

I think your method is very flexible, I very want to learn, please help me have a look at my documents, to correct my mistake.Thank you!

This is my version. Compare it with yours and see what’s different.

inside data.php

<?php
	
	echo $_POST['data'];
	
?>

Note: You will not get anything back from the PHP script unless you run the exported document alongside the PHP file on a server that can handle PHP.

Demo

submitText-vDBear.zip (22.9 KB)

Thank you for your patience to answer, I tested this method, that can be used.

Your code is very flexible, in case you gave me, I learned a lot of the content.

Now I have a few questions need to consult you:
1.What kind of backend interfaces’ language can use more easily and with Hype?
2.How should I learn this backend interface’ background?
3.Is there any network resources can let me learn it quickly?

Once again bother you answer for me, because my job need to use the Hype, but our back-end programmers don’t use Hype, so can only let me learn.

Hi, You're welcome.

There are no "backend" language in my opinion that are "easily used" with Hype. It's a case of which language you are more proficient in. The code in Hype is Javascript and mostly outputs JSON to backend services to communicate. As long as the backend language can understand JSON then it should be good to use.

There are many online resources for learning backend languages (server side). A google search, if possible, would help with finding these.

http://www.learnphptutorial.com/product/chapters/id/1?

1 Like