HTML Form “elements” Property

ამ პოსტის დაწერამდე რამდენიმე წუთით ადრე წავაწყდი HTML form ელემენტის elements თვისებასთან დაკავშირებულ ერთ პრობლემას(შეცდომას) რომლის შესახებაც აქამდე არაფერი მსმენია და ცოტა არ იყოს უაზროდ დამახარჯინა დრო.

ცნობილია, რომ form ელემენტის აღნიშნული თვისება არის HTMLCollection ტიპის კოლექცია და იგი შეიცავს კონკრეტული HTML ფორმის შიგნით გამოყენებულ ყველა(input, select, button) ელემენტს. სწორედ ეს კოლექცია წარმოადგენს საჭირო ფორმის ელემენტებთან წვდომის ყველაზე უსაფრთხო(თურმე პირობითად) გზას.

როგორც აღმოჩნდა თუ ფორმის ელემენტებს მოვათავსებთ fieldset ტეგში(და წესით ეს ასეც უნდა გავაკეთოთ) elements კოლექცია მოულოდნელ რეზულტატს დაგვიბრუნებს. კერძოდ კი fieldset ელემენტიც(ან ელემენტები) ამ კოლექციაში აღმოჩნდება.

ჩემი ამოცანა მდგომარეობდა შემდეგში, რომ ფორმის ყველა ელემენტებისაგან მიმეღო მათი სახელებისა და მნიშნვნელობების ე.წ. key/value ობიექტი:

1
2
3
4
5
var map = {}, els = target.form.elements;
for (var i = 0, el; (el = els[i++]);) {
   map[el.name] = el.value;
}
console.log(map);

თუმცა ძალიან უცნაური შედეგი მივიღე რადგან fieldset ელემენტს არც name და არც value თვისებები არ გააჩნია.

პრობლემის იდენტიფიცირების შემდგომ ინტერნეტში მოვიძიე მცირეოდენი ინფორმაცია:

The HTML 4 standard adds new <fieldset> and <label> tags to the set of elements that can appear within a form. In IE 5 and later, placing a <fieldset> in a form causes a corresponding object to be added to the form’s elements[] array. Fieldset elements are not scriptable in interesting ways like other form elements are, and their objects do not have a type property like other form elements do. Therefore, the presence of Fieldset objects in the elements[] array seems like a mistaken design decision. This is particularly true since <label> tags do not cause corresponding objects to be added to the elements[] array. The Mozilla and Netscape 6 browsers have chosen to follow Microsoft’s lead on this in order to be compatible with IE.

What this means is that if you define a form that contains fieldsets, the contents of the elements[] array differ in recent, HTML 4-capable browsers and in older, pre-HTML 4 browsers. In this situation, using position-based numeric indexes in the elements[] array is not portable, and you should define name attributes for all your form elements and refer to them by name.

მოკლედ კვლავ IE :D ნუ რას ვიზამთ რეალობა ასეთია :P

ტეგები: , ,

5 Responses to “HTML Form “elements” Property”

  1. კაცო რას ერჩი მაგ ელემენტს რა დაგიშავა, ბავშვობიდან ჰქონდა ოცნება რო ფორმის ელემენტი გამხდარიყო, რა მოხდა რომ სახელი არ ააქვს ან მნიშვნელობა, მთავარია ელემენტი იყოს და ელემენტარული არ ეშლებოდეს :D
    IE-ს ხსენებაზე უკვე ხუმრობის ხასიათზე ვდგები :D
    ეგ რო არ იყოს რა იქნებოდა ჩვენი ცხოვრება :D

  2. @ალეკო

    არც არაფერს არ ვერჩი, უბრალოდ გამაკვირვა ცოტათი :D ვიფიქრე რაიმე რაციონალური ახსნა ექნებათქო მაგრამ რად გინდა?

    100 წლის წინ M$ – მა IE – ში რაღაცა მიქარა და მიყვნენ მერე სხვებიც ცხვრებივით :D :D

  3. გიო says:

    ბიჭებო,
    გთხოვთ მომწეროთ როგორ გავასწორო პრობლმა ინტერნეტ 6 და7 ში.

    ჩემს Gვერძე IE6,7 ჩეკ ბოქსი საერთოდ არ ჩანს?

    ძაან გთხოვთ დახმარებას

  4. გიორგი says:

    გამარჯობა, დახმარება მჭირდება javascript-ში
    მაქ ფუნქცია ფასების დაანგარიშების და +-ს რომ ვაძლევ ერთმანეთს აწებებს, ანუ თუ არის 1+1 წერს 11-ს. გამოკლებდა, გამრავლება ყველა მუშაობს ამის გარდა

    კოდი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function calcPrice() {
    var rt = document.getElementById("roomtype").value;
    var ns = document.getElementById("nightsstaying").value;
    if ((rt == 0) || (ns == 0)) {
    alert ("Please select Room Type and the Number of Nights");
    return false;
    }
    var totalPrice = ns + rt;
    alert ("The total price is $" + totalPrice);
    }
  5. @გიორგი
    ესე გააკეთე -

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function calcPrice() {
    var rt = parseFloat(document.getElementById("roomtype").value);
    var ns = parseFloat(document.getElementById("nightsstaying").value);
    if ((rt == 0) || (ns == 0)) {
    alert ("Please select Room Type and the Number of Nights");
    return false;
    }
    var totalPrice = ns + rt;
    alert ("The total price is $" + totalPrice);
    }

    თუ შენს შემთხვევაში ცვლად ns-ს ექნებოდა number ტიპი პრობლემა აღარ გექნებოდა მაგრამ შენ შენს მაგალითში გაქვს string ტიპი ამიტომ მიახმარე parseFloat-ი

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"