CODEWITHSUNDEEP
phpjavascripthtmljsfiddle
user1794342
user1794342

Reputation: 57

How to display data from drop down menu into text inputs

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;

    }

Upvotes: 0

Views: 312

Answers (3)

Priyank Patel
Priyank Patel

Reputation: 6996

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

Upvotes: 1

Abhilash
Abhilash

Reputation: 1610

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.

Upvotes: 1

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

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>

Upvotes: 1

Related Questions