0

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

11
  • Some issues: (1) you are duplicating an <input> 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, 2014 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 Jul 31, 2014 at 12:11
  • 1
    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, 2014 at 12:12
  • @Spokey Ok..I have changed it Jul 31, 2014 at 12:15
  • I don't quite understand your question, can you please clarify?
    – Spokey
    Jul 31, 2014 at 12:21

1 Answer 1

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(','));
10
  • 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 Jul 31, 2014 at 12:51
  • @user3004356 I'm sure you can figure out yourself from here jsfiddle.net/Spokey/tZPg4/11005
    – Spokey
    Jul 31, 2014 at 12:54
  • But, this forms a JSON with empty value first, try to alert the value Jul 31, 2014 at 12:54
  • Hi Spokey, your answer is correct, but how do I show the values of all the textfields in alert box. Jul 31, 2014 at 13:05
  • Can you update the fiddle link in the answer. I will mark the answer Jul 31, 2014 at 13:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.