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

cantrushmusic · July 13, 2019, 10:06am

TOPICS:

SUMMARY OF PROBLEM
BACKGROUND OF WHAT I TRIED
THE CODE
THE EXPECTED AND ACTUAL RESULTS

Using php, mysql, & javascript

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:

Choose an item from the dropdown list.
After choice, form fields will be populated by data stored to the corresponding row, the data is coming from mysql database.
The javascript is triggered by an “onchange” event based of choice from dropdown list.
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,

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>

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>

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.

Paul_Wilkins · July 13, 2019, 10:09pm

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.

cantrushmusic · July 16, 2019, 6:56am

Thanx Paul, I appreciate the response.

system · October 15, 2019, 4:19pm

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

Topic		Replies	Views
Help with auto populating a dropdown for form JavaScript	2	498	October 8, 2014
Autopopulating Select field using PHP and mySQL PHP	6	524	May 4, 2011
Auto Update Form As User Inputs Fields PHP	4	3396	October 8, 2014
Display other data based on dropdown selection JavaScript	22	219824	October 8, 2014
Auto complete fields if a user is found help JavaScript	4	570	May 25, 2010

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

Related topics