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?

You biggest issue seems to be: <<I can only use jQuery 1.3.2>> — A. Wolff
– A. Wolff, Commented Jul 17, 2013 at 10:16
Could you expand on why you are constrained to using such an old version of jQuery? — Jason Evans
– Jason Evans, Commented Jul 17, 2013 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
– kabforks, Commented Jul 17, 2013 at 10:19

cheesetor · Accepted Answer · 2013-07-17 10:27:36Z

3

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

answered Jul 17, 2013 at 10:27

cheesetor

813 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

messivanio · Accepted Answer · 2013-07-17 11:46:02Z

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, 2013 at 11:46

messivanio

2,30918 silver badges26 bronze badges

answered Jul 17, 2013 at 10:52

Nono

7,4024 gold badges42 silver badges41 bronze badges

3 Comments

kabforks Over a year ago

(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 :(

Nono Over a year ago

@kabforks: pardon bro, it's my mistake about (1). That's y I removed

Paul Over a year ago

<input ...> tags don't need closing </input> tags, see stackoverflow.com/questions/13232121/…

Collectives™ on Stack Overflow

Finding input elements with jquery

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related