How to extract text from JSON and fill the textfields?

Question

I used this FIDDLE for duplicating textfields. Now I will form JSON using the result of all the textfields. In my update page, I need to extract the JSON and fill exactly the same JSON format to their respective fields.

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

JSON format is of the form.

{"welcomeList":["Thanks for coming","Please select from the following list"],"endList":["Press come again","Press 0"]}

My question is how can I populate the fields as I'm not familiar in dealing such situations

Some issues: (1) you are duplicating an `` element with a unique ID of "p_scnt". IDs have to be unique, otherwise the behaviour of the browser is undefined; (2) try to use `.on()` instead of `.live()`. The latter has been deprecated since jQuery 1.7. And some questions: (1) How are you retrieving the data (in JSON format) — via AJAX? (2) How do you want the data to be inserted into the fields? — Terry, Jul 31 '14 at 12:08
@Terry I consider your suggestion, I will use on(), but I did not understand what you meant by uniqueID. Can you tell me the same elaborately or fix it in fiddle — user3004356, Jul 31 '14 at 12:11
ID atributes have to be unique, meaning you are not allowed to use the same ID for more elements. You should use a class instead — Spokey, Jul 31 '14 at 12:12
I don't quite understand your question, can you please clarify? — Spokey, Jul 31 '14 at 12:21
@Spokey I'm creating a JSON from the values of textfields and storing it in db from create form. For edit form, I need to split the json and populate the values to each of those fields — user3004356, Jul 31 '14 at 12:23
I understand now but it still isn't very clear what to do with `welcomeList` and `endList`. I see no HTML structure where you add the values. Are you creating a text input with those IDs? — Spokey, Jul 31 '14 at 12:26
@Spokey omit that and fill the other values into textfields. — user3004356, Jul 31 '14 at 12:29
is this what you expect? http://jsfiddle.net/Spokey/tZPg4/11001/ — Spokey, Jul 31 '14 at 12:36
@Spokey exactly, I don't need endlist values, I need only welcomelist values with options to add new or remove textfields — user3004356, Jul 31 '14 at 12:39

Spokey · Accepted Answer · 2014-07-31T13:18:47.040

2

Given the following JSON

var json = {
       "welcomeList": ["Thanks for coming", "Please select from the following list", "dwadwadsds"],
       "endList": ["Press come again", "Press 0"]
};

Using this script you can loop through each value of welcomeList and create an input

$.each(json.welcomeList, function (_, vv) {
    $('#p_scents > p:first-child').clone().find('input').val(vv).end().append('<a href="#" id="remScnt">Remove</a>').appendTo('#p_scents');
});

FIDDLE: http://jsfiddle.net/Spokey/tZPg4/11004/

Explanation below

$.each(json.welcomeList, function (_, vv) {
     $('#p_scents > p:first-child').clone() 
// make a duplicate of the first <p>
// find the input and change its value, .end() will go back to the <p> selector
                                   .find('input').val(vv).end() 
// append the remove button to the <p>
                                   .append('<a href="#" id="remScnt">Remove</a>')
// append the whole <p> to the <div>                                   
                                   .appendTo('#p_scents');
});

EDIT: For a more specific use. I also changed the ID to class.

$.each(json.welcomeList, function (_, vv) {
     $('<p><label for="p_scnts"><input type="text" class=cnt" size="20" name="p_scnt" value="' + vv + '"placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo('#p_scents');
});

http://jsfiddle.net/Spokey/tZPg4/11006/

To get an alert with all values from the JSON

alert(json.welcomeList.join(','));

edited Jul 31 '14 at 13:18

answered Jul 31 '14 at 12:49

Spokey

10,974
2
28
44

Yes...this is correct, but why is the first text value empty and the values starts from second text field. Cannot we make it to first – user3004356 Jul 31 '14 at 12:51
@user3004356 I'm sure you can figure out yourself from here http://jsfiddle.net/Spokey/tZPg4/11005/ – Spokey Jul 31 '14 at 12:54
But, this forms a JSON with empty value first, try to alert the value – user3004356 Jul 31 '14 at 12:54
Hi Spokey, your answer is correct, but how do I show the values of all the textfields in alert box. – user3004356 Jul 31 '14 at 13:05
Can you update the fiddle link in the answer. I will mark the answer – user3004356 Jul 31 '14 at 13:10
@user3004356 updated. You should consider upgrading to a newer jQuery version if possible. 1.4.3 is pretty old – Spokey Jul 31 '14 at 13:19
But live is supported only in 1.4 – user3004356 Jul 31 '14 at 13:20
can u tell me how to show values of each textfield in alertbox. Where is it stored – user3004356 Jul 31 '14 at 13:21
@user3004356 you change `.live()` to `.on()`. http://stackoverflow.com/questions/8477779/jquery-on-versus-live – Spokey Jul 31 '14 at 13:21
I asked to tell me how I can form json out of this textfields. Can u pls tell me that? – user3004356 Jul 31 '14 at 13:24

How to extract text from JSON and fill the textfields?

1 Answers1