Can't get valid values from text fields using jQuery selectors

I want to grab some values from text fields, these values represent dates, and are made up of three parts the year, month and day. There are two such dates, the first and last date, together they form 'bounds' to restrict a search.

When I use the following js/jquery on the HTML below I get nonsense results.

I've put the HTML and JS into Jsfiddle here http://jsfiddle.net/grHEY/

And copied the code below as well.

$(".date").cli开发者_如何学编程ck
        (
            function ()
            {
                var dateValueElement = this;
                var propertyId = dateValueElement.id;
                $(".numberBounds").filter("#"+propertyId).toggle();
                handle_date_change(dateValueElement);
            }
        );


function handle_date_change(dateValueElement){

var first_year = $(".firstYear").filter("#"+dateValueElement.id).val();
var first_month = $(".firstMonth").filter("#"+dateValueElement.id).val();
var first_day = $(".firstDay").filter("#"+dateValueElement.id).val();
var last_year = $(".lastYear").filter("#"+dateValueElement.id).val();
var last_month = $(".lastMonth").filter("#"+dateValueElement.id).val();
var last_day = $(".lastDay").filter("#"+dateValueElement.id).val();

}

---

<span style="display: inline;" class="numberBounds" id="74652">
    <input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="firstYear" value="1905" size="4" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="firstMonth" value="08" size="2" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="firstDay" value="07" size="2" type="text"> &lt; 
</span>
<span class="date tag half-padding margin" value="1905-08-07" id="74652">1905-08-07</span>
<span style="display: inline;" class="numberBounds" id="74652"> &lt; 
    <input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="lastYear" value="1905" size="4" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="lastMonth" value="08" size="2" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="lastDay" value="07" size="2" type="text">
</span>

---

Technically, only at most 1 element may have a particular id. If two or more elements share the same id, then it is a violation of the DTD specification for the id attribute (IDREF).

A better way to group items is either by the class attribute or by the name attribute. If you use the name attribute, then document.getElementsByTagName("thename").length returns the number of elements with that name.

---

Your propertyId is not in a global scope. However, I don't think you need to use it in the global scope. Why don't you do this?

$(".date").click
        (
            function ()
            {
                var dateValueElement = this;
                var propertyId = dateValueElement.id;
                $(".numberBounds").filter("#"+propertyId).toggle();
                handle_date_change(dateValueElement, propertyId);
            }
        );


function handle_date_change(dateValueElement, propertyId){

    var first_year = $(".firstYear").filter("#"+dateValueElement.id).val();
    var first_month = $(".firstMonth").filter("#"+propertyId).val();
    var first_day = $(".firstDay").filter("#"+propertyId).val();
    var last_year = $(".lastYear").filter("#"+propertyId).val();
    var last_month = $(".lastMonth").filter("#"+propertyId).val();
    var last_day = $(".lastDay").filter("#"+propertyId).val();

}

http://jsfiddle.net/grHEY/1/

---

I don't know what the difference is, but this worked:

        $(".date").click
        (
            function ()
            {
                var dateElement = this;
                var propertyId = dateElement.id;
console.info(propertyId);           
                $(".numberBounds").filter("#"+propertyId).toggle();
                handle_date_change(dateElement);
            }
        );
    }
);

// ------ START: handle tag clicks -------

function handle_date_change(dateElement){
// grab the component parts of the date and turn them into a String that MySQL can use as query parameter

var propertyId = dateElement.id;

// now we use normal filtering to get the appropriate values
var first_year = $(".firstYear").filter("#"+propertyId).val();
var first_month = $(".firstMonth").filter("#"+propertyId).val();
var first_day = $(".firstDay").filter("#"+propertyId).val();
var last_year = $(".lastYear").filter("#"+propertyId).val();
var last_month = $(".lastMonth").filter("#"+propertyId).val();
var last_day = $(".lastDay").filter("#"+propertyId).val();
console.info(first_year+" | "+first_month+" | "+first_day+" | "+last_year+" | "+last_month+" | "+last_day); 
}

---

Hm, think I figured it out, the problem is that you can't have multiple items with the same IDs (even if they are in different sections of the code). Try something like this:

http://jsfiddle.net/grHEY/5/

Though, there are better ways of doing it. Say http://api.jquery.com/jQuery.data/ (.data) Or instead of storing that in the class, use php to set that to a variable in js (in the header).

---

Where are you adding the class 'date' in the HTML? The click is binded to the span element, is that you want?

---

Your main problem is that you are using the same id for a lot of element. The id should be unique for an element. Also, an id should not start with a digit.

I removed the id from all the elements, and use the containing elements as scope to isolate the textboxes:

http://jsfiddle.net/grHEY/7/

HTML:

<span style="display: inline;" class="numberBounds">
    <input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="firstYear" value="1905" size="4" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="firstMonth" value="08" size="2" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="firstDay" value="07" size="2" type="text"> &lt;
</span>
<span class="date tag half-padding margin" value="1905-08-07">1905-08-07</span>
<span style="display: inline;" class="numberBounds"> &lt;
    <input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="lastYear" value="1905" size="4" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="lastMonth" value="08" size="2" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="lastDay" value="07" size="2" type="text">
</span>

Javascript:

$(".date").click(

function() {
    var first = $(this).prev();
    var last = $(this).next();
    first.toggle();
    last.toggle();
    handle_date_change(first, last);
});


function handle_date_change(first, last) {

    // now we use normal filtering to get the appropriate values
    var first_year = $(".firstYear", first).val();
    var first_month = $(".firstMonth", first).val();
    var first_day = $(".firstDay", first).val();
    var last_year = $(".lastYear", last).val();
    var last_month = $(".lastMonth", last).val();
    var last_day = $(".lastDay", last).val();

    alert(first_year);

}