CODEWITHSUNDEEP
javascriptjson
Laishram Pilot
Laishram Pilot

Reputation: 15

How to send info as Json data to server without Post method or any form

I have been given I task to work with Json to send data to server without actually using the "form" or "Post", below are the conversations between me and my senior:

Senior:

send only the data to the server without submitting the form in javascript

 myJsonObject.Username = document.getElementById('txtUsername').value;

this will be done when Save button click in such situation, we don't use form element we don't use submit button just a simple button for save

 onclick="saveUser()"
 function saveUser(){
 var userInfoJson = { };
 userInfoJson.Username = document.getElementById('txtUsername').value;

...and so on just play around with json

Me: 

<form name="form" method="post" onsubmit="saveUser()">

will it look like this?

Senior:

** don't use form tag don't use submit button

Me

:
one more thing will it have <input type="text"> ?

Senior:

not sure what u mean
u can use any kind of html, i don't mind
you need to show me some coding of json and that happens in .JS file
 or in <script type="text\javascript" tag
html can be used to integrate ur user input
i don't mind u use any kind of html whether beautiful or not
I MEAN JSON here in this thread
I wan't json... json, json, json
don't bring the whole world here... talk about json
json only

So how one can do it without form?

Upvotes: 0

Views: 789

Answers (1)

Simon Staton
Simon Staton

Reputation: 4505

I don't understand the reason for not using a form or submit button it seems counter intuitive and is probably not valid markup.

However for this to work you can just bind to a normal button...

http://jsfiddle.net/Labdr6pw/

<input type="text" id="txtUsername" name="username" />
<button id="submitButton" type="button">Save</button>

var submitButton = document.getElementById('submitButton'),
    usernameInput = document.getElementById('txtUsername'),
    userInfoJson = {};

userInfoJson.Username = usernameInput.value;

submitButton.addEventListener('click', function(){
    var request = new XMLHttpRequest(); 

    request.open("POST", "webservice", true);
    request.onreadystatechange = function() {
        if (request.readyState != 4 || request.status != 200) return; 
        console.log(request.responseText);
    };
    request.send(JSON.stringify(userInfoJson));
});

Upvotes: 2

Related Questions