jQuery Problem from JQuery beginner

First ever use - trying find right syntax to work with selected elements.

[snowweb]

I've been thrown in the deep end, to fix something which is not really my responsibility but it's got to be fixed and no one else is going to do it, hence my lack of knowledge in this area. I've been trying to sort this now for the last 3 days solid and any assistance would be very much appreciated!

I have general knowledge of HTML, PHP and JavaScript, but no experience with jQuery.

First some HTML

<div id="popCustomer">
  <table>
    <tr>
      <td>
        <input name="cust_comp_name" type="text" maxlength="60" />
      </td>
    </tr>
    <tr>
      <td width="60%">
        <input type="button" name="button" value="Save" onclick="addpop('popCustomer');" />
      </td>
    </tr>
  </table>
</div>

The is the simplified code of a div layer which pops up above the page in response to a user generated event. It contains a table with an input box and a button.

When the button is pressed the "addpop" function should identify the input fields on the form (this one has only one, but others might have more) and add the contents to the database.

It's actually finished and is working perfectly in Firefox, but I need to get it to work in Chrome (Webkit). The problem is that the existing code uses navigation of the DOM to locate the input fields and the structure of the DOM is different in Chrome, so it fails.

I've heard that by using jQuery, it will work with both browsers, but I've never used it before and am finding it impossible to get started despite having spend all day reading jQuery introductions and examples.

What I'm thinking to do is to use jQuery to select and put in an array, all the form input fields including text, textarea and select types which are descendants (possibly distant) of the div with id="popCustomer". The array was also the result of the previous code, so it should work as a "drop-in" replacement.

As I mentioned I'm having major trouble getting my head around the syntax, even enough just to write the first line(!) after spending 12 hours, so far today studying it. All the tutorials seem to labor on and be based around the document.ready thing, but I just need to understand how to write standard lines of code to use in my function.

Please, please give me some pointers here. Thanks.

[Fotiman]

The problem is that the existing code uses navigation of the DOM to locate the input fields

Perhaps you can provide the code that's doing that part?

With jQuery, you typically do something like this:

$('selector).someAction();

Where selector is how you find the element(s) using a syntax like you'd use in CSS. For example:
$('div') // select all div elements
$('#foo') // select the element with id 'foo'
$('.bar') // select the element(s) with class 'bar'

You can also select elements based on attributes.
$('input[type="text"]') // select all input elements with type attribute equal to text

For more on selectors:
[api.jquery.com...]

In your example, you could use the find [api.jquery.com] method and the :input [api.jquery.com] selector (which will find all input, textarea, select, and button controls).

function addpop(id) {
  // find all form inputs that are descendants of id
  // and perform a function on each of the elements
  $(id).find(':input').each(function(index, el) {
    // Do something with each DOM element (this == el)
    // save(this.value);
  });

  // Alternatively, you can get an array of the elements
  var elArray = $(id).find(':input').toArray();
}

I hope this is enough to get you started. :)

[snowweb]

Really appreciate that Fotiman. It's certainly going to help. If differs significantly to what I was attempting to use to select the form inputs!

The next section of existing code goes like this:

var out = [];
var formInputs = id.getElementsByTagName("input");
for (var i = 0; i < formInputs.length; i++)
{
  out.push(formInputs.item(i));
}
  
var formInputs = id.getElementsByTagName("select");
for (i = 0; i < formInputs.length; i++)
{
  out.push(formInputs.item(i));
}
  
var formTextArea = id.getElementsByTagName("textarea");
for (i = 0; i < formTextArea.length; i++)
{
  out.push(formTextArea.item(i));
}

It's late now, but in the morning, I'll try to figure out how to convert that to jQuery or at least make it so that it will work within the function you very kindly supplied.

Many thanks again :-)

[Fotiman]

You can replace all that code with:

var out = $(id).find(':input').toArray();

[snowweb]

Many thanks Fotiman. Sorry it's taken me all day to get back to you. I was too enthusiastic to get my app back on track.

You code, both lines, are both working exactly as expected without any modification, so I'd really like to thank you for your help.

Project is back on track and I've learned how to do some stuff with Jquery.

What more can I say? Can't thank you enough. Thanks.

Peter

[Fotiman]

My pleasure :-)