Apply JQuery function on a table elements which are pull by PHP

JavaScript
1

Hi fantastic community,
I have question re looping jQuery function on table elements which are pulled by PHP from Server. I wanted to click on a picture to trigger jQuery from 10 items pulled from server but jQuery is only functioning on one item. Any idea how can I loop through this given all elements have same ID because of PHP

<td><p>Qty <span><?php echo $cartitem ['cart_qty'] ?></span></p></td>
<td><img src="view/cart_delete.png" width="20px" height="20px" id="delete" style=padding: 100px;/></td>


	<td>
	<img  onClick="jsfunction()" src="view/cart_update.png" width="20px" height="20px"style=padding: 50px;/>
	</td>
	
	<td >
	<select style=display:none  name="qty" id="qty" onChange="senddata()">
	<?php for($x =1; $x<=15; $x++) { echo "<option> $x </option>" ;}  ?>
	</select>
	</td>
	
</tbody>

</table>
	<script>
function jsfunction() { 
$("#qty").show();}
</script>
	<script>
	function senddata() {
	
	alert("hello");
	}
	
	</script>
</form>
<?php } ?>
<?php echo $cartitem ['cart_prod_name'] ?>
2

IDs should be unique to a page. This is something you probably want to fix.

Otherwise, if you can post the HTML which the PHP generates and the relevant JS (so that I can recreate your problem on my machine), I don’t mind taking a look.

