I have a html form with text fields pid,image,name,startdate,enddate, i get the info from mysql database, my problem is the 2 texfields startdate,enddate, i have attached an image so you can see what it looks like in the browser, if i click startdate and enddate on the top row every thing works fine the datepicker pops up, but when i go to the 2nd row nothing happens, why does it work on the first row but not on any other rows.
here is my code
<div class="alert" id="main">
<p>
<?php
$sql = "SELECT * FROM offers where username = '" . $plyrname . "' AND category='$category' order by price desc limit 10";
$sql_result = mysql_query ($sql ) or die ('request "Could not execute SQL query" '.$sql);
if (mysql_num_rows($sql_result)>0) {
while ($row = mysql_fetch_assoc($sql_result)) {
$pid=stripslashes($row["pid"]);
$pid=$row["pid"];
$name=stripslashes($row["name"]);
$name=$row["name"];
$price=$row["price"];
?>
</p>
<div class="alert" id="ol"><form id="ajax-form" class="autosubmit" method="POST" action="./updateoffers.php">
<fieldset>
<legend></legend>
<table width="914">
<tr>
<td width="64"><span class="tablemiddle">pid</span></td>
<td width="134">Image</td>
<td width="241">Name</td>
<td width="146">price</td>
<td width="146">startdate</td>
<td width="155">enddate</td>
</tr>
<tr>
<td><?php echo $pid; ?></td>
<td><img src="app/images/products/<?php echo $row['image'] ?>" alt="" class="class="" style="width:60px; margin-right:6px"easyui-datagrid="easyui-datagrid" /></td>
<td><input name="name" value="<?php echo $row['name'] ?>" readonly="readonly" /></td>
<td><input name="price" value="<?php echo $row['price'] ?>" /></td>
<td><div class="fitem">
<input name="startdate" id="startdate" value="<?php echo $row['startdate'] ?>">
</div></td>
<td><div class="fitem"> <div class="fitem">
<input name="enddate" id="enddate" value="<?php echo $row['enddate'] ?>">
</div></td>
</tr>
</table>
<input id="where" type="hidden" name="pid" value="<?php echo $row['pid'] ?>" />
</fieldset>
</form><p id="notice"></p>
<a href="#" id="<?php echo $pid; ?>" class="delete_button">Delete</a>
<a href="#" id="<?php echo $pid; ?>" class="delete_button1">Move</a>
</div>
</li>
<?php
}
?>
<button>Load More Products</button>
<?php
} else {
?>
<tr>
<td height="23" colspan="5" class="green"> No results found.</td>
<?php
}
}
?>
</div>
and here is the javascript
<script src="js/pikaday.js"></script> <script>
var picker = new Pikaday(
{
field: document.getElementById('startdate'),
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020]
});
</script>
<script src="js/pikaday.js"></script> <script>
var picker = new Pikaday(
{
field: document.getElementById('enddate'),
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020]
});
</script>
Hi,
I would guess that you are loading the products dynamically and all of the start and end date fields have the same id.
Could you post a link to a page where I can see this not working, or failing that, could you view the source of the page you feature in your screen shot and post the complete code here (i.e. HTML, not PHP)?
Hi i have set you up a test page you can see what is happening i am only bothered about the date fields
http://comparelocal.co/testing/addliveoffers.php
Cheers for that. I had a look at the page and found out what’s wrong.
Short answer:
Each of the date fields have the same ids. Than means you have multiple input elements with the id “startdate” and “enddate”. Ids must be unique to a page (i.e. can only occur once). This is why your datepicker is initializing on the first row and ignoring subsequent rows.
Long answer:
Please don’t take this the wrong way, but there is a lot wrong with your page. The HTML is totally malformed, e.g.
<img src=“…” alt=“” class=“class=”" style=“width:60px; margin-right:6px” easyui-datagrid=“easyui-datagrid” />
and is full of stray tags.
Also, you include the jQuery library five times (must be a record :)) which is absolutely not necessary and will make your web page sluggish while the browser downloads the same script over again.
I would really advise you to run your page through the W3C validator.
Having said that, what we can do to make this work is to give each of the elements a class of “dateField” (for example), get a reference to all of these fields, then loop through them and initiualize a new datePicker object for each one.
I made you a demo of this working.
Here’s the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="http://comparelocal.co/testing/" />
<title>Compare Local</title>
<link rel="stylesheet" href="css/pikaday.css">
</head>
<body>
<fieldset>
<table width="914">
<tr>
<td width="64"><span class="tablemiddle">pid</span></td>
<td width="134">Image</td>
<td width="241">Name</td>
<td width="146">price</td>
<td width="146">startdate</td>
<td width="155">enddate</td>
</tr>
<tr>
<td>46135</td>
<td> </td>
<td><input name="name" value="Bernard Matthews Turkey Dinosaur" readonly="readonly" /></td>
<td><input name="price" value="0.00" /></td>
<td><div class="fitem"><input name="startdate" class="dateField" value=""></div></td>
<td><div class="fitem"><input name="enddate" class="dateField" value=""></div></td>
</tr>
</table>
<input id="where" type="hidden" name="pid" value="46135" />
</fieldset>
<fieldset>
<legend></legend>
<table width="914">
<tr>
<td width="64"><span class="tablemiddle">pid</span></td>
<td width="134">Image</td>
<td width="241">Name</td>
<td width="146">price</td>
<td width="146">startdate</td>
<td width="155">enddate</td>
</tr>
<tr>
<td>46136</td>
<td> </td>
<td><input name="name" value="Clonakilty Irish Sausages" readonly="readonly" /></td>
<td><input name="price" value="0.00" /></td>
<td><div class="fitem"><input name="startdate" class="dateField" value=""></div></td>
<td><div class="fitem"><input name="enddate" class="dateField" value=""></div></td>
</tr>
</table>
<input id="where" type="hidden" name="pid" value="46136" />
</fieldset>
<fieldset>
<legend></legend>
<table width="914">
<tr>
<td width="64"><span class="tablemiddle">pid</span></td>
<td width="134">Image</td>
<td width="241">Name</td>
<td width="146">price</td>
<td width="146">startdate</td>
<td width="155">enddate</td>
</tr>
<tr>
<td>46137</td>
<td> </td>
<td><input name="name" value="Mattessons Fridge Raiders Southern Fried Multipack" readonly="readonly" /></td>
<td><input name="price" value="0.00" /></td>
<td><div class="fitem"><input name="startdate" class="dateField" value=""></div></td>
<td><div class="fitem"><input name="enddate" class="dateField" value=""></div></td>
</tr>
</table>
<input id="where" type="hidden" name="pid" value="46137" />
</fieldset>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="js/pikaday.js"></script>
<script>
var dateFields = $(".dateField");
dateFields.each(function(){
new Pikaday({
field: $(this).get(0),
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020]
})
});
</script>
</body>
</html>
I hope that helps.
Hi thanks for your help,
works like a dream, i will have a look at all my code
thanks again