jquery datepicker multiple instances

Question

Hello veryone!

I have made a RequestForQuote form, in which I give the possebility to add new positions to get RFQ'ed.

In basics this is quite easy done via PHP in my case. Work realy fine. You may want to have a look. It is to be found at: my website

Now I got infected with the jquery-virus and simply wanted to add the datepicker ui (for the latest version I got from their webpage).

<input type="text" size="10" id="deldate[] 
     class="datepicker" value="<?php echo $_REQUEST['deldate'][$k]; ?>" />

$k is from a php for($k=0;$k<=$NoPos;$k++) loop

the javascript code work is like:

$(function() {
$('input').filter('.datepicker').datepicker({
  showOn: 'button', 
  buttonImage: 'calender/media/cal.gif', 
  buttonImageOnly: true,
  firstDay: 1,
  dateFormat: 'yy-mm-dd', 
  minDate: 0, maxDate: '+4Y'});

});

An in the browswer it looks quite nice, the ui shows up, I cann select a date.

BUT...

if I add another position to the form, which is done via PHP, so I have to submit the form to count $NoPos up, the formerly inersted date(s) is lost and I have a blank input-field.

now with the onSubmit: function(dateText) I can get the selected date. However I am failing in accessing the correct input field to put the date in.

So my question is simple: What am I doing wrong? If evrything is fine then someone would please please tell me how I can solve this..

I have thougth of something such as:

for (var i=0;i<=NoPos;i++) {
    var tag = "#deldate"+i;
    $(tag).datepicker({ ... });
}

and using php to <input type="text" size="10" id="lieferdat<?php echo $k; ?>" class="datepicker" />

Many thanks for your assumed patience to read through this...

and many more thanks for any hints given

Cheers Daniel

Answer 1

I don't think the problem lies with the datepicker. The datepicker is just used to fill in the input field with the date, it shouldn't have anything to do with the form fields that are submitted to the server. In any event, only a single datepicker control (div) is actually placed on the page no matter how many dynamic datepickers you actually use. Can you post the relevant generated HTML for the page?

BTW, it looks like (at least in your sample code) you are missing a quote on the id. If that's in the actual code, that could be causing your problem.

EDIT: Based on your posted example (which really should have been added to your question by editing it instead of added as an answer to it), I see your problem. Your input has no name parameter. Inputs are only posted back if they have a name.

Change this:

<input type="text" size="10"
       id="lieferdat<?php echo $k; ?>"
       class="datepicker" />

to this:

<input type="text" size="10"
       id="lieferdat<?php echo $k; ?>"
       name="lieferdat<?php echo $k; ?>"
       class="datepicker" />

Answer 2

Thank you for your quick response!

So here is the code, at least the part I guess is important, as the links to the css anf js files do work after all ;)

I have not figured out the propper formating here, so sry the the mess downways...

Thanks again Daniel

<form action="/cgi-bin/send_form_mail.php.cgi" method="post" enctype="x-www-form-urlencoded" name="sendRFQ" id="sendRFQ">
<input name="artikel0" type="text" class="fieldsm" id="artikel0;" value="2354">
<input name="TypeTC0" type="text" class="fieldsm" id="TypeTC0;" value="1">
<input name="anzahl0" type="text" class="fieldsm" id="anzahl0;" value="33">
<input name="lieferdatum0" type="text" class="fieldsm" id="lieferdatum0;" value=""><br>
<input name="anzahlartikel" type="hidden" id="anzahlartikel" value="1">
<div class="from">
<fieldset>
<legend>Ihre Daten</legend>
<table>
<tr>
<td class="tb_main">Firna</td>
<td><input name="firma" type="text" class="field" id="firma" value=""></td>
</tr>
<tr>
<td class="tb_main">Abteilung</td>
<td><input name="Abteilung" type="text" class="field" id="Abteilung" value=""></td>
</tr>
<tr>
<td class="tb_main">Ansprechpartner*</td>
<td><input name="s_name" type="text" class="field" id="s_name" value=""></td>
</tr>
<tr>
<td class="tb_main">E-Mail Adresse* </td>
<td><input name="s_email" type="text" class="field" id="s_email" value=""></td>
</tr>
<tr>
<td class="tb_main">Telefon</td>
<td><input name="s_phone" type="text" class="field" id="s_phone" value=""></td>
</tr>
<tr>
<td class="tb_main">Fax</td>
<td><input name="Fax" type="text" class="field" id="Fax" value=""></td>
</tr>
</table>
</fieldset>
 <fieldset>
<legend>
Produktdaten    </legend>
<table>
<tr>
<td class="tb_mainsm">Pos</td>
<td class="tb_mainsm">Artikel</td>
<td class="tb_mainsm">Thermopaar</td>
<td class="tb_mainsm">Anzahl</td>
<td class="tb_mainsm">Liefertermin</td>
</tr>
         <tr>
<td class="tb_mainsm">01</td>
<td>
<input name="artikel[0]" type="text" class="fieldsm" id="artikel[0]" size="15" value="2354" onBlur="setdatatobilnd()">
</td>
<td><select name="TypeTC[0]" class="fieldsm" id="TypeTC[0]" value"1">
        <option selected="selected" value="1">S</option>
        <option  value="2">R</option>
        <option  value="3">B</option>
        <option  value="4">K</option>
      </select></td>
<td><input onBlur="setdatatobilnd()" name="anzahl[0]" type="text" class="fieldsm" id="anzahl[0]" size="3" value="33"></td>
<td>

<input type="text" size="10" id="lieferdat0" class="datepicker" value="" onChange="setdatein('lieferdat0','lieferdatum0');"/>
</td>
</tr>


</table>
<input name="mehr" type="button" class="button" value="+" onClick="AddNewLine('mehr')">
    </fieldset> 

<fieldset>
<legend>Hinweise</legend>
<textarea name="s_message" class="field"></textarea>
</fieldset>
<span class="Stil3">* sind Pflichtferlder    </span></div>
<p>
<input name="Submit3" type="button" class="button" style="float:right" value="schlie&szlig;en" onClick="closewin();">
<input tabindex="6" name="Submit" type="button" class="button"  style="float: left;" value="Anfrage abschicken" onClick="sendform('send');">
  </p>
</form>

Answer 3

i was looking for the same myself, and i think i found the trick to it: $('input').filter('.datepickerclass').datepicker()
and on the relevant input elements:
class="datepickerclass"

i see above you tried something similar, but just following the recipe (of that link) worked for me.