1 Like
4 
<form class= "row g-3">
	<table class="table">	  
	<tbody>
	<td>
	<img class="img-thumbnail" id="img" name="img" src="view/images/apples.jpg" width="80" height="100">
	</td>
	<td><h6 >Apples</h6></td>
	
	<td><p>Qty <span>1</span></p></td>
	<td><img src="view/cart_delete.png" width="20px" height="20px" id="delete" style=padding: 100px;/></td>
	
	
		<td>
		<img  onClick="jsfunction()" src="view/cart_update.png" width="20px" height="20px"style=padding: 50px;/>
		</td>
		
		<td >
		<select style=display:none  name="qty" id="qty" onChange="senddata()">
		<option> 1 </option><option> 2 </option><option> 3 </option><option> 4 </option><option> 5 </option><option> 6 </option><option> 7 </option><option> 8 </option><option> 9 </option><option> 10 </option><option> 11 </option><option> 12 </option><option> 13 </option><option> 14 </option><option> 15 </option>		</select>
		</td>
		
	</tbody>
	
	</table>
		<script>
	function jsfunction() { 
	$("#qty").show();}
	</script>
		<script>
		function senddata() {
		
		alert("hello");
		}
		
		</script>
	</form>
		<form class= "row g-3">
	<table class="table">	  
	<tbody>
	<td>
	<img class="img-thumbnail" id="img" name="img" src="view/images/lettuce.jpg" width="80" height="100">
	</td>
	<td><h6 >Lettuce</h6></td>
	
	<td><p>Qty <span>1</span></p></td>
	<td><img src="view/cart_delete.png" width="20px" height="20px" id="delete" style=padding: 100px;/></td>
	
	
		<td>
		<img  onClick="jsfunction()" src="view/cart_update.png" width="20px" height="20px"style=padding: 50px;/>
		</td>
		
		<td >
		<select style=display:none  name="qty" id="qty" onChange="senddata()">
		<option> 1 </option><option> 2 </option><option> 3 </option><option> 4 </option><option> 5 </option><option> 6 </option><option> 7 </option><option> 8 </option><option> 9 </option><option> 10 </option><option> 11 </option><option> 12 </option><option> 13 </option><option> 14 </option><option> 15 </option>		</select>
		</td>
		
	</tbody>
	
	</table>
		<script>
	function jsfunction() { 
	$("#qty").show();}
	</script>
		<script>
		function senddata() {
		
		alert("hello");
		}
		
		</script>
	</form>
		<form class= "row g-3">
	<table class="table">	  
	<tbody>
	<td>
	<img class="img-thumbnail" id="img" name="img" src="view/images/barsoap.jpg" width="80" height="100">
	</td>
	<td><h6 >Bar Soap</h6></td>
	
	<td><p>Qty <span>1</span></p></td>
	<td><img src="view/cart_delete.png" width="20px" height="20px" id="delete" style=padding: 100px;/></td>
	
	
		<td>
		<img  onClick="jsfunction()" src="view/cart_update.png" width="20px" height="20px"style=padding: 50px;/>
		</td>
		
		<td >
		<select style=display:none  name="qty" id="qty" onChange="senddata()">
		<option> 1 </option><option> 2 </option><option> 3 </option><option> 4 </option><option> 5 </option><option> 6 </option><option> 7 </option><option> 8 </option><option> 9 </option><option> 10 </option><option> 11 </option><option> 12 </option><option> 13 </option><option> 14 </option><option> 15 </option>		</select>
		</td>
		
	</tbody>
	
	</table>
		<script>
	function jsfunction() { 
	$("#qty").show();}
	</script>
		<script>
		function senddata() {
		
		alert("hello");
		}
		
		</script>
	</form>
		<form class= "row g-3">
	<table class="table">	  
	<tbody>
	<td>
	<img class="img-thumbnail" id="img" name="img" src="view/images/lettuce.jpg" width="80" height="100">
	</td>
	<td><h6 >Lettuce</h6></td>
	
	<td><p>Qty <span>1</span></p></td>
	<td><img src="view/cart_delete.png" width="20px" height="20px" id="delete" style=padding: 100px;/></td>
	
	
		<td>
		<img  onClick="jsfunction()" src="view/cart_update.png" width="20px" height="20px"style=padding: 50px;/>
		</td>
		
		<td >
		<select style=display:none  name="qty" id="qty" onChange="senddata()">
		<option> 1 </option><option> 2 </option><option> 3 </option><option> 4 </option><option> 5 </option><option> 6 </option><option> 7 </option><option> 8 </option><option> 9 </option><option> 10 </option><option> 11 </option><option> 12 </option><option> 13 </option><option> 14 </option><option> 15 </option>		</select>
		</td>
		
	</tbody>
	
	</table>
		<script>
	function jsfunction() { 
	$("#qty").show();}
	</script>
		<script>
		function senddata() {
		
		alert("hello");
		}
		
		</script>
	</form>
		<form class= "row g-3">
	<table class="table">	  
	<tbody>
	<td>
	<img class="img-thumbnail" id="img" name="img" src="view/images/tomato.jpeg" width="80" height="100">
	</td>
	<td><h6 >tomato</h6></td>
	
	<td><p>Qty <span>8</span></p></td>
	<td><img src="view/cart_delete.png" width="20px" height="20px" id="delete" style=padding: 100px;/></td>
	
	
		<td>
		<img  onClick="jsfunction()" src="view/cart_update.png" width="20px" height="20px"style=padding: 50px;/>
		</td>
		
		<td >
		<select style=display:none  name="qty" id="qty" onChange="senddata()">
		<option> 1 </option><option> 2 </option><option> 3 </option><option> 4 </option><option> 5 </option><option> 6 </option><option> 7 </option><option> 8 </option><option> 9 </option><option> 10 </option><option> 11 </option><option> 12 </option><option> 13 </option><option> 14 </option><option> 15 </option>		</select>
		</td>
		
	</tbody>
	
	</table>
		<script>
	function jsfunction() { 
	$("#qty").show();}
	</script>
		<script>
		function senddata() {
		
		alert("hello");
		}
		
		</script>
	</form>
5

Couple of things…

First off, do you think you could indent your code? It makes it so much easier to parse at a glance. Normally, you can set up something like prettier in your editor to do this automatically. If you don’t have that set up, you can use a service like this one.

Secondly, you are redefining the same functions over and over again. You should only have one occurrence of jsFunction in a script tag at the bottom of your document. You can remove senddata as it is not being called (in our example).

Thirdly, the reason why this isn’t working as expected is that every select element has an ID of qty. You need to change this. Can’t you use a class instead?

Please make the changes I suggest above, then post the updated HTML and I’ll show you how to make it work as desired.

6

Sorry James, will indent it and repost again.
Thank you

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.