CODEWITHSUNDEEP
phpjavascripthtmlajaxdatabase
Amjad
Amjad

Reputation: 2100

Combobox onchange event to select database values

I have the following code 

<form class="form-horizontal" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" >
  <br /><div class="controls"><h1><?php echo $full_name; ?></h1></div><br />
  <?php echo printErrorMessage($errors); ?>
  <fieldset><legend>Add Subject for <u>"<?php echo $full_name; ?>"</u></legend></fieldset>

  <!-- select all courses -->
  <div class="control-group">
    <label class="control-label">Subject</label>
    <div class="controls inline">
      <select id="courses" class="input-xlarge" name="courses"  onchange="getSubj()">
        <option value="0">Courses</option>

          <?php
            $pstmt = Course::findAll();
            while($row = $pstmt->fetch(PDO::FETCH_ASSOC)){        
              echo '<option value="' . $row['id'] . '" >';
              echo $row['title'] . '</option>';
            }
          ?>


          <?php //echo displayCombo2(Course::findAll()); ?>
      </select>
    </div>
  </div>

<?php echo $couid; ?>

  <!-- select all subject -->
  <div class="control-group">
    <label class="control-label">Subject</label>
    <div class="controls inline">
      <input name="emp_id" value="<?php echo $employee_id; ?>" type="hidden" /> 
      <select class="input-xlarge" name="subject">
        <option value="0" onchange="">Subject</option>


          <?php
            $pstmt = Subject::findAll();
            while($row = $pstmt->fetch(PDO::FETCH_ASSOC)){        
              echo '<option value="' . $row['id'] . '" >';
              echo $row['title'] . '</option>';
            }
          ?>



          <?php //echo displayCombo2(Subject::findAll()); ?>
      </select>
    </div>
  </div>


  <div class="control-group">
    <label class="control-label">Description</label>
    <div class="controls">
      <input name="desc" class="input-xlarge" type="text" placeholder="Description">
    </div>
  </div>

  <div class="control-group">
    <div class="controls">
      <button type="submit" class="btn btn-primary" name="submit">Save Course</button>
    </div>
  </div>
</form>

The user will get to choose two items first from a combo-box which has all the courses. Once the user selects the the course I want to go back to database and select only those subjects which are linked to the selected course. I can do that through SQL but I am not sure how to do it here.

Do I have to submit back to server to process PHP? I mean, surround the select tab with form tag so it can submit to itself and get back new values that are associated with that subject. The problem is that this is already inside a form.

How can I accomplish this?

below is the jquery code i tried that as well to get data but it is hard to explain since that page process stuff on that particular page and return only echo back for instance

<script type="text/javascript">
  function getSubj(){
    var courseID = $('#courses').val();
    $.post('getSubjects.php', {postCourseID:courseID}, 
          function(data){
            if(data>="1"){
              $('#res').html(data);
            }
          });

    //alert("working wit ooooooo " + courseID);
  }
</script>

issues is how to store that value that is stored in "data" (function(data)) in PHP so i can execute stuff

thanks

Upvotes: 0

Views: 9021

Answers (1)

Wes Crow
Wes Crow

Reputation: 2967

Your suspicions are correct. In order to accomplish what you want you would have to create a separate form and have it submit to the PHP script. This is one of the traits of a server-side language like PHP. The data submission must be initiated by the user and the page must completely reload.

This can be seen as a limitation to you design, which is why many sites supplement their server-side script with client-side scripts like JavaScript. (jQuery is a popular JavaScript framework that makes using JavaScript easier) You can do this through a methodology called AJAX.

AJAX is basically a mix of different web technologies that allow the client to initiate a call to a server-side script by some action such as clicking a button or choosing a specific value from a select element. This call is made in the background so the user doesn't even have to know it's going on. Then the page can update in real-time via JavaScript with the returned server-side data.

What I prefer doing is using the .ajax() function supplied by the jQuery library. This is a pretty clean and painless implementation. Read the documentation in the link above for more specific information regarding the implementation.

Upvotes: 1

Related Questions