Formulier uitbreiden

Status
Niet open voor verdere reacties.
S

Stinuz

Terugkerende gebruiker
Lid geworden
14 jun 2003
Berichten
1.245
Hoi, ik gebruik de volgende code voor een formulier:

submit.php
PHP: 
<?

include("config.php");

include("header.php");

?>

  <ul><form action="processsubmit.php" method="POST">

     Your (nick)name:<br><input type="text" name="name" /><br><br>
	Guide type:<br>
            <select name="type">
             <option value="battlegrounds">Battlegrounds</option>
             <option value="gold">Gold</option>
             <option value="leveling">Leveling Guide</option>
             <option value="professions">Professions</option>
             <option value="classes">Class-specific</option>
             <option value="other">Other</option>
            </select><br><br>

     Guidename:<br><input type="text" name="guidename" /><br><br>

     Content:<br><textarea name="content" cols="35" rows="6" id="content"></textarea /><br>
	<font color=blue>HTML code IS allowed for this field!</font><br><br>
     Note:<br><textarea name="note" cols="35" rows="6" id="note"></textarea /><br>
	<font color=blue>HTML code IS allowed for this field!</font><br><br>
	<font color=red>All fields are required!</font><br>
     <br />
     <input type="submit" value="Submit" name="submit" /><br /><br />
    </form></ul>

<? include("footer.php"); ?>

Nu wil ik graag dat zodra iemand bij de opties Class-specific kiest er nog een veld bijkomt, namelijk de volgende:
HTML: 
	Class:<br>
            <select name="class">
             <option value="druid">Druid</option>
             <option value="hunter">Hunter</option>
             <option value="mage">Mage</option>
             <option value="paladin">Paladin</option>
             <option value="priest">Priest</option>
             <option value="rogue">Rogue</option>
             <option value="shaman">Shaman</option>
             <option value="warlock">Warlock</option>
             <option value="warrior">Warrior</option>
            </select><br><br>

Hoe krijg ik dit voor elkaar? :thumb:
 
Zo:
PHP: 
<?

include("config.php");

include("header.php");

?>

<script type="text/javascript">
 function checkClass(type) {
  document.getElementById('class').style.display = (type == 'classes' ? '' : 'none');
  };
</script>

  <ul><form action="processsubmit.php" method="POST">

     Your (nick)name:<br><input type="text" name="name" /><br><br>
    Guide type:<br>
            <select name="type" onchange="checkClass(this.options[this.selectedIndex].value)">
             <option value="battlegrounds">Battlegrounds</option>
             <option value="gold">Gold</option>
             <option value="leveling">Leveling Guide</option>
             <option value="professions">Professions</option>
             <option value="classes">Class-specific</option>
             <option value="other">Other</option>
            </select>
     <br><br>

	<span id="class" style="display: none;">
       Class:<br>
            <select name="class">
             <option value="druid">Druid</option>
             <option value="hunter">Hunter</option>
             <option value="mage">Mage</option>
             <option value="paladin">Paladin</option>
             <option value="priest">Priest</option>
             <option value="rogue">Rogue</option>
             <option value="shaman">Shaman</option>
             <option value="warlock">Warlock</option>
             <option value="warrior">Warrior</option>
            </select>
       <br><br>
      </span>


     Guidename:<br><input type="text" name="guidename" /><br><br>

     Content:<br><textarea name="content" cols="35" rows="6" id="content"></textarea /><br>
    <font color=blue>HTML code IS allowed for this field!</font><br><br>
     Note:<br><textarea name="note" cols="35" rows="6" id="note"></textarea /><br>
    <font color=blue>HTML code IS allowed for this field!</font><br><br>
    <font color=red>All fields are required!</font><br>
     <br />
     <input type="submit" value="Submit" name="submit" /><br /><br />
    </form></ul>

<? include("footer.php"); ?>
:)


Vr.Gr. Egel.
 
Al een oud topic maar ik heb er nog een vraag over, hoe kan ik zorgen dat deze op meerdere velden actief wordt? Dat als ik dus ''classes'' selecteer dit wordt weergegeven:

HTML: 
    <span id="class" style="display: none;">
       Class:<br>
            <select name="class">
             <option value="druid">Druid</option>
             <option value="hunter">Hunter</option>
             <option value="mage">Mage</option>
             <option value="paladin">Paladin</option>
             <option value="priest">Priest</option>
             <option value="rogue">Rogue</option>
             <option value="shaman">Shaman</option>
             <option value="warlock">Warlock</option>
             <option value="warrior">Warrior</option>
            </select>
       <br><br>
      </span>

Maar als ik ''leveling'' selecteer dit:

HTML: 
    <span id="leveling" style="display: none;">
       Leveling:<br>
            <select name="Level">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
            </select>
       <br><br>
      </span>
 
Niemand die weet hoe ik dit voor elkaar krijg?
 
Zo: :)
PHP: 
<?

include("config.php");

include("header.php");

?>

<script type="text/javascript">
 function checkClass(type) {
  document.getElementById('class').style.display = (type == 'classes' ? '' : 'none');
  document.getElementById('leveling').style.display = (type == 'leveling' ? '' : 'none');
  };
</script>

  <ul><form action="processsubmit.php" method="POST">

     Your (nick)name:<br><input type="text" name="name" /><br><br>

