?
Solved

How to populate a table based on values selected from drop list which is inside HTML5 table

Posted on 2015-02-02
19
Medium Priority
?
112 Views
Last Modified: 2015-02-14
Problem is : I have a dropdown list inside html5 table. The dropdown is well populated with the data. This dropdown is shown in the third column of the table. Now when the user selected an item in the drop down, the other details should get displayed in the next column in the same row. How will that be accomplished.  Pls help as i don't have in depth experience in PHP.  Following is my code :
<?php session_start(); ?>
<?php
	include ("dbcon.php");
	include("BrowserDetection.php"); 
	include("included_functions.php"); 
	if (empty($_SESSION['login_mail'])){
		header('Location: http://localhost/mainsite/');
	}
   else 
   {
  		//Pick username from user_dtls table based on $username
		$umailid = trim($_SESSION['login_mail']);
		if ($umailid == "Guest"){ $fullname = "Guest User"; }
		else {
			$pickname = "select u_name from user_dtls where u_emailid = '{$umailid}'";
			$result = mysqli_query($connection, $pickname);
			$resultarr = mysqli_fetch_array($result);
			if (!$resultarr)
			{ die("Database Query failed." . mysqli_error($connection)); }
			else {$fullname = $resultarr[0];}
			mysqli_free_result($result);
		}
   }
?>
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="js/modernizr.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/fabric.js"></script>
		<link rel="stylesheet" type="text/css" href="css/dsgncnv.css">
		
	</head>
	<body>
	    <hr style="float:left; margin-left:5%; margin-bottom:5px;" />
	    <hr style="float:left; margin-left:5%; width:90%;height:3px; background-color:#D2D2D3" />
	    <div class="cart-img"><img src="images/custmers.jpg" alt="" class="cartlineimg" /></div>
	    <hr style="float:left; margin-left:5%; width:90%;height:3px; background-color:#D2D2D3" />
		<div class="spc"></div>
		<div class="hdr-txt">
			<span class="spnid">SHOPPING CART</span>
		</div>
		<hr style="float:left; margin-left:5%; width:90%; height:1px; background-color:#D7D5D5; margin-bottom:5px" />
		<div class="disp_recs">
			<?php
				$var = trim($_SESSION['login_mail']);
				$query = "SELECT user_id FROM user_dtls where u_emailid = '{$var}'";
				$retrv = mysqli_query($connection, $query);
				$retrvarr = mysqli_fetch_array($retrv);
				if (!$retrvarr)
				{ die("Database Query failed." . mysqli_error($connection)); }
				else {$getid = $retrvarr[0];}

				//get details based on id
				$pickrecs = "SELECT DATE_FORMAT(tord_dt,'%d-%m-%Y') as label_date, file_path, file_name FROM utmp_orders where user_id = '{$getid}'";
				$result = mysqli_query($connection, $pickrecs); ?>
				<table id='display'>
					 <tr>
						<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Labels&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
						<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Creation Date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
						<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Labels&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
						<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Total&nbsp;Price&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
						<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
					</tr>
					<?php while($resultarr = mysqli_fetch_assoc($result)){ ?>
					<tr>
					<td style="display:none;"></td>
					<td><img src="<?php echo $resultarr['file_path'] ?>" alt="" style="width:61px; height:54px" /></td>
					<td><?php echo $resultarr["label_date"] ?></td>
					<td><?php
							$pickrecs = "SELECT rt_qty, rt_cost FROM rate_mast order by rt_qty";
							$rtlist = mysqli_query($connection, $pickrecs); 
							echo "<select name='ratelist' value='' class='rdd'>";
							while($rtlistarr = mysqli_fetch_assoc($rtlist)){ 
								//echo "<option value = $rtlistarr[rt_qty]&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;$rtlistarr[rt_cost]>$rtlistarr[rt_qty]&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&pound;&nbsp;$rtlistarr[rt_cost]</option>";
								echo "<option value = $rtlistarr[rt_qty]>$rtlistarr[rt_qty]</option>";
							}
							echo "</select>";
					?></td>
					<td>
					    <?php //echo($rtlistarr[rt_cost]) ?>
							<input type="text" name="i-cost" value="" readonly class="icost">
					</td>					
					<td><a href=""><img src="images\cartidel.jpg" alt="" style="width:42px; height:42px"</a></td>					
				</tr>
				<?php } ?>
				</table>
				<?php mysqli_free_result($retrv);
				mysqli_free_result($result);
			?>
		</div>
	</body>
</html>
<?php
	mysqli_close($connection);
?>

Open in new window

