CODEWITHSUNDEEP
javascriptphpjquery
Shairyar
Shairyar

Reputation: 3356

not able to get input value via JS

I have a form which has two jQuery datapicker input fields, and a form button,

From: <input class="input-large" type="text" id="datepicker_from" name="datepicker_from">

To: <input class="input-large" type="text" id="datepicker_to" name="datepicker_to">

<a class="btn btn-primary" onclick="get_call_details(1, from_date, to_date )" >Check Availability</a>

What i am trying to do is get the date of both fields datepicker_from and datepicker_to and then on click of a form button call function get_call_details(1, from_date, to_date )

The problem is i am not able to get the value of both date fields

Following is how i am trying to get the date field values

$("#datepicker_from").blur(function(){
    var from_date = document.getElementsByName('datepicker_from').value;
    alert (from_date);
});
$("#datepicker_to").blur(function(){
    var to_date = document.getElementsByName('datepicker_to').value;
    alert (to_date);
});

and this is the JS function I am trying to pass the both dates to

function get_call_details(id, from_date, to_date) {
    alert(id, from_date, to_date  );
    $('#dvloader').show();
    $.ajax({
        url: 'outlook_calendar.php',
        type: 'POST',
        data: {'userid': id},
        success: function (data) {
            $(this).parent("#availability").append(data);
            $("#availability").html(data);
                $('#dvloader').hide();
        }
    });
}

All i want is to get the dates of both fields and pass it to function on click of a button, But I am not able to get the dates. I will appreciate any help.

Upvotes: 0

Views: 97

Answers (3)

Steve
Steve

Reputation: 20469

Why not just write this all into a jquery function attached to the a click event:

From: <input class="input-large" type="text" id="datepicker_from" name="datepicker_from">

To: <input class="input-large" type="text" id="datepicker_to" name="datepicker_to">

<a class="btn btn-primary" id="checkavail" >Check Availability</a>

$('#checkavail').click(function(){
    var from = $("#datepicker_from").datepicker('getDate');
    var to = $("#datepicker_to").datepicker('getDate');
    $('#dvloader').show();
    $.ajax({
        url: 'outlook_calendar.php',
        type: 'POST',
        data: {'userid': 1, 'from':from, 'to':to},
        success: function (data) {
            $(this).parent("#availability").append(data);
            $("#availability").html(data);
                $('#dvloader').hide();
        }
    });

Upvotes: 1

Den Isahac
Den Isahac

Reputation: 1525

The getElementsByName() returns an array of result. you should use the getElementById or either use the jQuery selector $('#yourId').val().

Upvotes: 0

Elixir Techne
Elixir Techne

Reputation: 1856

I think the better approach would be to read the to and from date inside get_call_details function.

Function get_call_details(id)
{
    from_date = $("#datepicker_from").val();
    to_date = $("#datepicker_to").val();
}

Upvotes: 1

Related Questions