Using datepicker in a dynamic input

Question

I do have a grid that has a column called Received Date. This column is a dynamic input field that is supposed to activate the datepicker script from jquery when the user clicks on it and so select a desired date.

I do have the this following PHP code that generates the dynamic id:

$sql="SELECT id, firstname, lastname FROM customers ORDER BY firstname";
$sql=$mysqli->query($sql);
while($row=mysqli_fetch_array($sql)){

    $id = $row['id'];
    $firstname = $row['firstname'];
    $lastname = $row['lastname'];

    $output .='<tr id='.$id.'>';
    $output .='<td>'.$firstname.'</td>';
    $output .='<td>'.$lastname.'</td>';
    $output .='<td><input type="text" name="received" id="received" value=""/></td>';
    $output .='</tr>';

}

echo $output;

Then I have my jquery script that calls datepicker for "received" object:

<script>
   $(function() {
      $( "#received" ).datepicker();
   });
</script>

It works good but just for the input in the first row of the grid. The others do not pop up the datepicker script.

Does anyone know any solution? Thanks in advance.

IDs must be unique. Try classes instead.

j08691
– j08691

2014-01-20 03:35:21 +00:00
Commented Jan 20, 2014 at 3:35 — j08691
– j08691, Commented Jan 20, 2014 at 3:35

xdazz · Accepted Answer · 2014-01-20 03:35:05Z

1

You have duplicated id in your html. (datepicker only apply to the first input with id received)

Change id="received" to class="received", and then use class selector will fix your problem.

$(function() {
    $(".received" ).datepicker();
});

answered Jan 20, 2014 at 3:35

xdazz

161k38 gold badges255 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NewInTheBusiness · Accepted Answer · 2014-01-20 03:35:31Z

0

They all have the same id. Try changing it to:

    $output .='<td><input type="text" name="received" class="received" value=""/></td>';

<script>
   $(function() {
      $( ".received" ).datepicker();
   });
</script>

answered Jan 20, 2014 at 3:35

NewInTheBusiness

1,4501 gold badge9 silver badges14 bronze badges

1 Comment

Alexandre Araujo Over a year ago

Thank you very much @NewInTheBusiness. It is working very good and poping up in every row.

Collectives™ on Stack Overflow

Using datepicker in a dynamic input

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related