0
Comment
Question by:Suneet Pant
  • 11
  • 7
18 Comments
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 40584339
Assuming you want to populate your textbox with the rt_cost value relating to the rt_qty value, the easiest way to do it is to include the rt_cost value as a data attribute on the dropdown options, and then use jQuery to bind a change() event to the dropdown.

In your code above, build the <option> tags like this (note the data-cost attribute):

echo "<option value = $rtlistarr[rt_qty] data-cost='" . $rtlistarr[rt_cost] . "'>$rtlistarr[rt_qty]</option>";

Open in new window


And then add the following javascript to a SCRIPT tag in the HEAD of your document:

$(document).ready(function() {
   $("select[name='ratelist']").change(function() {
      var cost = $("option:selected", this).data('cost');
      $("input[name='i-cost']").val(cost);
   });
});

Open in new window

0
 

Author Comment

by:Suneet Pant
ID: 40585489
Thanks Chris,  You really saved my day.

One more thing to ask - Here I am retrieving only one data on selecting an item from the dropdown. But what will be done in case I have to retrieve multiple data and display the records in different columns of the same row using ajax to avoid refreshing of the entire page. Pls help by
0
 
LVL 45

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 2000 total points
ID: 40585977
Hey Suneet,

When you build your <option> tags in PHP, you can include as many data attributes as you need:

echo "<option value = $rtlistarr[rt_qty] data-cost='" . $rtlistarr[rt_cost] . "' data-somevalue='" . $somevariable . "'>$rtlistarr[rt_qty]</option>";

Open in new window


And then extend your jQuery to put the values wherever you need them:

$(document).ready(function() {
   $("select[name='ratelist']").change(function() {
      var cost = $("option:selected", this).data('cost'); // get the value of the data-cost attribute
      var somevalue = $("option:selected", this).data('somevalue'); // get the value of the data-somevalue attribute
      $("input[name='i-cost']").val(cost); // set the i-cost input to the cost value
      $("input[name='i-somevalue']").val(somevalue); // set the i-somevalue input to the somevalue value
   });
});

Open in new window


Hope that makes sense, but come back if you need more info.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:Suneet Pant
ID: 40586033
Thank your very much Chris for help me. One last question. Where do I need to put this jQuery. I mean should I need to put under <head>....</head> or somewhere else.
0
 
LVL 45

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 2000 total points
ID: 40586039
Yeah - you normally put this stuff in the HEAD of your document, wrapped in a <script> tag:

<head>
   <title></title>
   <script src="js/modernizr.js"></script>
   <script src="js/jquery.min.js"></script>
   <script src="js/fabric.js"></script>
   <link rel="stylesheet" type="text/css" href="css/dsgncnv.css">
   <script type="text/javascript">
   $(document).ready(function() {
      $("select[name='ratelist']").change(function() {
         var cost = $("option:selected", this).data('cost');
         $("input[name='i-cost']").val(cost);
      });
   });
   </script>
</head>

Open in new window

0
 

Author Comment

by:Suneet Pant
ID: 40586053
I actually put the jQuery within <head>....</head> tag. The code works fine. But one problem is coming. If I change item of first row dropdown ie "Labels", the value "Total Price" of the next column in the same row should get change. But instead value of all the rows  change which shouldnot happen.  Please Help
You can see in the image  below :
Pls check this
Here is the updated code :
<?php session_start(); ?>
<?php
	include ("dbcon.php");
	include("BrowserDetection.php"); 
	include("included_functions.php"); 
	if (empty($_SESSION['login_mail'])){
		header('Location: http://localhost/mainsite/');
	}
   else 
   {
  		//Pick username from user_dtls table based on $username
		$umailid = trim($_SESSION['login_mail']);
		if ($umailid == "Guest"){ $fullname = "Guest User"; }
		else {
			$pickname = "select u_name from user_dtls where u_emailid = '{$umailid}'";
			$result = mysqli_query($connection, $pickname);
			$resultarr = mysqli_fetch_array($result);
			if (!$resultarr)
			{ die("Database Query failed." . mysqli_error($connection)); }
			else {$fullname = $resultarr[0];}
			mysqli_free_result($result);
		}
   }
