[JavaScript] +[JQUERY] Verkettete Auswahlliste, neues Prob.

Dieses Thema im Forum "Webentwicklung" wurde erstellt von SoulOfRussia, 7. Juni 2011 .

Schlagworte:
  1. 7. Juni 2011
    +[JQUERY] Verkettete Auswahlliste, neues Prob.

    Hallo Leute,

    bevor ich euch wiedereinmal mit meinen Webentwicklungsfragen nerve, erstmal ein groooßess Dankeschön an all die, die mir die male davor geholfen haben

    Nun folgendes "Problem":

    HTML:
    <td width="300">Farbe: <br />
 <select name="farbe" size="1" value="<?PHP echo $_POST['farbe']; ?>" id="eingabe" class="farbe">
 <option value="<?php echo $farbe; ?>" class="<?php echo $farbe; ?>"><?php echo $farbe; ?></option>
 <option value="schwarz" >--------</option> 
</select>
 <script>
 function displayVals() {
 var colorValue = $(".folie").val();
 if ( colorValue == "normal"){ 
 $(document).ready(function(){
 $('.farbe').load('farben_normal.php'); 
 }); 
 }
 if ( colorValue == "metallic"){
 $(document).ready(function(){
 $('.farbe').load('farben_metallic.php'); 
 }); 
 } 
 if ( colorValue == "carbon"){
 $(document).ready(function(){
 $('.farbe').load('farben_carbon.php'); 
 }); }
 }

 $("select").change(displayVals);
 displayVals();
 
</script>
    Jetzt:
    Ich wähle mit einem <select><option> eine Folienart aus (hier, normal, metallic, carbon).
    Die Liste mit den Farben (farben_normal.php etc.) wird richtig in die <select> für die Farbauswahl geladen.

    Wenn ich nun aber eine andere Farbe auswählen möchte, lädt Js die Liste aus irgendeinem, mir nicht ersichtlichen, Grund neu, sodass es wieder auf den ersten Wert springt (z.b. weiß)


    Möchte:
    Man wählt eine Folienart aus, dazu wird die Liste der verfügbaren Farben geladen.
    Man wählt eine Farbe aus, und diese Farbe wird mit $_POST['farbe'] übergeben.

    hier nochmal die farben_normal.php (ich weiß, sollte lieber .html heißen, aber das is jetzt egal ) als Beispiel:
    HTML:
     <option value="weiss" class="weiss">wei&szlig;</option>
 ... 
 <option value="dunkelblau" class="dunkelblau">dunkelblau</option>
    Danke im Vorraus
    Soul


    ______


    Ok.... Da waren wohl meine Finger schneller als mein Auge...

    $("select")... in $(".folie") geändert, nun gehts xD

    Sorry für den unnötigen Thread xD
    Könnte eventuell für jemand anders nützlich sein

    __________________
    Anderes Problem:

    Der Code sieht jetzt so aus:
    <select name="farbe" size="1" value="<?PHP echo $_POST['farbe']; ?>" id="eingabe" class="farbe">
    <option value="<?php echo $farbe; ?>" class="<?php echo $farbe; ?>"><?php echo $farbe; ?></option>

    </select>

    <script>
    function displayVals() {
    var colorValue = $(".folie").val();
    if (colorValue == "normal"){
    $('.farbe').load('farben_normal.php');
    }
    if (colorValue == "metallic"){
    $('.farbe').load('farben_metallic.php');
    }
    if (colorValue == "carbon"){
    $('.farbe').load('farben_carbon.php');
    }
    }

    $(".folie").change(displayVals);
    displayVals();

    </script>

    wenn man nun eine Folienart auswählt, wird zwar alles richtig geladen, aber wenn man Submittet wird die Zeile
    "<option value="<?php echo $farbe; ?>" class="<?php echo $farbe; ?>"><?php echo $farbe; ?></option>"
    gelöscht und mit der neuen Liste ersetzt...
    gibt es eine Möglichkeit, dass Js diese Zeile nicht weghaut, sondern immer nur die Listen neu lädt?
     
    + Multi-Zitat Zitieren
  3. 7. Juni 2011
    AW: +[JQUERY] Verkettete Auswahlliste, neues Prob.

    Du kannst das option-Element einfach vorher klonen (jQuery / DOM) und diesen Klon am Ende der displayVals-Funktion wieder in das select-Element einfügen (jQuery / DOM). Oder du erstellst das option-Element einfach jedes Mal am Ende der Funktion neu.



    Das select-Element solltest du lieber mit einer ID ansprechen, statt mit einer Klasse, da du es ja eindeeutig identifizieren willst.



    PHP:
    <? PHP  echo   $_POST [ 'farbe' ];  ?>
    Sowas ist ungefiltert anfällig für XSS!
     
    + Multi-Zitat Zitieren
  4. 8. Juni 2011
    AW: +[JQUERY] Verkettete Auswahlliste, neues Prob.

    hab kein plan wie du das meinst!?!?! :/

    so ca.?

    <script>

    function displayVals() {
    var colorValue = $("#folie").val();
    if (colorValue == "normal"){
    $('#farbe').load('farben_normal.php');
    }
    if (colorValue == "metallic"){
    $('#farbe').load('farben_metallic.php');
    }
    if (colorValue == "carbon"){
    $('#farbe').load('farben_carbon.php');
    }

    }

    $("#folie").change(displayVals);
    displayVals();
    $('#farbe').prepend('<option value="<?php echo $farbe; ?>" class="<?php echo $farbe; ?>"><?php echo $farbe; ?></option> ');

    </script>

    Der fügt das <option.....</option> nicht in die <select>...
    mache ich es in einem <p id="farbe_p"> </p> dann funktioniert es -.-


    am besten wäre es, wenn ich über load() zuätzlich die $farbe übergeben lasse...
    AJAX?
     
    + Multi-Zitat Zitieren
  5. 8. Juni 2011
    AW: +[JQUERY] Verkettete Auswahlliste, neues Prob.

    Hab ich mal schnell erstellt so sollte das normale submit event abgefangen werden und in das div gepostet werden ohne das die ganze seite neu geladen wird


    HTML:
     //On Submitting
 $("#FORM-ID").submit(function(e){ /* catch the form's submit event */
 e.preventDefault(); /* stop the standart submit event from the browser */
 $.ajax({ /* create an AJAX call */
 data: $(this).serialize(), /* get the form data */
 type: $(this).attr("method"), /* GET or POST */
 url: $(this).attr("action"), /* the file to call */
 success: function(response) { /* on success.. */
 $("#result").html(response); /* write response into div "result" */
 return;
 }
 });
 return false; /* cancel original event to prevent form submitting */
 });

    "$("#result").html(response);" kannst du ja jetzt ersetzen mit dem was du auch immer mit dem submit machen willst ^^
     
    + Multi-Zitat Zitieren
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten