CODEWITHSUNDEEP
javascriptjquery
Proxyon
Proxyon

Reputation: 49

Find all inputs within a jquery object

I have a little problem with my template.

I would like to read in a template with jquery and then find all inputs within this object to manipulate them.

Unfortunately, the inputs are not returned.

I already use the function "checkInputs" in another place. The target is not a template and it works without problems.

Here's my test code:

listOfTemplateInputs = checkInputs("#IncomingInformationsTemplate");
alert("Hidden: " + listOfTemplateInputs.Hidden.length + ", Fields: " + listOfTemplateInputs.Fields.length);


function checkInputs(target) {
  var ListOfFields = [];
  var ListOfCheckBoxes = [];
  var ListOfHidden = [];

  $(target + " input[type='text'], textarea, input[type='password']").each(function() {
    var input = $(this);
    ListOfFields.push(input);
  });

  $(target + " input[type='checkbox']").each(function() {
    var input = $(this);
    ListOfCheckBoxes.push(input);
  });

  $(target + " input[type='hidden']").each(function() {
    var input = $(this);
    ListOfHidden.push(input);
  });

  var inputList = {
    Fields: ListOfFields,
    CheckBoxes: ListOfCheckBoxes,
    Hidden: ListOfHidden
  };

  return inputList;
}

And here is my template:

<script id="IncomingInformationsTemplate" type="text/html">
  <tr class="">
    <input autocomplete="off" name="IncomingInformations.Index" type="hidden" value="5eda7c21-9b4e-4eb5-b992-6a3ea16a46cd" />
    <td>
      <div>
        <input type="hidden" name="country" value="Norway">
        <input type="hidden" name="country2" value="Germany">
        <input type="text" name="Name" value="Tom">
        <input type="text" name="Name2" value="Lisa">
      </div>
    </td>
  </tr>
</script>

Upvotes: 0

Views: 105

Answers (2)

acdcjunior
acdcjunior

Reputation: 135752

The thing is that script tag does not parse the HTML and create a DOM out of it.

Its contents are just a string.

To be able to select from it, you should parse it (you can do it with jQuery) and select from the created (parsed) object.

Notice in the code below I first create a "mini (virtual) DOM" out of your template's text contents:

var miniDOM = $($(target).text());

And now use all selectors having it as context/root. E.g.

 miniDOM.find("input[type='text'], textarea, input[type='password']").each(function() {

This finds the elements as you wanted.

listOfTemplateInputs = checkInputs("#IncomingInformationsTemplate");
alert("Hidden: " + listOfTemplateInputs.Hidden.length + ", Fields: " + listOfTemplateInputs.Fields.length);


function checkInputs(target) {
  var miniDOM = $($(target).text());

  var ListOfFields = [];
  var ListOfCheckBoxes = [];
  var ListOfHidden = [];

  miniDOM.find("input[type='text'], textarea, input[type='password']").each(function() {
    var input = $(this);
    ListOfFields.push(input);
  });

  miniDOM.find("input[type='checkbox']").each(function() {
    var input = $(this);
    ListOfCheckBoxes.push(input);
  });

  miniDOM.find("input[type='hidden']").each(function() {
    var input = $(this);
    ListOfHidden.push(input);
  });

  var inputList = {
    Fields: ListOfFields,
    CheckBoxes: ListOfCheckBoxes,
    Hidden: ListOfHidden
  };

  return inputList;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="IncomingInformationsTemplate" type="text/html">
  <tr class="">
    <input autocomplete="off" name="IncomingInformations.Index" type="hidden" value="5eda7c21-9b4e-4eb5-b992-6a3ea16a46cd" />
    <td>
      <div>
        <input type="hidden" name="country" value="Norway">
        <input type="hidden" name="country2" value="Germany">
        <input type="text" name="Name" value="Tom">
        <input type="text" name="Name2" value="Lisa">
      </div>
    </td>
  </tr>
</script>

Of course, you could, alternatively, turn that script into any renderable element, like div or span, even if hidden, and you could query it with your original code:

listOfTemplateInputs = checkInputs("#IncomingInformationsTemplate");
alert("Hidden: " + listOfTemplateInputs.Hidden.length + ", Fields: " + listOfTemplateInputs.Fields.length);


function checkInputs(target) {
  var ListOfFields = [];
  var ListOfCheckBoxes = [];
  var ListOfHidden = [];

  $(target + " input[type='text'], textarea, input[type='password']").each(function() {
    var input = $(this);
    ListOfFields.push(input);
  });

  $(target + " input[type='checkbox']").each(function() {
    var input = $(this);
    ListOfCheckBoxes.push(input);
  });

  $(target + " input[type='hidden']").each(function() {
    var input = $(this);
    ListOfHidden.push(input);
  });

  var inputList = {
    Fields: ListOfFields,
    CheckBoxes: ListOfCheckBoxes,
    Hidden: ListOfHidden
  };

  return inputList;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="IncomingInformationsTemplate" style="display: none">
  <tr class="">
    <input autocomplete="off" name="IncomingInformations.Index" type="hidden" value="5eda7c21-9b4e-4eb5-b992-6a3ea16a46cd" />
    <td>
      <div>
        <input type="hidden" name="country" value="Norway">
        <input type="hidden" name="country2" value="Germany">
        <input type="text" name="Name" value="Tom">
        <input type="text" name="Name2" value="Lisa">
      </div>
    </td>
  </tr>
</div>

Upvotes: 1

Taufik Nur Rahmanda
Taufik Nur Rahmanda

Reputation: 1969

you should find inputs with this method

$('#IncomingInformationsTemplate').find(':input').each(function(i,e) {
   console.log((i+1)+'. '+$(e)[0].outerHTML);
   $(e).addClass('manipulate-it'); //manipulate it
});

Upvotes: 0

Related Questions