?>
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="js/modernizr.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/fabric.js"></script>
		<link rel="stylesheet" type="text/css" href="css/dsgncnv.css">
		<script>
		  $(document).ready(function() {
		  $("select[name='ratelist']").change(function() {
		      var cost = $("option:selected", this).data('cost');
		      $("input[name='i-cost']").val(cost);
		    });
		  });
		</script>
		
	</head>
	<body>

		<div class="hdr-txt">
			<span class="spnid">SHOPPING CART</span>
		</div>
		<hr style="float:left; margin-left:5%; width:90%; height:1px; background-color:#D7D5D5; margin-bottom:5px" />
		<div class="disp_recs">
			<?php
				$var = trim($_SESSION['login_mail']);
				$query = "SELECT user_id FROM user_dtls where u_emailid = '{$var}'";
				$retrv = mysqli_query($connection, $query);
				$retrvarr = mysqli_fetch_array($retrv);
				if (!$retrvarr)
				{ die("Database Query failed." . mysqli_error($connection)); }
				else {$getid = $retrvarr[0];}

				//get details based on id
				$pickrecs = "SELECT t_ordid, DATE_FORMAT(tord_dt,'%d-%m-%Y') as label_date, file_path, file_name FROM utmp_orders where user_id = '{$getid}'";
				$result = mysqli_query($connection, $pickrecs); ?>
				<table id='display'>
					 <tr>
						<th>Labels</th>
						<th>Creation&nbsp;Date</th>
						<th>Labels</th>
						<th>Total&nbsp;Price</th>
						<th>;</th>
					</tr>
					<?php while($resultarr = mysqli_fetch_assoc($result)){ ?>
					<tr>
					<td style="display:none;"></td>
					<td><img src="<?php echo $resultarr['file_path'] ?>" alt="" style="width:61px; height:54px" /></td>
					<td><?php echo $resultarr["label_date"] ?></td>
					<td><?php
							$pickrecs = "SELECT rt_qty, rt_cost FROM rate_mast order by rt_qty";
							$rtlist = mysqli_query($connection, $pickrecs); 
							echo "<select name='ratelist' value='' class='rdd'>";
							while($rtlistarr = mysqli_fetch_assoc($rtlist)){ 
                                                          echo "<option value = $rtlistarr[rt_qty] data-cost='" . $rtlistarr[rt_cost] . "'>$rtlistarr[rt_qty]</option>";	
                                                        }
							echo "</select>";
					?></td>
					<td>
					  <input type="text" name="i-cost" value="" readonly class="icost">
					</td>					
					<td><a href=""><img src="images\cartidel.jpg" alt="" style="width:42px; height:42px"</a></td>					
				</tr>
				<?php } ?>
				</table>
				<?php mysqli_free_result($retrv);
				mysqli_free_result($result);
			?>
		</div>
	</body>
</html>
<?php
	mysqli_close($connection);
?>

Open in new window

0
 
LVL 45

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 2000 total points
ID: 40586321
Right. The reason that's happening is because we're setting 'i-cost' to the value of the dropdown, and there are lots of 'i-cost' inputs - they all get set. What we need to do here is to filter the i-cost to match the row (tr) that the <select> is in. We do this by getting the parent <tr> of the <select>, and then use that to set the value of the correct 'i-cost'

$("select[name='ratelist']").change(function() {
    var cost = $("option:selected", this).data('cost');
    var currentRow = $(this).parents('tr'); // get the <tr> that contains the changed <select>
    $("input[name='i-cost']", currentRow).val(cost); // set the value of 'i-cost' in the currentRow only
});

Open in new window

0
 

Author Comment

by:Suneet Pant
ID: 40586353
Thank you very much Chris for helping me.
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 40586682
No worries - glad I could help :)
0
 

Author Comment

by:Suneet Pant
ID: 40588462
hi chris I want one more help from you.
Pls check this link
Delete Records from html table
0
 

Author Comment

by:Suneet Pant
ID: 40590468
Now please this time help me with the code as things are not coming in my mind how to do it. Lets say database table name is "cart", I want to update the contents of each row of the html table (as shown in the picture) to be saved in the "cart" table in one go using jquery and ajax. Rest of the code is same as above.
Please helpPic
0
 

Author Comment

by:Suneet Pant
ID: 40590640
hi Chris pls help me
0
 

Author Comment

by:Suneet Pant
ID: 40590681
Please reply
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 40590693
Hey Suneet,

You should really ask a new question for this as it's a different issue to the original question.
0
 

Author Comment

by:Suneet Pant
ID: 40590771
ok i will do that
0
 

Author Comment

by:Suneet Pant
ID: 40597914
I've requested that this question be deleted for the following reason:

se
0
 

Author Comment

by:Suneet Pant
ID: 40597906
My Subscription has ended so I removing my question
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 40597915
The question was answered in full, so deleting it is not an option !! The OP should accept an answer.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month15 days, 12 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question