从动态生成的输入字段获取内部数据而不保存值-jQuery

Question

i have dynamically generated input fields through user input. My form is not being saved. i have to get the values from all input fields and populate them in a drop down select box.

Also, are there any other ways to do it ? is this the right method to do this ?

Answer 1

Doing it this way is about the least efficient way to approach the problem.

$("input.className").each(function (index,element)
{
    var inputVal = $("element").val();
    $("select").append('<option>'+inputVal+'</option');
});

First you're hitting the dom to find the input.

Then you're using jquery each to loop through the input which returns every single time it loops.

On "each" pass through the loop you're hitting the dom again.

Please see the first answer i posted. While your approach "works" if you ever have to write something on the large side this approach will no longer be valid.

When you ask "how" be sure to ask "what is the most performant way to do this?". Otherwise you're going to accumulate a lot of bad habits which will make you incapable of writing anything large.

Answer 2

You can add the values of input elements with the same class to a select element like so:

$("input.className").each(function (index,element)
{
    var inputVal = $("element").val();
    $("select").append('<option>'+inputVal+'</option');
});

Answer 3

If your page is not being generated dynamically you should first grab all of your inputs. If it is being generated dynamically your dom nodes should already be stored in an object.

Say that you have multiple input sections on a page (not generated dynamically), each denoted with an id:

<div class="formSection" id="dropDownEntry">
    <label for="dropDown1">Drop1</label>
    <input id="dropDown1"></input>
    <label for="dropDown2">Drop1</label>
    <input id="dropDown2"></input>
</div>

Now when you go to grab the fields you should only do one dom lookup if possible. So you grab the parent node, and then instruct jquery, or js to get the children with a tag of "input".

var dropDownInputsArray = $('#dropDownEntry').find('input');

Ok great now you have an array of inputs, and you've stored it inside of your function outside of the global scope. DO NOT USE $.each. It's a bad habit to get into because it's slow as hell. I literally never use it. Ever, and it's not hard to avoid. Iterate through your array of dom nodes and be sure to cache the length on init like so:

for(i=0, len=dropDownInputsArray.length; i < len; i++){

}

But WAIT, you first need to create a non-globally scoped node to store you're select nodes in, so that you're not appending stuff to the dom iteratively. The name of the game is DON"T TOUCH THE GD DOM.

var mySelectNode = $('<select/>');
//len caches the length so you don't have to look it up each time.  Performance ++
 for(i=0, len=dropDownInputsArray.length; i < len; i++){
      var inputNodeVal = dropDownInputsArray[i].value;
      if(inputNodeVal.length > 0) //was anything entered there?
        mySelectNode.append($('<option/>', {
                   value: inputNodeVal,
                   text: inputNodeval
               }));
 }

//now append your mySelectNode to the dom or replace the previous select node with it.  We did it this way because before you actually attach a node to the dom you have stayed in javascript land which is 'cheaper' than touching dom-land.