0

I am not experienced with AJAX and javascript and I am currently trying to create a dynamic dropdown list that should solve the following problem:

The user can select if the request is for 1 or 2 students from the dropdown list. If he selects nothing, the content should be displayed for only 1 student. If he selects 2 students the content for 2 students shall be displayed instead of the content for 1 student. Now the problem is that I know how to set up a dynamic dropdown list and how to call in the dynamic content but I don't know how do replace the content dynamically, meaning that there is currently no content displayed if the user doesn't select anything. I also tried to do it via a SESSION that is set in the user.php but I don't know how to set it via an AJAX request.

I am currently going with this for the page on which the dropdown and the content should be displayed:

<p>How many students? <br />
<select name="numberstudents" id="user-select">
<option value="1">1 student</option>
<option value="2">2 students</option>
</select>
</p>

// This is where the content from user.php should be displayed:

<div id="user-profile"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/global.js"></script>

The .js file which contains the AJAX:

$('#user-select').on('change', function() {
var self = $(this);

$.ajax({
    url: 'https://www.xxx.de/partials/user.php',
    type: 'GET',
    data: { numberstudents: self.val() },    
    success: function(data){
      $('#user-profile').html(data);
    }
});
});

And the user.php, which contains the content that should be displayed by the AJAX request on the page with the main form. It should ask per "if-request" if 1 or 2 students are selected and then show either one dropdown list or two dropdown lists if 2 students are selected. Problem is that it shows nothing if nothing is selected:

<?php
// Connection to the DB and get the input for the dropdown list(s)
$dsn = "xxx";
$user = "xxx";
$pw = "xxx";

try {
$pdo = new PDO($dsn, $user, $pw);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}

$classQuery = "SELECT class_id, class FROM classes";

$classes = $pdo->query($classQuery);
?>

// And the if-request if 1 student or 2 students are selected, thus showing either 1 or 2 dropdowns     

if ($_GET['numberstudents'] == "2") {
?>

<p>Which classes do the students visit?<br />

<select name="class1">
<option value="">Student 1 visits the..</option>
<?php foreach ($classes->fetchAll() as $class){ ?>
  <option value="<?php echo $class['class_id']; ?>"><?php echo $class['class']; ?></option>
<?php } ?>
</select><br />

<select name="class2" >
<option value="">Student 1 visits the..</option>
<?php foreach ($classes->fetchAll() as $class){ ?>
  <option value="<?php echo $class['class_id']; ?>"><?php echo $class['class']; ?></option>
<?php } ?>
</select>
</p>

<?php
}
else
{
?>
<p>Which class does the student visit?<br />
<select name="class1">
<option value="">Please select a class..</option>
<?php foreach ($classes->fetchAll() as $class): ?>
  <option value="<?php echo $class['class_id']; ?>"><?php echo     $class['class']; ?></option>
<?php endforeach; ?>
</select>
</p>
<?php
}
?>

Please excuse my mistakes, translated the code into english so it is more better understandable.

Franky2207
  • 163
  • 2
  • 19
  • I would only use php to return the data as an array and then build the select options in the success callback of the ajax request. May want to have a look at http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery – xkcd149 Dec 15 '15 at 18:47
  • Sorry I am really a newbie at javascript and AJAX, actually just got the snippets of code and tried to make sense of it.. I only need to differ between the displaying of either 1 or 2 dropdowns, I think in the link you provided it is about adding more select options to one dropdown, is that right? Sorry if I got that wrong. I am becoming quite desperate here.. – Franky2207 Dec 15 '15 at 18:54

0 Answers0