Need help to Auto-Populate form fields, triggered with onchange event

TOPICS:

  1. SUMMARY OF PROBLEM
  2. BACKGROUND OF WHAT I TRIED
  3. THE CODE
  4. THE EXPECTED AND ACTUAL RESULTS

Using php, mysql, & javascript



  1. SUMMARY OF PROBLEM

Hi all,

I am new to coding using javascript and do not really know how to go about applying it to my project, this are the following I would like to achieve.


Goal of project:


  1. Choose an item from the dropdown list.

  2. After choice, form fields will be populated by data stored to the corresponding row, the data is coming from mysql database.

  3. The javascript is triggered by an “onchange” event based of choice from dropdown list.

  4. Prefer to use javascript as there is no need for me to create another file and all code is in one page.

For example:

Eventname from dropdown list is choosen and it populates fields the correspond to the form such as eventdate, venuename.


Problem:


In my code below you will see that I have used javascript, although I can get it to work it is showing me the wrong data, meaning when I choose eventname from dropdown list I can only display the eventname not the eventdate or venuename.

NOTE:

  • MySQL database is called “isdb”

** Table is called “event”

*** Fields on the “event” table

id, eventname, event, date,



  1. BACKGROUND OF WHAT I TRIED

I tried this js which works although I can only show one choice


JavaScript


<script>
	

function eventFunction(eventname){
	document.getElementById("eventdate").value=eventname.options[eventname.selectedIndex].text
}
</script>	


  1. THE CODE




<?php
try{
	require_once('../../Connections/isdbpdoconnection.php'); 

	$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(Exception $e){
	$error = $e->getMessage();
}


/*



	Special section DROPDOWN MENU for Event - GET data from one table, display it, and store it in another



*/
	 $result  = $db->query('SELECT id, eventname, eventdate, venuename FROM event order by eventname');
	 $event = $result->fetchAll();









 if(isset($_POST) & !empty($_POST)){
	 
	 
	 
	 
	$sql = "INSERT INTO rider_booking (eventname, eventdate, venuename) 
	
	
	
	
	VALUES
	
	
	
	(:eventname, :eventdate, :venuename)";
	 
	 
	 
	 
	 
	 
	 
	 
	 
	$result = $db->prepare($sql);
	$res = $result->execute(array(  ':eventname' 		=> $_POST['eventname'],
								  	':eventdate' 		=> $_POST['eventdate'],
								  	':venuename' 		=> $_POST['venuename']
								  
									));
	 
	 
	 
	 
	 
	 
	 if($res){
	 	echo "Successfully inserted data";
	 }else{
	 	echo "failed to insert data";
	 }
}
?>


<!-- SECURED WITH PASSWORD -->
<?php
// Initialize the session
session_start();
 
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}
?>







<!DOCTYPE html>
<html>
<head>
	<title>CREATE NEW CLIENT RECORD</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

	
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>		
	<!-- Latest compiled and minified JavaScript -->

	<!-- Include Date Range Picker -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>	
	
	
	
	<style>

	body
	
	{
		
		
		background-color: rgb(51, 122, 183);
	}
	iframe{
		
		
		background-color: rgb(51, 122, 183);
	}
	span{
		
		background-color: rgb(51, 122, 183);
	}
</style>		
	
		<script>
	$(document).ready(function(){
		var date_input=$('input[name="eventdate"]'); //our date input has the name "date"
		var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
		date_input.datepicker({
			format: 'dd/mm/yyyy',
			container: container,
			todayHighlight: true,
			autoclose: true,
		})
	})
	</script>	

	
	
	
	
	
	
	
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>
	
	
	
	
</head>
<body>

	
	
	
	
<div class="container"><div class="col-xl-12 text-xl-center text-white"><form method="post">
			
			
			
			<h3 align="center">EVENT INFORMATION</h3><br>
			
<hr>
	Problem Area
			
			
            <div class="row">
				
				
                <div class="col-md-2"><label for="Event Name" class="control-label">Event Name</label></div>
				
				
				
				
                <div class="col-sm-4"><select name="eventname" id="eventname" type="text" class="form-control" class="form-control" data-toggle="tooltip" data-placement="right" title="Event Name" onchange="eventFunction(eventname)">
				<option selected="selected"></option>
			    <?php foreach ($event as $event) { ?>
                <option value="<?php echo $event['eventname'] ?>"><?php echo $event['eventname'] ?></option>  
			    <?php } ?>
			    </select></div>					
				
				
				
				
				
				
				
				
				
				
				
				
                <div class="col-md-2"><label class="control-label requiredField" for="date">Date<span class="asteriskField">*</span></label></div>
				
				
                <div class="col-md-4"><div class="input-group"><div class="input-group-addon"><i class="fa fa-calendar"></i></div><input class="form-control" id="eventdate" name="eventdate" type="text" data-toggle="tooltip" data-placement="right" title="Event Date" /></div></div>
				
			</div>	
	
	
	
	
	
	
<!-- Need Help on this Section -->	

	
<script>
	
	
function eventFunction(eventname){
	document.getElementById("eventdate").value=eventname.options[eventname.selectedIndex].text
}
</script>		
	
	
	
	
	
				
<br>	<div class="w-100">  </div>						
				
		
		            <div class="row">
				

		
		
				
			    
				
				
                <div class="col-md-2"><label for="Venue Name" class="control-label">Venue Name</label></div>
				
				
                <div class="col-md-4"><input type="text" name="venuename"  class="form-control" id="venuename" data-toggle="tooltip" data-placement="right" title="Venue Name" /></div>
				
							
				
					
			

							
			
		
	</div>
		

			
				

<br>	<div class="w-100">  </div>			

	
		
		
		
		
	<div class="btn-toolbar" align="center">
		  <input align="middle"type="submit" class="btn btn-success btn-md col-md-12" role="group" value="SUBMIT EVENT INFORMATION" />
				</div>	
		

		
<div class="w-100">  </div>	

		
				
				
      </form></div></div>
    	
	
	
	
<div class="w-100">  </div>		
	
		

	
</body>
</html>




  1. THE EXPECTED AND ACTUAL RESULTS

With the above code, when I choose from dropdown list all I get back is the same info such as the “eventname” on the “eventdate” field.

What I require is that after the choice is made on the “eventname” dropdown list it populates “eventdate” input field and “venuename” input field.

Hope you can assist me, thanx in advance.

1 Like

PHP runs and adds some event names to the dropdown list of options, but no other information about the events seem to be used.

After PHP sends the HTML page to the web browser, the browser runs the page and doesn’t have access to the PHP database or the information contained therein.

Where you go from here is to either load all of the information from the database so that the script can pick and choose values from there when needed, or to make a separate Ajax request to the server for further information about a specific event.

1 Like

Thanx Paul, I appreciate the response.