How can I show the value of a hidden input field if the value is defined?

Question

 $(document).ready(function() { $(".city_name").click(function() { city = this.id; course = $("#courses").val(); course_type = $("#courses_type").val(); course_type2 = $("#courses_type2").val(); course_type3 = $("#courses_type3").val(); alert(course); alert(courses_type); alert(courses_type2); alert(courses_type3); alert(city); $.ajax({ type: "POST", data: { "id": city, "courses": course, "courses_type": course_type, "courses_type2": course_type2, "courses_type3": course_type3 }, url: "filter-city-colleges.php", success: function(data) { alert(data); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="city_name"> Click me <div> <input type="hidden" id="courses_type" value="field"> <input type="hidden" id="courses_type2" value="univer"> <input type="hidden" id="courses_type3" value="course"> 

In this code when I am alert courses_type, courses_type2, courses_type3 in jquery, It show [objectHTMLcollection]. How to retrieve the value of hidden input box.

Answer 1

When var keyword is not used before a variable , it will be defined in global space

$(document).ready(function(){
    $(".city_name").click(function(){
    var city=this.id;
    course = $("#courses").val(); // cannot find any DOM with id courses
    var course_type = $("#courses_type").val();
    alert(course);    // It will alert undefined since there is no DOM with id course

    alert(courses_type); // will alert field
    var course_type2 = $("#courses_type2").val();
    var course_type3 = $("#courses_type3").val();
    // put the alert here after retriving the value from DOM, before retrieving it will be undefined
    alert(courses_type2);
    alert(courses_type3);
    alert(city);
    $.ajax({
        // rest of the ajax
      });
    });
});

Answer 2

Try the following code to pass all hiddedn fields with values to ajax request:

$(document).ready(function(){
        $(".city_name").click(function(){
            city=this.id;
            course = $("#courses").val();

            var data = {};
            $('input[type="hidden"]').each(function(){
                if($(this).val()){
                    data[$(this).attr('id')] = $(this).val();
                }
            });
            data['id'] = city;
            data['course'] = 'course';

            $.ajax({
                type:"POST",
                data:data,
                url:"filter-city-colleges.php",
                success:function(data){
                    alert(data);
                }

            });
        });
    });

Answer 3

You need to mention the correct variable name inside alert() function, for example you have a variable with name course_type but you mentioned course**s**_type inside the alert. just change it :)

 $(document).ready(function() { $(".city_name").click(function() { city = this.id; course = $("#courses").val(); course_type = $("#courses_type").val(); course_type2 = $("#courses_type2").val(); course_type3 = $("#courses_type3").val(); // alert(course); alert(course_type); alert(course_type2); alert(course_type3); alert(city); $.ajax({ type: "POST", data: { "id": city, "courses": course, "courses_type": course_type, "courses_type2": course_type2, "courses_type3": course_type3 }, url: "filter-city-colleges.php", success: function(data) { alert(data); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="city_name" id="cityId"> Click me <div> <input type="hidden" id="courses_type" value="field" /> <input type="hidden" id="courses_type2" value="univer" /> <input type="hidden" id="courses_type3" value="course" />