dynamic variable name from form input name

Question

How would i create a dynamic variable name based on all the forms input checkbox list names? This is what i have so far

var nameArray = [];
$.each($("#store-filter input").serializeArray(), function(i, field) {
    nameArray[field.name] = field.value;
});

alert(nameArray[0]);

for (i = 0; nameArray.length > i; i++)
{
     //alert(nameArray[i]);
     var nameArray[i] = nameArray[i].value;
     var nameArray[i]+'_checked_values' = $(\'input[name="nameArray[i]+[]"]:checked\').map(function() {
        return this.value;
    }).get();

}
alert(make); //variable name from name="make[]"

sample HTML

<form id="store-filter" action:"javascript:void(0);">
            <span id="store">
                <input id="store_0" value="2" name="store[]" type="checkbox">&nbsp;<label for="store_0">Store 1</label>
                <input id="store_1" value="3" name="store[]" type="checkbox">&nbsp;<label for="store_1">Store 2</label>
                <input id="store_2" value="3" name="store[]" type="checkbox">&nbsp;<label for="store_2">Store 3</label>
            </span>
            <span id="make">
                <input id="make_0" value="2" name="make[]" type="checkbox">&nbsp;<label for="make_0">make 
        1</label>
              <input id="make_1" value="3" name="make[]" type="checkbox">&nbsp;<label for="make_1">make 
        2</label> 
    <input id="make_2" value="4" name="make[]" type="checkbox">&nbsp;<label for="make_2">make 
        3</label>

             </span>
            <span id="time">
               <input id="time_0" value="2" name="time[]" type="checkbox">&nbsp;<label for="time_0">time 1</label>
              <input id="time_1" value="3" name="time[]" type="checkbox">&nbsp;<label for="time_1">time 2</label>
    <input id="time_2" value="4" name="time[]" type="checkbox">&nbsp;<label for="time_2">time 3</label>
            </span>
</form>

so later on in my code i can create a url string ?make=1,2,3&store=40,5,6&time=1,2,3,4 etc

the $_GET parameters are taken from the input check boxes name's dynamically

Can you explain your problem a little more as it's not clear what you're trying to do. In the first instance it seems like you want an object, not an array, so you can associate values to keys. However I don't see the relevance of this in your second code snippet, where you generate an array of selected value using map...? — Rory McCrossan
– Rory McCrossan, Commented Oct 28, 2014 at 7:59
@RoryMcCrossan sorry about that, updated question. and added more of my code — user2636556
– user2636556, Commented Oct 28, 2014 at 8:20

David Thomas · Accepted Answer · 2014-10-28 11:35:02Z

I'd suggest the following approach, obviously I'm binding to the click of a button, you should add that to the event/interaction of your choice:

function makeQueryString() {
  function keyValues(idPref) {
    // using the pass-in 'id' as a key:
    var key = idPref,
    // searching within the element identified with that 'id' for
    // other elements whose 'id' *starts* with that string:
      values = $('#' + idPref + ' input[id^="' + idPref + '"]').map(function() {
        // iterating over those found elements and, if the value is *not* the
        // defaultValue (value on page-load), *or* the checked state is not the
        // default state (checked/unchecked as on page-load):
        if (this.value !== this.defaultValue || this.checked !== this.defaultChecked) {
          // we return the value:
          return this.value;
        }
      // get() converts to a JavaScript Array, join() concatenates Array elements
      // to form a string:
      }).get().join(',');

    // if there is a key, and there are associated values, we return a 'key=value,value2'
    // string, otherwise we return an empty string:
    return key && values.length ? key + '=' + values : '';
  }

  // we return the value obtained after iterating over the form's span elements
  // that have an [id] attribute:
  return $('form span[id]').map(function(){
    // obtaining the 'key=value1,value2' strings from the called-function:
    return keyValues(this.id);
  // converting those returned elements into an Array, and joining with & characters:
  }).get().join('&');
}

$('#test').click(function(e) {
  e.preventDefault();
  console.log(makeQueryString());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">test</button>
<form id="store-filter" action: "javascript:void(0);">
  <span id="store">
                <input id="store_0" value="2" name="store[]" type="checkbox">&nbsp;<label for="store_0">Store 1</label>
                <input id="store_1" value="3" name="store[]" type="checkbox">&nbsp;<label for="store_1">Store 2</label>
                <input id="store_2" value="3" name="store[]" type="checkbox">&nbsp;<label for="store_2">Store 3</label>
            </span>
  <span id="make">
                <input id="make_0" value="2" name="make[]" type="checkbox">&nbsp;<label for="make_0">make 
        1</label>
              <input id="make_1" value="3" name="make[]" type="checkbox">&nbsp;<label for="make_1">make 
        2</label> 
    <input id="make_2" value="4" name="make[]" type="checkbox">&nbsp;<label for="make_2">make 
        3</label>

             </span>
  <span id="time">
               <input id="time_0" value="2" name="time[]" type="checkbox">&nbsp;<label for="time_0">time 1</label>
              <input id="time_1" value="3" name="time[]" type="checkbox">&nbsp;<label for="time_1">time 2</label>
    <input id="time_2" value="4" name="time[]" type="checkbox">&nbsp;<label for="time_2">time 3</label>
            </span>
</form>

References:

CSS:
- Attribute-presence and value ([attribute],[attribute="value"]) selectors.
JavaScript:
- Array.prototype.join().
- defaultChecked and defaultValue (HTMLInputElement).
jQuery:
- get().
- map().

Awesome, thanks for the detailed explanation. if store and time are not checked, the url looks like this make=5,37&&&& i could remove the trailing &&&& after the url is generated, but for the sake of learning. how would i do in your code?

Alexis Paques · Accepted Answer · 2014-10-28 08:49:48Z

0

You are in Javascript, you do not need to declare the size of your arrays, there is no propblems by adding/removing anything from an Object/Array.

You should create a variable make then get the values in. Finally, you will be able to get it back.

var make;
$.each($("#store-filter input").serializeArray(), function(i, field) {
    make[i] = field.name;
});

Later in your code, you will use the array make.

make[0];

EDIT:

Here is an example i did for you: http://jsfiddle.net/kjkzm8qm/

NOTE: Your $.each($("#store-filter input").serializeArray() ... is useless, you should select all your inputs by adding a class AND, you should END your input tags by adding a / at the end.

HTML

 <input name="test" class="inputs" />

JAVASCRIPT

 $.each($(".inputs"), function(){ });

edited Oct 28, 2014 at 8:49

answered Oct 28, 2014 at 8:06

Alexis Paques

1,99516 silver badges31 bronze badges

6 Comments

user2636556 Over a year ago

updated question, and added more of my code. getting an undefined error

Alexis Paques Over a year ago

Why do you use alert(make) when your variable is nameArray ? :o You should try console.(nameArray), then open your console within Firefox/Chrome

user2636556 Over a year ago

i assumed that since the input name is make the dynamic variable name created would be make too :P

Alexis Paques Over a year ago

Nha, sorry for the confusion, your variable is stored into nameArray !

user2636556 Over a year ago

i see, is there a way to make the variable name based on the input names? make, store, time etc ?

|

yahya007 · Accepted Answer · 2021-02-25 09:36:36Z

0

Update for david's answer.

If you want to remove & then add this code below

For this check the key value is not null

let keyValue = keyValues(this.id);
        if (keyValue != ''){
            return keyValue;
        }

answered Feb 25, 2021 at 9:36

yahya007

16811 bronze badges

Collectives™ on Stack Overflow

dynamic variable name from form input name

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related