?
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
?
103 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 7
19 Comments
 
LVL 43

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 43

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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 

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 43

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 43

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 43

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 43

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 43

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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

764 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