How to display data from drop down menu into text inputs

Question

I am having trouble displaying the SessionName, SessionDate and SessionTime in their respective text inputs.

What should happen is that the user is suppose to select a Session (Assessment) from the drop down menu. Now when they submit the drop down menu, the details of the Session which are SessionName, SessionDate and SessionTime, should be displayed in their text inputs. But they are not being displayed in their text inputs, the text inputs remain empty.

How can I get the SessionName, SessionTime and SessionDate to be displayed in their respective text inputs?

Here is a jsfiddle which contains dummy data and relevant features to show what the application should look like:

Here is my code:

$sessionquery = "
SELECT SessionId, SessionName, SessionDate, SessionTime, ModuleId
FROM Session
WHERE
(ModuleId = ?)
ORDER BY SessionDate, SessionTime 
";

$sessionqrystmt=$mysqli->prepare($sessionquery);
// You only need to call bind_param once
$sessionqrystmt->bind_param("s",$_POST['modules']);
// get result and assign variables (prefix with db)

$sessionqrystmt->execute(); 

$sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbModuleId);

$sessionqrystmt->store_result();

$sessionnum = $sessionqrystmt->num_rows();   

if($sessionnum ==0){
echo "<p>Sorry, You have No Assessments under this Module</p>";
} else { 

$sessionHTML = '<select name="session" id="sessionsDrop">'.PHP_EOL;
$sessionHTML .= '<option value="">Please Select</option>'.PHP_EOL;           

while ( $sessionqrystmt->fetch() ) {
    $sessionHTML .= sprintf("<option value='%s'>%s - %s - %s</option>", $dbSessionId, $dbSessionName, $dbSessionDate, $dbSessionTime) . PHP_EOL;  
}

$sessionHTML .= '</select>';

$assessmentform = "<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post' onsubmit='return sessionvalidation();'>
<p>Assessments: {$sessionHTML} </p>
<p><input id='sessionSubmit' type='submit' value='Submit Assessment' name='sessionSubmit' /></p>  
<div id='sessionAlert'></div>    
</form>";

echo $assessmentform;

}

}

 if (isset($_POST['sessionSubmit'])) {

$currentsession = "<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post'>
<p>Current Assessment's Date/Start Time:</p>
<p>Assessment: <input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly' value='{$dbSessionName}'/> </p>
<p>Date: <input type='text' id='currentDate' name='Datecurrent' readonly='readonly' value='{$dbSessionDate}'/> </p>
<p>Start Time: <input type='text' id='currentTime' name='Timecurrent' readonly='readonly' value='{$dbSessionTime}'/> </p>
<input type='hidden' id='hiddenId' name='hiddenAssessment' value='{$dbSessionId}'/>
</form>
";  

echo $currentsession;

    }

Since you have tagged `javascript` also, should the values come into the inputs client-side or do you plan to submit the form each time a `change` event occurs in the select? Also, what freebird said. — Abhilash, Nov 07 '12 at 05:21

score 1 · Answer 1 · answered Nov 07 '12 at 05:31

try this

DEMO

function fillData(){
var sel = document.getElementById('sessions').options[document.getElementById('sessions').selectedIndex].text;
var arr = sel.split(" - ");
 if(document.getElementById('sessions').value != ''){
    document.getElementById('currentAssessment').value = arr[0];
    document.getElementById('currentDate').value = arr[1];
    document.getElementById('currentTime').value = arr[2];                     
 } else {
    alert('please select option');
 }
}

<p><input id='sessionSubmit' type='submit' value='Submit Assessment' name='sessionSubmit' onclick='fillData();' /></p>

Great answer. It works well. Only reason I am giving Abhilash the best answer is because he got it working with.onchange() which is something I did not think of to be honest and something I liked. So I am giving you upvote for your answer :) — user1794342, Nov 07 '12 at 13:28

Priyank Patel · Answer 2 · 2012-11-07T05:49:14.667

1

function SessionSplit()
{
 str=$("#sessions option:selected").text();
 substr=str.split(' - ');
 sessionname=substr[0];
 sessiondate=substr[1];
 sessiontime=substr[2];

}

$('#sessionSubmit').click(function(){

$('#currentAssessment').val(sessionname);
    $('#currentDate').val(sessiondate);
    $('#currentTime').val(sessiontime);

});

See Demo

edited Nov 07 '12 at 05:49

answered Nov 07 '12 at 05:37

Priyank Patel

6,898
11
58
88

Great answer. It works well. Only reason I am giving Abhilash the best answer is because he got it working with .onchange() which is something I did not think of to be honest but something I liked. So I am giving you upvote for your answer :) – user1794342 Nov 07 '12 at 13:30

score 1 · Accepted Answer · answered Nov 07 '12 at 05:40

If jQuery is an option (and you might feel at some point that the button is not needed), here's another option

$(document).ready( function(){
    $('#sessions').change( function(){
        if( $(this).val() !== '' ){
            var text = $(this).find('option:selected').text();
            var split = text.split(' - ');
            $('#currentAssessment').val( split[0] );     
            $('#currentDate').val( split[1] );     
            $('#currentTime').val( split[2] );     
        }
        else{
            $('#currentAssessment,#currentDate,#currentTime').val('');                  
        }
    });
});

It works on .change() event of the select I have edited your fiddle to display it.

Great answer, I like the onchange method, it gets things done much quicker than the user always clicking on the submit button to choose a session. For this reason I am giving you best answer — user1794342, Nov 07 '12 at 13:27

How to display data from drop down menu into text inputs

3 Answers3