droplist en automatisch invullen van velden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jeroen de vries

Jeroen de vries

25/02/2011 08:43:01
Quote Anchor link
Hallo,

Ik ben sinds een aantal weken actief bezig met PHP/mysql. Het gaat allemaal wel aardig, maar uit een ding kom ik niet uit.

Momenteel werk ik aan een inlog systeem voor een webpagina. Daar heb ik een admin pagina gemaakt waar een administrator gebruikers kan toevoegen en wijzigen. Het toevoegen van gebruikers gaat goed.
Nu haal ik via een mysql query de huidige gebruikers op, en stop deze in een drop list. Nu krijg ik het nog niet voor elkaar om dan automatisch, ofwel zonder page refresh alle velden die bij die user horen te laten zien.
Ik heb natuurlijk al gezocht op google, en begrijp hier min of meer uit dat ik dit met javascript zou moeten kunnen doen. Echter heb ik nog geen kennis van java.
Kan iemand mij een duwtje in de juiste richting geven, om dit toch voorelkaar te krijgen?
 
PHP hulp

PHP hulp

05/03/2021 19:40:10
 
Kris Peeters

Kris Peeters

25/02/2011 11:34:03
Quote Anchor link
index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
$db
= mysql_connect('localhost', 'root', '');
mysql_select_db('phphulp', $db);
// ajax request afhandelen
 if (!empty($_GET['ajax'])) {          
      $sql = "SELECT id, nick, message FROM shoutbox WHERE id=". (int) $_GET['id'] ." LIMIT 1 ";
      $res = mysql_query($sql);
      if ($row = mysql_fetch_assoc($res))  {
        // Dit echo je als Ajax request.  Hier mag je geen <html> / <body> ... echo'en (Wat bv. bij frames wel moet)
        echo '
        <input name="nick" value="'
. htmlspecialchars($row['nick']) .'" /> Nick Name<br/>
        <input name="message" value="'
. htmlspecialchars($row['message']) .'" /> Message<br/>
        '
;
      }  
}

elseif ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // post(s) behandelen.  Registreren / profiel aanpassen / ...
}
else {
  // formulier met select box
  $sql = "SELECT id, nick FROM shoutbox GROUP BY nick";
  $res = mysql_query($sql);
  $options ='<option value="0" selected="selected"/> --- SELCTEER GEBRUIKER --- </option>';
  while ($row = mysql_fetch_assoc($res))  {
    $options .= '<option value="'. $row['id'] .'">'. htmlspecialchars($row['nick']) .'</option>' . PHP_EOL;
  }

  $form = '
  <form>
    <select id="user_droplist">
    '
. $options .'
    </select>
    <div id="profile"></div>
  </form>
  '
;
  echo html($form);  
}

function
html($body) {
  return '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> droplist en automatisch invullen van velden </title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="js.js"></script>
  </head>
  <body>
  '
. $body .'
  </body>
</html>'
;
}

?>


js.js (in de zeldfe map als index.php)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    $('#user_droplist').change(function(e) { // wordt dus getriggerd wanneer een nieowe optie uit de select box wordt gekozen
        var selected_id = $(e.target).val();
        $.ajax({
            type: "GET",                            // POST of GET
            url: "index.php?ajax=1&id=" + Number(selected_id),                // URL waar Ajax naar zal surfen
            success: function(data) {                // callback.  Dit gebeurt wanneer het ajax request is uitgevoerd
                $('#profile').html(data);           // respons steken in de div met id="profile"
            }
        });
    })
});


Dit is een voorbeeld waarbij je de sql string zal moeten aanpassen naar jouw gegevens.

Wat moet je verder nog doen?
zoek en download jquery.js (Google is your friend) en zet die file ook in de zelfde map.
Uiteraard database connectie gegevens aanpassen

Zie een s of je er iets mee bent, of laat anders maar iets weten
Gewijzigd op 25/02/2011 12:11:57 door Kris Peeters
 
Mark L

Mark L

25/02/2011 12:07:17
Quote Anchor link
Als je bij een text-input 'value="waarde"' invult, zal in de browser standaard 'waarde' staan (in het inputveld).

Bij een selectbox is dit iets anders. Daar moet je bij de goede option 'selected="selected"' meegeven. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select3
 
Jeroen de vries

Jeroen de vries

25/02/2011 14:44:04
Quote Anchor link
dank je wel voor de reakties. Ik ga dit zeker proberen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.