Getting values of elements passed in data attribute through JQuery

Question

I have some field names populated in the data element. I'm trying to form a query string with the field names and their corresponding values in the form for using in jquery ajax. The following code however, does not work for me.

$(".linkedfill").change(function(){
  var params = $(this).data("select-params").split(",");
  $.each(params, function(index,value){
     pname = value.slice(value.IndexOf("["), value.IndexOf("]"));
     pval = $(this).parents().find("[name='"+value+"']").val();
     addparams = addparams + "&" + pname + "=" + pval;
  });
});

The field name will be like header['fldname'] and the field is available somewhere in the same form. The data-select-params will be like data-select-params="header['fld1'],header['fld2']".

Update : My html for fields would look like this:

<input name='header[fld1]' />
<input name='header[fld2]' />
<select class='linkedfill' name='pselect' data-select-params="header[fld1],header[fld2]">
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
</select>

What am trying to do with jquery is get the values of header[fld1] & header[fld2] and form a query string out of the data.

Can anyone help me fix this? Thanks in advance.

steo · Accepted Answer · 2013-05-14 08:44:10Z

1

Why don't you make an array of parameters , like :

//if you need you can iterate the header[h1]..header[hn] push inside the function below
$('.linkedfill').data('select-params', ["header[h1]","header[h2]",...,"header[hn]"]);

and then access it with

$.each($('.linkedfill').data() , function() {
 console.log($('.linkedfill').data());
// ..do your stuff..
})

here is it a fiddle http://jsfiddle.net/DgbRn/

edited May 14, 2013 at 8:44

answered May 14, 2013 at 8:38

steo

4,6762 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ravi Over a year ago

Think my detailing was not clear. Updated the question with more details. Thanks for your effort though.

Rohan Kumar · Accepted Answer · 2013-05-14 09:43:26Z

0

Try this:

var data="header['fld1'],header['fld2']";
var params = data.split(",");
var addparams='';
$.each(params, function(index,value){
     console.log(value.indexOf("['")+','+value.indexOf("']")+','+value);
     pname = value.substring(value.indexOf("['")+2, value.indexOf("']"));
     pval = $('form').find("header["+pname+"]").val();
     addparams = addparams + "&" + pname + "=" + pval;
     console.log(addparams);
});

Fiddle: http://jsfiddle.net/Ju297/1/

I don't know what you want but you can make it simple like,

var data="fld1,fld2";
var params = data.split(",");
var addparams='';
$.each(params, function(index,value){
     pval = $('form').find("header["+value+"]").val();
     addparams = addparams + "&" + value + "=" + pval;
     console.log(addparams);
});

edited May 14, 2013 at 9:43

answered May 14, 2013 at 8:40

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

3 Comments

Ravi Over a year ago

Thanks. I could get the first part of my issue solved. pname worked with pname = value.slice(value.indexOf("[")+1, value.indexOf("]")); However, the pval does not fetch any value (undefined). Updated my question with further details. I think the issue is with the $(this) part as the context changing from the base object (.linkedfill) to params? I tried $('form').find.. but that doesn't work either.

Rohan Kumar Over a year ago

@Ravi test the above I have made changes.

Ravi Over a year ago

Hi. Thanks. I cannot hardcode 'header' because it can be anything. I have found the issue was with the object context as I suspected. I added var oelem=$(this); // linkedfill at the top and edited pval line as pval = oelem.parents().find("[name='"+value+"']").val(); which worked.

Collectives™ on Stack Overflow

Getting values of elements passed in data attribute through JQuery

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related