Question

I’m trying to get all the input elements from a certain form from jQuery by providing only the name of the form and only knowing that those wanted fields are input elements.

Let’s say:

<form action='#' id='formId'>
<input id='name' />
<input id='surname'/>
</form>

How do I access them individually with jQuery?
I tried something like $('#formId > input') with no success, in fact an error came back on the console "XML filter is applied to non-XML value (function (a, b) {return new (c.fn.init)(a, b);})"

Maybe I have to do it with .children or something like that? I’m pretty new at jQuery and I’m not really liking the Docs. It was much friendlier in Mootools, or maybe I just need to get used to it.

Oh and last but not least, I’ve seen it asked before but no final answer, can I create a new dom element with jQuery and work with it before inserting it (if I ever do) into de code? In mootools, we had something like var myEl = new Element(element[, properties]);
and you could then refer to it in further expressions, but I fail to understand how to do that on jQuery

What I ended up doing was something like this: $('#where').before("<a id='linkId' href='#'>Link Text</a>") but this defeats the requirement of working with it before inserting it if you know what I mean.

Thanks in advance.

Answer 1

I hope this answers your questions.

<script type="text/javascript">

$(document).ready(function() {
        // Question part 1
    var formInputs = $("form#formId :input");
    formInputs.each(function(index) {
         alert(index + ': ' + $(this).attr("id") + "=" + $(this).val());
    });

        // Question part 2
    var a = $("<a id='linkId' href='#'>Link Text</a>");
    a.click(function(){alert("hello")});
    $('#where').before(a);


});
</script>

<form action="#" id="formId">
  <input id="name" type="text" value="foo" />
  <input id="surname" type="text" value="bar" />
  <div>
  <input id="phone" type="text" value="911"/>
  </div>
</form>
</div>
<div id="where"></div>