By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,946 Members | 727 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,946 IT Pros & Developers. It's quick & easy.

How to populate php multicolumn dropdown box to textboxes using Js

100+
P: 547
I have a multi-column dropdown box using PHP and MYSQLI from the racedetails table that populates from DB.

I need to dynamically populate the fields in a row from the dropdown box, to respective text boxes on the form, after selecting the correct row using javascript i assume. More data will then be added to other text boxes on form, before the database is updated with a submit button.
racedate,
racename,
distance,
entry_Fee

Somehow i need to integrate some Js with it but how?
Any suggestions please? Difficult being a novice in this world coming from MS Access. See attached picture of what is required

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function doThis()
  3. {
  4.     var sel = document.getElementById('conSelect').options[document.getElementById('conSelect').selectedIndex].value;
  5.     //alert(sel);
  6.     if(sel=="UK")
  7.     {
  8.         document.getElementById('racename').value="";
  9.         document.getElementById('racedate').value="";
  10.         document.getElementById('distance').value="";
  11.     }
  12.  
  13. }
  14. </script>
The complete file
Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3. <head>
  4. <title>dropdown</title>
  5. <style type="text/css"> </style>
  6.    <script src="/script.js"></script>
  7. </head>
  8. <?php
  9. $con = new mysqli('localhost','root','','register') or die ('Cannot connect to db');
  10.     $result = $con->query("select racesid, racedate,racename,distance,entry_Fee from tblracedetails order by racedate ");
  11.     echo "<html>";
  12.     echo "<body>";
  13.     echo "<select name='Races'>";
  14.  
  15.     while ($row = $result->fetch_assoc()) {
  16.                   unset($racesid, $racedate);
  17.                   $racesid = $row['racesid'];
  18.                   $racedate = $row['racedate']; 
  19.                   $racename= $row['racename']; 
  20.                   $distance = $row['distance']; 
  21.                   $entry_Fee = $row['entry_Fee']; 
  22.                    echo '<option value="'.$racesid.'">'.$racedate.'  --  '.$racename.'  --'  .$distance.'-- '  .$entry_Fee.'</option>';
  23.            //   echo '<option value=' . $row['racedate'] . '>' . $row['racename'] . ' ' . $row['distance'] .' ' . $row['entry_fee']'</option>';
  24. }
  25.     echo "</select>";
  26.     echo "</body>";
  27.     echo "</html>";
  28. ?> 
  29. </head>
  30.  
  31. <body>
  32. <tr>
  33. <td style="font-weight: bold"><div align="left"><label for="name" value="racename">racename</label></div></td>
  34. <input id="racename" name="racename" type="text" class="input" size="20"   /></td>
  35. </tr>
  36. <tr>
  37. <td style="font-weight: bold"><div align="left"><label for="name" value="racedate">racedate</label></div></td>
  38. <input id="racedate" name="racedate" type="text" class="input" size="20"   /></td>
  39. </tr>
  40. <tr>
  41. <td height="23" style="font-weight: bold"><div align="left"><label for="distance">distance</label></div></td>
  42. <td><input id="distance" name="distance" type="text" class="input" size="10"  /></td>
  43. </tr>
  44. <tr>
  45. <td height="23" style="font-weight: bold"><div align="left"><label for="entry_Fee">entry_Fee</label></div></td>
  46. <td><input id="entry_Fee" name="entry_Fee" type="text" class="input" size="10"  /></td>
  47. </tr>
  48. <tr>
  49. <td height="23" style="font-weight: bold"><div align="left"><label for="name">name</label></div></td>
  50. <td><input id="name" name="name" type="text" class="input" size="10"  /></td>
  51. </tr>
  52. <input type="Submit" value="Submit!" >
  53. </body>
  54. </html>        


sql data file


Expand|Select|Wrap|Line Numbers
  1. - phpMyAdmin SQL Dump
  2. -- version 4.5.1
  3. -- http://www.phpmyadmin.net
  4. --
  5. -- Host: 127.0.0.1
  6. -- Generation Time: Dec 27, 2016 at 01:25 PM
  7. -- Server version: 10.1.16-MariaDB
  8. -- PHP Version: 7.0.9
  9.  
  10. SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
  11. SET time_zone = "+00:00";
  12.  
  13.  
  14. /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
  15. /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
  16. /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
  17. /*!40101 SET NAMES utf8mb4 */;
  18.  
  19. --
  20. -- Database: `register`
  21. --
  22.  
  23. -- --------------------------------------------------------
  24.  
  25.  
  26. CREATE TABLE `tblracedetails` (
  27.   `racesid` int(11) NOT NULL,
  28.   `racedate` date NOT NULL,
  29.   `racename` varchar(40) NOT NULL,
  30.   `distance` varchar(10) NOT NULL,
  31.   `entry_fee` int(10) NOT NULL,
  32.   `temp_fees` varchar(11) NOT NULL,
  33.   `other_fees` varchar(11) NOT NULL,
  34.   `t_shirt_fee` varchar(11) NOT NULL,
  35.   `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
  36. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  37.  
  38. --
  39. -- Dumping data for table `tblracedetails`
  40. --
  41.  
  42. INSERT INTO `tblracedetails` (`racesid`, `racedate`, `racename`, `distance`, `entry_fee`, `temp_fees`, `other_fees`, `t_shirt_fee`, `timestamp`) VALUES
  43. (2, '2016-10-05', 'test1', '20', 100, '', '', '', '2016-11-24 09:36:52'),
  44. (3, '2016-10-05', 'test1', '50', 150, '', '', '', '2016-11-24 09:37:00');
  45.  
  46. -- --------------------------------------------------------
  47.  
  48. ALTER TABLE `tblracedetails`
  49.   ADD PRIMARY KEY (`racesid`);
  50. entriesid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
  51. --
  52. -- AUTO_INCREMENT for table `tblracedetails`
  53. --
  54. ALTER TABLE `tblracedetails`
  55.   MODIFY `racesid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
  56. --
  57. -- AUTO_INCREMENT for table `tblracefees`
  58. --
  59.  
Attached Images
File Type: jpg dropdown populate.jpg (29.5 KB, 50 views)
Dec 27 '16 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.