Convert form elements to json and POST them to a server including some of them as a group of params

Question

I have this form

<form name="pass_form" id="form" >
Username: <input type="text" name="username" id="username" >  </br>
Current password: <input type="password"  name="currentpass" id="currentpass">  </br>
New password: <input type="password" name="newpass" id="newpass">  </br>
New password confirmation: <input type="password" name="newpassconf" id="newpassconf">     </br>
<input type="button" value="Update" onclick="myCall()" />

I would like to have the above form on submit be made into json string as the one shown below . I have taken care of the validation and have been trying to make the json string with no avail

{"jsonrpc":"2.0","method":"changepass","params":["username","currentpass","newpass"],
"id":"1"}

In the server side i would like to get it as such and use it in my RPC function in Perl

jakentus · Answer 1 · 2014-06-12T05:08:11.963

I recommend you to use jquery ajax post method. on the server side use usual post catch. good luck

$.post("url",{
    "method":"changepass",
    "id":"1",                                    
    username: $("#username").val(),
    currentpass: $("#currentpass").val(),
    newpass: $("#newpass").val()
      },
         function(data){
             //do here after callback
         }, "json");

or generate json using jquery:

    var jsonString = '{"jsonrpc":"2.0",
                           "method":"changepass",
                           "params": [                                                                                                                                                              
"'+$("#username").val()+'",
    "'+$("#currentpass").val()+'",
    "'+$("#newpass").val()+'"
                                     ],
                           "id":"1"}';

To use Inbuilt Array and Object class of JavaScript is better to generate JSON . Sometimes manual string can create problem. — Bhushankumar Lilapara, Jun 12 '14 at 06:31

score 2 · Accepted Answer · answered Jun 12 '14 at 05:32

var username = "username";
var currentpass = "currentpass";
var newpass = "newpass";

var UserInfo = new Array();
UserInfo.push(username);
UserInfo.push(currentpass);
UserInfo.push(newpass);

var data = new Object();

data["jsonrpc"] = "2.0";
data["method"] = "changepass";
data["id"] = "1";
data["params"] = UserInfo;

console.log(JSON.stringify(data));

Try this where you submit your form data in ajax... If you still didn't get your desired output, elaborate your problem.

Lilapara that was just what i wanted Super cool!! The json string is sent as i desired and well formed !! Thanks — Gideon Maina, Jun 12 '14 at 05:47

score 0 · Answer 3 · answered Jun 12 '14 at 05:08

There is no auto-formation plugin to extract form data to JSON. The only way is to manually pick data from appropriate controls and form the custom object that you would like to post to server.

While forming that you can add any number of extra members to the post object.

This is similar to what @jakentus has described.

var _datatoPost = {
method:'changepass',
id:1,
username:$("#username").val(),
currentpass: $("#currentpass").val(),
newpass: $("#newpass").val()
};

//now use JSON.js to convert it to JSON
var _jsonPost = $.toJSON(_datatoPost); //using Json plugin

//now send it via ajax

Convert form elements to json and POST them to a server including some of them as a group of params

3 Answers3