5 Replies - 1044 Views - Last Post: 10 January 2013 - 08:26 AM

#1 childlucy00  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 03-February 10

Datepicker plugin used in form not passing selected value

Posted 09 January 2013 - 08:44 AM

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

Is This A Good Question/Topic? 0
  • +

Replies To: Datepicker plugin used in form not passing selected value

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3488
  • View blog
  • Posts: 11,902
  • Joined: 12-December 12

Re: Datepicker plugin used in form not passing selected value

Posted 09 January 2013 - 08:58 AM

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

Was This Post Helpful? 0
  • +
  • -

#3 childlucy00  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 03-February 10

Re: Datepicker plugin used in form not passing selected value

Posted 09 January 2013 - 09:10 AM

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
Was This Post Helpful? 0
  • +
  • -

#4 SpAm101  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 54
  • Joined: 28-November 12

Re: Datepicker plugin used in form not passing selected value

Posted 10 January 2013 - 07:37 AM

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

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3488
  • View blog
  • Posts: 11,902
  • Joined: 12-December 12

Re: Datepicker plugin used in form not passing selected value

Posted 10 January 2013 - 07:58 AM

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')).
Was This Post Helpful? 0
  • +
  • -

#6 SpAm101  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 54
  • Joined: 28-November 12

Re: Datepicker plugin used in form not passing selected value

Posted 10 January 2013 - 08:26 AM

View Postandrewsw, 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.

View Postandrewsw, 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.

View Postandrewsw, 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.

View Postandrewsw, 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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1