Populating form text inputs with data-* data using jQuery

Question

I've been trying to wrap my head around this particular issue for two days now. I feel like I'm close, but I can't crack it. I have a div with data-* attributes:

    <div class="pull-right" id="actions" data-ph-title="I am a title" data-ph-type="and a type" data-ph-source="from a source" data-ph-subject="with a subject">

When trying to alert - for instance - the value of "data-ph-title", I can do the following as apparently the dash between "ph" and "title" gets removed.

    var info = $("#actions").data();
    alert(info.phTitle);

That's great and it works (alerts: "I am a title"), but what I really want is to populate certain form fields with all of this data. I have named my form fields identical to the info object's properties, for example:

    <textarea id="placeholder-title" name="phName"></textarea>

I'm trying to come up with a loop that will put all of the info object's property values into the corresponding text inputs (or textareas). This is where I'm getting stuck. I currently have the following code:

    var info = $("#actions").data();

    $.each(info, function(field, val){
        $("[name='" + field + "']").val(val);
    });

Any help would be greatly appreciated!

In what way are you getting stuck? What happens? What doesn't happen? What do you want to happen? — lonesomeday, Jul 10 '12 at 22:06
[Your code does seem to work, so far as I can tell...](http://jsfiddle.net/Vp9Gu/2/) The only thing is that you don't have an attribute in `#actions` named `data-ph-name`. — lonesomeday, Jul 10 '12 at 22:13
I'm stuck because the script simply does nothing at all. I want it to put "This is a title" into the textarea for example, but it isn't happening. $.each should work according to [jQuery site](http://api.jquery.com/jQuery.each/) — Wesley, Jul 10 '12 at 22:16
$(':input[name="phName"]').each(function(){ $(this).val("New value"); }); — Mr. Mr., Jul 10 '12 at 22:25

score 0 · Answer 1 · answered Jul 10 '12 at 22:16

0

This should be what you need. Iterate through the JSON object and populate the text areas:

var info = $("#actions").data();

for (var key in info) {
  if (info.hasOwnProperty(key)) {
    $("[name='" + key + "']").val(info[key]);
  }
}

Here is a jsFiddle that demonstrates it working.

answered Jul 10 '12 at 22:16

Sam Tyson

4,496
4
26
34

I based my answer on this [answer](http://stackoverflow.com/questions/684672/loop-through-javascript-object). – Sam Tyson Jul 10 '12 at 22:22
Your code isn't wrong; it's just that the OP's code is right too: `$.each` is a method that makes `for` constructs simpler. – lonesomeday Jul 10 '12 at 22:24
In the end I just wrongly named my textarea .. Thanks for thinking along though. Appreciate your effort! – Wesley Jul 10 '12 at 22:31

score 0 · Accepted Answer · answered Jul 10 '12 at 22:17

0

Your code works, so I don't really know what the problem is, aside from you not having a field named 'phName'.

answered Jul 10 '12 at 22:17

Daedalus

7,586
5
36
61

I'm an idiot. I forgot to rename it to phTitle. I could kick myself in the head right now. Everyone here seems to have noticed it, so thanks to everyone! – Wesley Jul 10 '12 at 22:22

score 0 · Answer 3 · answered Jul 10 '12 at 22:18

You don't seem to have a phName in #actions. But what about using an id on your form elements?

var info = $("#actions").data();

$.each(info, function(field, val){
    $("#placeholder-" + field).val(val);
});

and

<textarea id="placeholder-phTitle"></textarea>
<textarea id="placeholder-phSource"></textarea>
...

score -1 · Answer 4 · answered Jul 10 '12 at 22:06

-1

Try this:

var fields = $('#myform input, #myform textarea');
for(var i=0; i < fields.length; i++){
   var input = fields[i];
   if(info[input.name]) input.value = info[input.name];
}

answered Jul 10 '12 at 22:06

bokonic

1,751
10
12

what do you mean? input is an html input field, you're assigning the value to what's in info. – bokonic Jul 10 '12 at 22:19

Populating form text inputs with data-* data using jQuery

4 Answers4