JS - PHP - Build an Array of Data From the Values of a Specific HTML Tag

Question

I have a form that a user can insert values of a text field using an auto complete input tag method (something similar to the Stackoverflow tags input during the submission process of a question). It instantly builds an HTML div similar to the below:

<div name="new-words[]" id="new-words" multiple="multiple" class="hidden">
    <option value="Flower" id="newWord_H0uTTbUsLW8R3fSpfMw16JnvpVQ9zhdW" class="selected" selected="selected">Flower</option>
    <option value="Animal" id="newWord_ZxFWGZrgDcCd2nUMpz1mc1ssVLAXgIVw" class="selected" selected="selected">Animal</option>
    <option value="Tiger" id="newWord_ZxFWGZrgDjijms23mmoAOPPL009AOOOO" class="selected" selected="selected">Tiger</option>
    ...
</div>

or

<div name="new-words[]" id="new-words" multiple="multiple" class="hidden">
    <input value="Flower" id="newWord_H0uTTbUsLW8R3fSpfMw16JnvpVQ9zhdW" class="selected" selected="selected" />
    <input value="Animal" id="newWord_ZxFWGZrgDcCd2nUMpz1mc1ssVLAXgIVw" class="selected" selected="selected" />
    <input value="Tiger" id="newWord_ZxFWGZrgDjijms23mmoAOPPL009AOOOO" class="selected" selected="selected" />
    ...
</div>

My question is how can I build an array of data from the values of the option or input tag (i.e. Flower, Animal, Tiger) and send the array to a PHP file (or different URL) for further processing before inserting the data into the database? Thanks for your your help.

@Ankit, it can also be input tag as well, pls see the question again .. thanks — Sami
– Sami, Commented May 26, 2015 at 3:30

colecmc · Accepted Answer · 2015-05-26 03:32:08Z

You can set an array and then loop through your options, pushing each value to the array. You'll have to use AJAX to send the array to php.

var nw = document.getElementById('new-words'),
  options = nw.children,
  toPhp = [];

function loops(items, fn, onLoopComplete) {
  var i;
  try {
    if (items && items.length) {
      i = items.length;
    } else {
      throw new Error(items + ' is required to have a length');
    }

    if (i > -1) {
      do {
        if (items[i] !== undefined) {
          fn(i);
          /* console.log(i + ' is the current iteration'); */
        }
      }
      while (--i >= 0);
    }
    if (typeof onLoopComplete === 'function') {
      onLoopComplete(items.length);
    }
  } catch (e) {
    throw new Error(e);
  }
}

loops(options, function(i) {
  toPhp.push(options[i].value);
});


alert(toPhp);

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <title>Example</title>
</head>

<body>

  <div name="new-words[]" id="new-words" multiple="multiple" class="hidden">
    <option value="Flower" id="newWord_H0uTTbUsLW8R3fSpfMw16JnvpVQ9zhdW" class="selected" selected="selected">Flower</option>
    <option value="Animal" id="newWord_ZxFWGZrgDcCd2nUMpz1mc1ssVLAXgIVw" class="selected" selected="selected">Animal</option>
    <option value="Tiger" id="newWord_ZxFWGZrgDjijms23mmoAOPPL009AOOOO" class="selected" selected="selected">Tiger</option>
    ...
  </div>
</body>

</html>

Collectives™ on Stack Overflow

JS - PHP - Build an Array of Data From the Values of a Specific HTML Tag

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related