Updated text fields to JSON string - Javascript/JQuery [duplicate]

Question

I have a dynamic form that has text fields which change to input boxes when they need to be updated.

When they have been updated and the user clicks submit I want to add the updated values to a json string which i can post to an ASP.NET script.

Here is the html of 2 rows in the table:

<tr id="1">
<td onclick="">Colleague 1:</td>
<td id="c1nametxt" onclick="">
    <input id="c1nametb" type="text" value="Bob">
</td>
<td id="c1unametxt" onclick="">
    <input id="c1unametb" type="text" value="bjones">
</td>
<td id="c1eaddtxt" onclick="">
    <input id="c1eaddtb" type="text" value="[email protected]">
</td>
<td id="c1pnotxt" onclick="">
    <input id="c1pnotb" type="text" value="0111122224">
</td>
<td id="c1exttxt" onclick="">
    <input id="c1exttb" type="text" value="22224">
    <span onclick="delrec(this)">Del</span>
</td>

<tr id="2">
     <td onclick="">Colleague 2:</td>
<td id="c2nametxt" onclick="">
    <input id="c2nametb" type="text" value="John">
</td>
<td id="c2unametxt" onclick="">
    <input id="c2unametb" type="text" value="jhill">
</td>
<td id="c2eaddtxt" onclick="">
    <input id="c2eaddtb" type="text" value="[email protected]">
</td>
<td id="c2pnotxt" onclick="">
    <input id="c2pnotb" type="text" value="0111122225">
</td>
<td id="c2exttxt" onclick="">
    <input id="c2exttb" type="text" value="22225">
    <span onclick="delrec(this)">Del</span>
</td>

Here is the jQuery I'm using to detect which input boxes have been updated:

$("#subdetails").click(function () {
    $("#mantab input[type=text]").each(function () {
        if ($(this).val() !== this.defaultValue) {               

             //code to create json string   

        }
    });
 });

This is an example of a json string i would like to create if the following field were updated:

{
"1":{
    "c1nametb": "newname",
    "c1exttb": "22227",
    }
"2":{
    "c2eaddtb": "[email protected]",
    "c2pnotb": "0111122210",
    }
}

Can any one please help me with the code to create this string, or advise on a better way of doing this?

Thanks Ryan

I only want to convert the updated fields into a string and not the whole form. — rbradshaw, Commented May 5, 2014 at 16:49
Maintain an array (or object) that stores a boolean for each field and flips the value to true when a field is updated. — jahroy, Commented May 5, 2014 at 16:55
I am already able to check which fields have been updated by comparing the defaultvalue to current value. — rbradshaw, Commented May 5, 2014 at 17:00
its just getting those specific fields into a json string which i can pass to an asp.net scipt — rbradshaw, Commented May 5, 2014 at 17:00

Rashmin Javiya · Accepted Answer · 2014-05-05 18:23:30Z

Here is the solution, iterate through each row, find values of textbox and push it to array and finally convert it to string. you can set that string in hidden field to pass it to server side.

var ArrColleague = [];

$("#subdetails").click(function () {
    $("#mantab tr").each(function (index, val) {
        ArrColleague.push({
            "c1nametb": $(val).find("#c" + $(val).attr("id") + "nametb").val(),
            "c1unametb": $(val).find("#c" + $(val).attr("id") + "unametb").val(),
            "c1eaddtb": $(val).find("#c" + $(val).attr("id") + "eaddtb").val(),
            "c1pnotb": $(val).find("#c" + $(val).attr("id") + "pnotb").val(),
            "c1exttb": $(val).find("#c" + $(val).attr("id") + "exttb").val()
        });
    });
});

var JsonString = JSON.stringify(ArrColleague);

Collectives™ on Stack Overflow

Updated text fields to JSON string - Javascript/JQuery [duplicate]

1 Answer 1

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Linked

Related