[childlucy00]

Hi. I've found a DatePicker plugin on the internet, I'm wondering, with it being in a form, how does the selected date get put into the value field to be passed via the action method to a different document.

Relavent bits of code are as follows...

<form name="form1" method="get" action="insertRaceRecord.php">
      <p class="indent">

    <label for ="RaceDate">Date: </label>
        
        <input class="RaceDate" id="RaceDate" value="01/01/2013" />
<script>//http://www.eyecon.ro/datepicker/#about
    $('input').DatePicker({
        format:'m/d/Y',
        date: $('input').val(),
        current: $('input').val(),
        starts: 1,
        position: 'r',
        onBeforeShow: function(){
            $('input').DatePickerSetDate($('input').val(), true);
        },
        onchange: function(formated, dates){
            $('input').val(formated);
            $('input').DatePickerGetDate(formated);
                $('input').DatePickerHide();
        }
    });
         
</script>       
    
    </p>

Thanks in advance

[andrewsw]

Generally it will use a callback (such as onchange()) to update a form-input with the value from the calendar. This value is then submitted with the form.

But, depending on which particular version you use, it might hide the input and displays spans or divs, etc., instead. But the value to be submitted still needs to end up as the value of an input.

BTW You should not use the tagname 'input' as you are likely to have more than one input in a form:

$('input').val(formated);
// should be
$('#RaceDate').val(formated); // etc.

This post has been edited by andrewsw: 09 January 2013 - 08:59 AM

[childlucy00]

Thanks. Tag name changed. Isn't the onchange functionyou mentioned the same as the one in the code above? If so, what javascript function can I use to ensure the value of RaceDate is changed?

Thanks

[SpAm101]

Hi childlucy00

Firstly, you shouldn't have a script section in the body.

The <script></script> section should go in the head, it should define a type 'text/javascript' and it should be executed on load:

<script type="text/javascript">
window.onload = function()
{
   //Javascript goes here
}
</script>

Also, you're not setting a type on your input, it should be 'text':

<input type="text" class="RaceDate" id="RaceDate" value="01/01/2013" />

Quote

Isn't the onchange functionyou mentioned the same as the one in the code above? If so, what javascript function can I use to ensure the value of RaceDate is changed?

Yes it is, the functionally being described is already in place, this line should update the field:

        onchange: function(formated, dates){
            $('#RaceDate').val(formated);

This post has been edited by SpAm101: 10 January 2013 - 07:38 AM

[andrewsw]

Scripts can appear in the body, or in the head-tag, but it is common practice now to place them just before the end </body> tag; in which case, it is not essential to use window.onload.

The type-attribute for a script is no longer a requirement.

The default-type for an input is "text" but I would not assume this; add type="text" explicitly.

If you are using an HTML5 DOCTYPE then the closing /> is not required:

<input type="text" class="RaceDate" id="RaceDate" value="01/01/2013">

@OP In your original code, replace all 'input' in your script with '#RaceDate' (although I assume it could be $('this')).

[SpAm101]

andrewsw, on 10 January 2013 - 07:58 AM, said:

Scripts can appear in the body, or in the head-tag, but it is common practice now to place them just before the end </body> tag; in which case, it is not essential to use window.onload.

Script sections CAN be placed in the body, yes, but it's generally considered bad practice. And, if you're in the process of developing your knowledge about coding, specifically Javascript, then you'd want to keep to best practices, and keep the presentation side of you website separate from the behavioural side.

andrewsw, on 10 January 2013 - 07:58 AM, said:

The type-attribute for a script is no longer a requirement.

Only is you're using an HTML5 doctype, it is required in HTML4.01, which is the current standard.

andrewsw, on 10 January 2013 - 07:58 AM, said:

The default-type for an input is "text" but I would not assume this; add type="text" explicitly.

It is indeed, but still add it for semantics.

andrewsw, on 10 January 2013 - 07:58 AM, said:

If you are using an HTML5 DOCTYPE then the closing /> is not required:

Haha, good point, force of habbit in my Java (yes I mean Java) coding, I shall amend my post.