<table cellspacing="0" cellpadding="0"><tr><td>

    Guide type:<br>
            <select name="type" onchange="checkClass(this.options[this.selectedIndex].value)">
             <option value="battlegrounds">Battlegrounds</option>
             <option value="gold">Gold</option>
             <option value="leveling">Leveling Guide</option>
             <option value="professions">Professions</option>
             <option value="classes">Class-specific</option>
             <option value="other">Other</option>
            </select>

</td><td>

	<span id="class" style="display: none;">
       Class:<br>
            <select name="class">
             <option value="druid">Druid</option>
             <option value="hunter">Hunter</option>
             <option value="mage">Mage</option>
             <option value="paladin">Paladin</option>
             <option value="priest">Priest</option>
             <option value="rogue">Rogue</option>
             <option value="shaman">Shaman</option>
             <option value="warlock">Warlock</option>
             <option value="warrior">Warrior</option>
            </select>
      </span>

    <span id="leveling" style="display: none;">
       Leveling:<br>
            <select name="Level">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
            </select>
      </span>

</td></tr></table>
<br>

     Guidename:<br><input type="text" name="guidename" /><br><br>

     Content:<br><textarea name="content" cols="35" rows="6" id="content"></textarea /><br>
    <font color=blue>HTML code IS allowed for this field!</font><br><br>
     Note:<br><textarea name="note" cols="35" rows="6" id="note"></textarea /><br>
    <font color=blue>HTML code IS allowed for this field!</font><br><br>
    <font color=red>All fields are required!</font><br>
     <br />
     <input type="submit" value="Submit" name="submit" /><br /><br />
    </form></ul>

<? include("footer.php"); ?>
De functie checkClass() is één regel uitgebreid om ook de <span id="leveling" ...> aan en uit te zetten en met een tabel voor de opmaak blijft het formulier nu 'stilstaan'. :)


Vr.Gr. Egel.
 
Sorry voor de late reactie, maar het ziet er naar uit dat dat gaat werken. Bedankt hiervoor. Weet je toevallig ook hoe ik met één keuze beide velden kan weergeven?

Als ik dus bijvoorbeeld een optie ''both'' toevoeg dat hij dan zowel ''classes'' als ''leveling'' weergeeft? :thumb:
 
Ja hoor:
PHP: 
<?

include("config.php");

include("header.php");

?>

<script type="text/javascript">
 function checkClass(type) {
  document.getElementById('class').style.display = (/classes/.test(type) ? '' : 'none');
  document.getElementById('leveling').style.display = (/leveling/.test(type) ? '' : 'none');
  };
</script>

  <ul><form action="processsubmit.php" method="POST">

     Your (nick)name:<br><input type="text" name="name" /><br><br>

<table cellspacing="0" cellpadding="0"><tr><td>

    Guide type:<br>
            <select name="type" onchange="checkClass(this.options[this.selectedIndex].value)">
             <option value="battlegrounds">Battlegrounds</option>
             <option value="gold">Gold</option>
             <option value="leveling">Leveling Guide</option>
             <option value="professions">Professions</option>
             <option value="classes">Class-specific</option>
             <option value="other">Other</option>
             <option value="leveling,classes">Leveling / Class</option>
            </select>

</td><td>

	<span id="class" style="display: none;">
       Class:<br>
            <select name="class">
             <option value="druid">Druid</option>
             <option value="hunter">Hunter</option>
             <option value="mage">Mage</option>
             <option value="paladin">Paladin</option>
             <option value="priest">Priest</option>
             <option value="rogue">Rogue</option>
             <option value="shaman">Shaman</option>
             <option value="warlock">Warlock</option>
             <option value="warrior">Warrior</option>
            </select>
      </span>

</td><td>

    <span id="leveling" style="display: none;">
       Leveling:<br>
            <select name="Level">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
            </select>
      </span>

</td></tr></table>
<br>

     Guidename:<br><input type="text" name="guidename" /><br><br>

     Content:<br><textarea name="content" cols="35" rows="6" id="content"></textarea /><br>
    <font color=blue>HTML code IS allowed for this field!</font><br><br>
     Note:<br><textarea name="note" cols="35" rows="6" id="note"></textarea /><br>
    <font color=blue>HTML code IS allowed for this field!</font><br><br>
    <font color=red>All fields are required!</font><br>
     <br />
     <input type="submit" value="Submit" name="submit" /><br /><br />
    </form></ul>

<? include("footer.php"); ?>
/classes/.test(type) kijkt of 'classes' voorkomt in de value van de option, (/leveling/.test(type) doet hetzelfde maar dan met 'leveling'. Als ze beide voorkomen, zoals met option value="leveling,classes" worden ze ook beide weergegeven. :)

De beide span's staan nu wel in een eigen td voor de opmaak.


Vr.Gr. Egel.
 
Hmm, probleem is dat de option value niet veranderd moet worden. Waarom? Omdat die value mee wordt genomen naar een MYSQL tabel in een php script. Werkt dus prima voor HTML maar niet voor mijn doeleinden. Toevallig nog een andere manier? :thumb:
 
Vele andere manieren! ;) Zo bijv.:
PHP: 
 function checkClass(type) {
  document.getElementById('class').style.display = (/^(classes|both)$/.test(type) ? '' : 'none');
  document.getElementById('leveling').style.display = (/^(leveling|both)$/.test(type) ? '' : 'none');
  };
(classes|both) zijn de waarden (gescheiden door |) waarbij de span wordt weergegeven. Dat is makkelijk aan te passen / uit te breiden. :) Of zo kan ook:
PHP: 
document.getElementById('class').style.display = (type == 'classes' || type == 'both' ? '' : 'none');


Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan