Finding input elements with jquery

Question

I'm trying to show the difference in days between two input fields that contain dates. I am pretty much unable to alter the HTML so I have to do this with Javascript. The HTML is pretty ugly. I can only use jQuery 1.3.2.

HTML:

<div id="longUnreadableUnidentifiableId">
  <div class="dynamic">
    <div class="row">
      <span class="column">
        <input id="horribleHorribleLongIdTxtFrom" type="text">11/02/2002</input>
      </span>
      <span class="colum">
        <input id="horribleHorribleLongIdTxtUntil" type="text">16/12/2010</input>
      </span>
      <div class="diff"> [diff] </div>
    </div>
  </div>

<div id="longUnreadableUnidentifiableId2">
  <div class="dynamic">
    <div class="row">
      <span class="column">
        <input id="horribleHorribleLongIdTxtFrom" type="text">03/03/2003</input>
      </span>
      <span class="colum">
        <input id="horribleHorribleLongIdTxtUntil" type="text">16/12/2010</input>
      </span>
      <div class="diff"> [diff] </div>
    </div>
  </div>

When any one of the dates on a certain line change, the difference between them should show. I'm using moment.js for the date diff.

The following javascript tries to find the associated input field and alert the difference between them. However, I am having trouble finding the second input field (var until).

Javascript:

$('input[id*="txtFrom"]').live('change', function() { 
    var from = $(this);
    var until = from.parent(".row").find('input[id*="txtUntil"]');

    a = moment(from.val());
    b = moment(until.val());

    alert(b.diff(a, 'days'));
});

Does someone have a solution to this problem? Perhaps something more elegant?

Could you expand on why you are constrained to using such an old version of jQuery? — Jason Evans, Jul 17 '13 at 10:17
The site on which I'm making this change is pretty significant and I cannot upgrade jQuery in case of breaking changes. I do not have the time or resources to properly test it. The decision is not mine. — kabforks, Jul 17 '13 at 10:19

score 3 · Accepted Answer · answered Jul 17 '13 at 10:27

3

Try using parents instead of parent. parent just checks the immediate parent, whereas parents checks all of them.

answered Jul 17 '13 at 10:27

cheesetor

91
3

score 1 · Answer 2 · edited Jul 17 '13 at 11:46

1

Some suggestions:

Correct your html syntax, use

<input id="horribleHorribleLongIdTxtFrom" type="text" value="11/02/2002"></input>

instead of

<input id="horribleHorribleLongIdTxtFrom" type="text">11/02/2002</input>

your element id horribleHorribleLongIdTxtFrom coming twice in same page, you are breaking the html rule.

edited Jul 17 '13 at 11:46

messivanio

2,263
18
24

answered Jul 17 '13 at 10:52

Nono

6,986
4
39
39

(1) Are you sure? It works here... (2, 3) I have no way to edit the HTML, and yes, it is indeed breaking the HTML rule. Old code :( – kabforks Jul 17 '13 at 11:02
@kabforks: pardon bro, it's my mistake about (1). That's y I removed – Nono Jul 17 '13 at 11:36
tags don't need closing tags, see http://stackoverflow.com/questions/13232121/closing-html-input-tag-issue – Paul Jul 17 '13 at 11:47

Finding input elements with jquery

2 Answers2