Question

I tried to build an application using Javascript, HTML, CSS, AJAX, JSON in which client fill a form and send to server , and after that server respond to client.

For this problem, I have done these steps,

1. Firstly I build a HTML page having form.
2. Then, I send the information to javascript by using onClick event handler.
3. Then, I build a JSON object that have form information.

and the code for that is,

HTML CODE :-

<div id="stylized" class="myform">
            <form name = "user_form" action = "operation.js" method = "post">
                <h1>Sign-up form</h1>
                <p>This is the basic look of my form without table</p>

                <label>Name
                <span class="small">Add your name</span>
                </label>
                <input type="text" name="name" id = "name_data"  /><br>
                <p id = "name_update"></p><br>

                <label>Email
                <span class="small">Add a valid address</span>
                </label>
                <input type="text" name="email"  /><br>
                <p id = "email_update"></p><br>

                <label>Url
                <span class="small">Complete URL</span>
                </label>
                <input type="text" name="url"  />

                <label>Comment
                <span class="small">That you want to say</span>
                </label>
                <textarea type="text" name="comment"  ></textarea>

                <button type="button" name = "button"  onClick="operatn(this.form)">Submit</button>
                <div class="spacer"></div>
                <h4 align = "center" id = "submit_update"></h4>
                <div class="spacer"></div>
            </form>
        </div>

JAVASCRIPT CODE :-

function operatn(x) {
    var name1 = x.name.value;
    var email1 = x.email.value;
    var url1 = x.url.value;
    var comment1 = x.comment.value;
    //alert(comment);

    var txt = '{ "details" : [ ' +
                        ' { "name_key" : "name", "name_value" : "' + name1 + '" }, ' + 
                        ' { "email_key": "email" , "email_value" : "' + email1 + '" }, ' +
                        ' { "url_key" : "url" , "url_value" : "' + url1 + '"  }, ' +
                        ' { "comment_key" : "comment" , "comment_value" : "' + comment1 + '" } ] }';

    var obj = eval( "(" + txt + ")" );
    //alert(obj.details[3].comment_value);

}

But I confused in, How to send this object to server? (tell me the
code for that or any good link) and,

How client establish an
connection with server that have IP address and Port number information of server.

Help me . Thanks in advance.

Answer 1

What you are missing is the ‘ajax’ part of your code, your code needs to make a request to the server. This is done using an XMLHttpRequest.

Using jQuery which abstracts XMLHttmlRequest,

function operatn(x) {
    $.ajax({
       url:"http://yoursiteurl.com",
       data:{
           comment:x.comment.value,
           email: x.email.value,
           url:x.url.value,
           name:x.name,value,
       }
    }).done(function(serverResponse){
         //here you can handle server response
    }).fail(function(err){
         //here you can handle errors
    });

    //alert(obj.details[3].comment_value);

}

Just don’t forget it is asynchronous.

Edit: I changed the key value pairs a bit since JSON objects are key value pairs.