Achot: <select> dynamisch aktualisieren nach PHP Insert

0 37

<select> dynamisch aktualisieren nach PHP Insert

Achot
  • php
  1. 0
    Regina Schaukrug
    • javascript
    • php
    1. 0
      Achot
      1. 0
        Regina Schaukrug
        1. 0
          Achot
          • mathematik
          • php
          1. 0

            success: function(msg)

            Achot
            • jquery
            • php
            1. 0
              Regina Schlauklug
              • mathematik
              • php
              1. 0
                Achot
                1. 0
                  Regina Schaukrug
                  • javascript
                  • php
                  • programmiertechnik
          2. 0
            Regina Schlauklug
            1. 0
              Achot
            2. 0
              Gunnar Bittersmann
              • html
              • javascript
  2. 0

    Coding style

    Gunnar Bittersmann
    1. 0
      Achot
      1. 0
        Matthias Apsel
        • javascript
        • php
        1. 0
          Christian Kruse
          1. 0
            Gunnar Bittersmann
            • mathematik
            • php
            1. 1
              dedlfix
              1. 0
                Gunnar Bittersmann
                1. 0
                  dedlfix
                  1. 0
                    Christian Kruse
                    1. 0
                      beatovich
                      1. 0
                        Christian Kruse
                        • humor
                  2. 0
                    Gunnar Bittersmann
                    1. 0
                      Christian Kruse
      2. 0
        beatovich
        1. 0
          Gunnar Bittersmann
          • javascript
          • php
  3. 0

    Fertiger Code: <select> dynamisch aktualisieren nach PHP Insert

    Achot
    1. 0
      Matthias Apsel
      1. 0
        Achot
        1. 0
          Gunnar Bittersmann
          • css
          • html
      2. 0
        beatovich
        1. 0
          Gunnar Bittersmann
          • html
    2. 0
      Gunnar Bittersmann
      • css
      • html
      1. 0
        Achot
        • javascript
        • php
        • programmiertechnik
      2. 0
        Gunnar Bittersmann
        • markdown
        • zu diesem forum
        1. 0
          Matthias Apsel

Hallo,

ich komme an einer Stelle einfach nicht weiter. Folgende Ausgangssituation

   <form form method="post" action="">
	<label for="titel">Ansprechpartner</label>
	<select name="ansprechpartner" id="ansprechpartner">
	<?php 
          $frontend_ansprechpartner = ansprechpartner($mysqli);
          foreach($frontend_ansprechpartner as $array){ 
	?>
	<option value="<?php echo htmlspecialchars($array['id']); ?>">
                  <?php echo htmlspecialchars($array['name']); ?>
        </option>
	<?php } ?>
	</select>

	<a href="">Neuen Ansprechpartner hinzufügen</a>

	<label for="bezeichnung">Bezeichnung</label>
	<input type="text" 
               name="bezeichnung" 
               id="bezeichnung" 
               value="<?php echo htmlspecialchars($bezeichnung)?>">

	<input type="submit" 
               name="abschicken" 
               value="<?php echo htmlspecialchars($BTN) ?>">
  </form>

Wenn ich jetzt auf den Link Ansprechpartner hinzufügen klicke, soll ein neues Fenster / Layer aufgehen mit folgendem Formular:

<div class="neues_fenster">
  <form form method="post" action="">
		
    <label for="ansprechpartner_anrede">Anrede</label>
    <input type="text" 
           name="ansprechpartner_anrede" 
           id="ansprechpartner_anrede">

    <label for="ansprechpartner_name">Name</label>
    <input type="text" 
           name="ansprechpartner_name" 
           id="ansprechpartner_name">

    <label for="ansprechpartner_telefon">Telefon</label>
    <input type="text" 
           name="ansprechpartner_telefon" 
           id="ansprechpartner_telefon">

    <label for="ansprechpartner_email">E-Mail</label>
    <input type="email" 
           name="ansprechpartner_email" 
           id="ansprechpartner_email">

    <input type="submit" 
           name="abschicken_ansprechpartner" 
           value="<?php echo htmlspecialchars($BTN_Fenster) ?>">
</form>
</div>

Das Fenster könnte ich so http://codepen.io/wolf-w/pen/jbEdBW umsetzten.

Die Frage ist nun, wenn ich im Fenster auf Abschicken klicke, soll sich nach dem Insert das <select> aktualisieren und das Fenster sich schließen und im <select> soll der neue Wert ausgewählt sein. Wie würdet ihr vorgehen?

  1. Die Frage ist nun, wenn ich im Fenster auf Abschicken klicke, soll sich nach dem Insert das <select> aktualisieren und das Fenster sich schließen und im <select> soll der neue Wert ausgewählt sein. Wie würdet ihr vorgehen?

    Bestehen Bedenken dagegen, mit Javascript die neue Option in den <select> einfügen und, ebenfalls mit Javascript, auswählen?

    1. Hallo,

      Bedenken bestehen eigentlich nicht, wenn kein JS aktiviert ist, dann hat man eben Pech, dieses nehme ich in diesem Fall gerne in Kauf.

      1. Eine Option ist auch nur ein HTML-Element.

        1. Anhängen
        2. Auswählen
        1. Hallo,

          ich habe meinen Insert geschafft:

          $(document).ready(function(){
          
          	$(".various").fancybox({
          				
          		maxWidth	: 800,
          		maxHeight	: 600,
          		fitToView	: false,
          		width		: '70%',
          		height		: '70%',
          		autoSize	: false,
          		closeClick	: false,
          		openEffect	: 'none',
          		closeEffect	: 'none'
          	});
          
          	$( "#test" ).submit(function( event ) {
          
          			event.preventDefault();
          
          			var send = $("#test").serialize();
          
          			$.ajax({
          				
          				type: 	  "POST",
          				url:  	  "insert.php",
          				data:     send,
          				
          				success:  function(msg) {
          					
          				}
          			
          			});
          
          	});
          
          });
          

          Das HTML sieht so aus

          <div id="inline" style="display:none; width:500px;">
          
          <div id="response"></div>
          
          	<form form method="post" action="" id="test">
          				
          		<label for="ansprechpartner_anrede">Anrede</label>
          		<input type="text" name="ansprechpartner_anrede" id="ansprechpartner_anrede" value="">
          
          		<label for="ansprechpartner_name">Name</label>
          		<input type="text" name="ansprechpartner_name" id="ansprechpartner_name" value="">
          
          		<label for="ansprechpartner_telefon">Telefon</label>
          		<input type="text" name="ansprechpartner_telefon" id="ansprechpartner_telefon" value="">
          
          		<label for="ansprechpartner_email">E-Mail</label>
          		<input type="email" name="ansprechpartner_email" id="ansprechpartner_email" value="" >
          
          		<button type="submit" id="eintragen">Save</button>
          	</form>
          
          </div>
          

          Klappt soweit auch. Jetzt möchte ich gerne das Fenster ausblenden und das <select> soll erweitert werden, dieses müsste ich irgendwie mit https://api.jquery.com/event.preventdefault/ Ich habe allerdings keine Ahnung, wie ich das umsetzten soll. Ausgewählt sollte dieses auch direkt sein.

          Edit: Meine Idee war folgende

          success:  function(msg) {
          
          var element = document.getElementById('ansprechpartner');
          var newLI = document.createElement('option');
          var newLIText = document.createTextNode('Das ist Listeneintrag Nummer');
          document.getElementById('ansprechpartner').appendChild(newLI);
          
          }
          
          Ich sehe zwar einen leeren Eintrag, nicht wirklich was ich möchte.
          
          1. Ok, ich kann so weitere Felder ana meine Liste anhängen

            success:  function(msg) {
              $("#ansprechpartner option:last").after($('<option value="25" selected>my option</option>'));					
            }
            

            Die Frage ist jetzt, wie bekomme ich Werte von meiner

            type: 	  "POST",
            url:  	  "insert.php",
            data:     send
            

            zurück, dass ich diese dynamisch einfügen kann?

            1. Die Frage ist jetzt, wie bekomme ich Werte von meiner (Ajax-Anfrage via JQuery) zurück, dass ich diese dynamisch einfügen kann?

              Google nach JQuery, Ajax, Response. Da wirst Du alles finden. Vermeide die Filmchen von irgendwelchen YouTubern, suche möglichst in der JQuery-Dokumentation selbst und beachte UNBEDINGT den Kontextwechsel.

              1. Da kommt leider nichts, was ich benötige.

                EDIT:

                so kann ich einen Wert einfügen:

                success:  function(data) {
                $("#ansprechpartner option:last").after($('<option value="'+ data +'" selected>my option</option>'));				
                }
                

                Nur wie kann ich den zweiten Wert einfügen?

                1. Nur wie kann ich den zweiten Wert einfügen?

                  Das ist seit ein paar Jahren überraschend einfach.

                  Pack mit PHP die Daten vor dem Senden in einen Hash (Array mit benamten Elementen), mache aus dem Hash mit json_encode( $hash ); einen String, sende den zurück.

                  Der String steht dann wohl in data. Mit o = JSON.parse( data ); und alert( o.foo ); und alert( o.bar ); wirst Du sehen, dass die Elemente des PHP-Arrays jetzt gleichnamige Eigenschaften des Javascript-Objekts sind.

                  Denke vor der Ausgabe an den Kontext-Wechsel.

          2. JQuery

            Da muss Dir ein anderer helfen. Den wenigen Kleinkram erledigt man auch besser und wahrscheinlich sicherer ohne dieses JQuery.

            Jetzt möchte ich gerne das Fenster ausblenden

            Von einem Fenster habe ich noch nichts gesehen, aber Fenster (englisch: window) sind Objekte und haben (außer natürlich im ICE und hochfliegendem Zeug) die Methode close().

            Falls das „Fenster“ ein window und kein <div>, <form> oder sowas ist würde ich das damit machen. Ansonsten stelle ich mal die Frage:

            "Wie wäre es denn damit, für das Formular die Style-Eigenschaft display passend zu vergeben? Oder muss da auch JQuery genommen werden, weil es sonst zu einfach ist?"

            1. Hallo,

              mein Fenster öffne ich mit jQuery

              $(".various").fancybox({
              				
              	maxWidth	: 800,
              	maxHeight	: 600,
              	fitToView	: false,
              	width		: '70%',
              	height		: '70%',
              	autoSize	: false,
              	closeClick	: false,
              	openEffect	: 'none',
              	closeEffect	: 'none'
              });
              
              <div id="inline" style="display:none; width:500px;"></div>
              

              Das schließen müsste innerhalb von

              success:  function(msg) { }
              

              passieren?

              Dann bleibt auch noch dieses Problem: https://forum.selfhtml.org/self/2017/feb/24/select-dynamisch-aktualisieren-nach-php-insert/1688051#m1688051

            2. @@Regina Schlauklug

              "Wie wäre es denn damit, für das Formular die Style-Eigenschaft display passend zu vergeben?

              Schlecht.

              Dafür gibt es das HTML-Attribut hidden, welches Verwendung finden sollte:

              “Documents that use style attributes on any of their elements must still be comprehensible and usable if those attributes were removed. Note: In particular, using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.)” [Spec]

              Oder muss da auch JQuery genommen werden, weil es sonst zu einfach ist?"

              Nö. Aber Angular, React, … *duck*

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. @@Achot

    Zur Notation:

    	<?php 
              $frontend_ansprechpartner = ansprechpartner($mysqli);
              foreach($frontend_ansprechpartner as $array){ 
    	?>
    	<option value="<?php echo htmlspecialchars($array['id']); ?>">
                      <?php echo htmlspecialchars($array['name']); ?>
            </option>
    	<?php } ?>
    

    Die geschweiften Klammern sind suboptimal. Siehe Diskussion Alternative Syntax für Kontrollstrukturen ff.

    : statt {; endforeach; statt }:

    <?php 
      $frontend_ansprechpartner = ansprechpartner($mysqli);
      foreach($frontend_ansprechpartner as $array): 
    ?>
      <option value="<?php echo htmlspecialchars($array['id']); ?>">
        <?php echo htmlspecialchars($array['name']); ?>
      </option>
    <?php endforeach; ?>
    

    oder

    <?php $frontend_ansprechpartner = ansprechpartner($mysqli); ?><?php foreach($frontend_ansprechpartner as $array): ?>
      <option value="<?php echo htmlspecialchars($array['id']); ?>">
        <?php echo htmlspecialchars($array['name']); ?>
      </option>
    <?php endforeach; ?>
    

    wobei die erste Anweisung (das ⋮ deutet es an) auch weit vorher stehen kann – noch vor <!DOCTYPE html> (EVA-Prinzip).

    Statt <?php echo auch gern <?=.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hallo,

      hab jetzt alles bisschen umgebaut, so besser?

      ob_start();
      session_start();
      
      require_once 'inc/zugangsdaten.php';
      require_once 'include/config.php';
      require_once 'include/functions/uebersicht.php';
      require_once 'include/class/upload.class.php';
      require_once 'include/lib/Swift-5.0.3/lib/swift_required.php';
      
      error_reporting(E_ALL);
      ini_set('display_errors', 1);
      
      
      // Begrüßung festlegen
      if(date("G") < 10) { $begruessung= "Guten Morgen"; }
      if(date("G") <= 18 && date("G") >= 10) { $begruessung= "Guten Tag"; }
      if(date("G") >= 19) { $begruessung= "Guten Abend"; }
      
      $frontend_UserDaten 	  = userDaten($mysqli, session_id());
      $frontend_ansprechpartner = ansprechpartner($mysqli);
      
      ?>
      
      <!doctype html>
      <html lang="de">
      <head>
          <meta charset="utf-8">
          <meta name="description" content="" />
          <meta name="keywords" content="" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
          <?php include_once 'inc/favicon.php'; ?>
      		
          <title>Seite zum testen</title>
      
          <link rel="stylesheet" type="text/css" href="include/css/style.css">
      
      </head>
      <body>
      
      <?php include_once 'inc/top-navigation.php'; ?>
      
      <main>
      
      <section class="insert">
      
        <h2><?php echo htmlspecialchars($begruessung) ?></h2>
      	
        <form form method="post" action="">
      		
          <label for="titel">Ansprechpartner</label>
          <select name="ansprechpartner" id="ansprechpartner">
            <?php foreach($frontend_ansprechpartner as $array): ?>
              <option value="<?php echo htmlspecialchars($array['id']); ?>">
              <?php echo htmlspecialchars($array['name']); ?>
            <?php endforeach; ?>
          </select>
      
          <a href="">Neuen Ansprechpartner hinzufügen</a>
      
         <label for="bezeichnung">Bezeichnung</label>
         <input type="text" 
                name="bezeichnung" 
                id="bezeichnung" 
                value="<?php echo htmlspecialchars($bezeichnung)?>" required>
      
         <input type="submit" 
                name="abschicken" 
                value="<?php echo htmlspecialchars($BTN) ?>">
      
        </form>
      
      </section>
      
      <section class="insert-neues-fenster">
      		
        <form form method="post" action="">
      		
        <label for="ansprechpartner_anrede">Anrede</label>
        <input type="text" 
               name="ansprechpartner_anrede" 
               id="ansprechpartner_anrede" 
               value="<?php echo htmlspecialchars($ansprechpartner_anrede)?>">
      
        <label for="ansprechpartner_name">Name</label>
        <input type="text" 
               name="ansprechpartner_name" 
               id="ansprechpartner_name" 
               value="<?php echo htmlspecialchars($ansprechpartner_name)?>">
      
        <label for="ansprechpartner_telefon">Telefon</label>
        <input type="text" 
               name="ansprechpartner_telefon" 
               id="ansprechpartner_telefon" 
               value="<?php echo htmlspecialchars($ansprechpartner_telefon)?>">
      
        <label for="ansprechpartner_email">E-Mail</label>
        <input type="email" 
               name="ansprechpartner_email" 
               id="ansprechpartner_email" 
               value="<?php echo htmlspecialchars($ansprechpartner_email)?>" >
      
        <input type="submit" 
               name="abschicken_ansprechpartner" 
               value="<?php echo htmlspecialchars($BTN_Fenster) ?>">
      
        </form>
       </section>
      	
      </main>
      
      <?php include_once 'inc/footer.php'; ?>
      
      <script src="include/js/jquery-3.1.1.min.js"></script>
      
      <script> 
      	$(document).ready(function(){
      
      	});              
      </script>
      
      </body>
      </html>
      
      1. Hallo Achot,

        // Begrüßung festlegen
        if(date("G") < 10) { $begruessung= "Guten Morgen"; }
        if(date("G") <= 18 && date("G") >= 10) { $begruessung= "Guten Tag"; }
        if(date("G") >= 19) { $begruessung= "Guten Abend"; }
        

        Wenn die erste Bedingung zutrifft, brauchen die anderen nicht mehr geprüft zu werden.

        if(date("G") < 10) : 
            $begruessung= "Guten Morgen";
        elseif(date("G") <= 18 && date("G") >= 10) : 
            $begruessung= "Guten Tag";
        else: 
            $begruessung= "Guten Abend";
        endif;
        

        <link rel="stylesheet" type="text/css" href="include/css/style.css">

        text/css ist der Standardwert, kann deshalb weg.

        <h2><?php echo htmlspecialchars($begruessung) ?></h2>

        Eine Begrüßung ist meiner Meinung nach keine Überschrift. p sollte die bessere Wahl sein.

        <form form method="post" action="">

        Tippfehler.

        <?php echo htmlspecialchars($array['name']); ?>

        <?= htmlspecialchars($array['name']); ?>

        <a href="">Neuen Ansprechpartner hinzufügen</a>

        Ein a-Element scheint mir hier falsch zu sein. Was passiert bei Klick darauf?

        <input type="text"

        text ist der Standardwert, kann also weg.

        <input type="submit"

        button existiert. Und falls du bei input bleibst, brauchst du ein label.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. Hallo Matthias,

          if(date("G") < 10) : 
              $begruessung= "Guten Morgen";
          elseif(date("G") <= 18 && date("G") >= 10) : 
              $begruessung= "Guten Tag";
          else: 
              $begruessung= "Guten Abend";
          endif;
          

          Du hast es doch gesagt, die Bedingungen müssen nicht mehr geprüft werden 😉

          if(date("G") < 10) : 
              $begruessung= "Guten Morgen";
          elseif(date("G") <= 18) : 
              $begruessung= "Guten Tag";
          else: 
              $begruessung= "Guten Abend";
          endif;
          

          Das >= 10 ist äquivalent zur Negation der ersten Bedingung < 10, und die ist in diesem Konstrukt immer erfüllt wenn der elseif-Zweig geprüft wird.

          Ansonsten ist das verwenden der Kontroll-Strukturen außerhalb von PHP-HTML-Mischmasch schlechter Stil.

          LG,
          CK

          1. @@Christian Kruse

            Du hast es doch gesagt, die Bedingungen müssen nicht mehr geprüft werden 😉

            if(date("G") < 10) : 
                $begruessung= "Guten Morgen";
            elseif(date("G") <= 18) : 
                $begruessung= "Guten Tag";
            else: 
                $begruessung= "Guten Abend";
            endif;
            

            Es müssen gar keine Bedingungen geprüft werden, wenn man eine Funktion findet, die 0…9 auf 0, 10…18 auf 1 und 19…23 auf 2 abbildet. Nichts einfacher als das: h → ⎣h / 9.5⎦.

            <?php $begruessungen = array('Guten Morgen', 'Guten Tag', 'Guten Abend'); ?><p><?= $begruessungen[floor(date("G") / 9.5)] ?></p>
            

            LLAP 🖖

            PS: Ob das den Code lesbarer macht, sei jetzt mal dahingestellt.

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Tach!

              Es müssen gar keine Bedingungen geprüft werden, wenn man eine Funktion findet, die 0…9 auf 0, 10…18 auf 1 und 19…23 auf 2 abbildet. Nichts einfacher als das: h → ⎣h / 9.5⎦.

              <?php $begruessungen = array('Guten Morgen', 'Guten Tag', 'Guten Abend'); ?><p><?= $begruessungen[floor(date("G") / 9.5)] ?></p>
              

              Nicht immer sind solche Vereinfachungen auch die bessere Variante. Aus den ausformulierten Bedingungen ging intuitiver hervor, was der Code machen sollte, als diese Formel auszudrücken vermag. Die Formel mag zwar clever sein, aber auch schlechte UX.

              dedlfix.

              1. @@dedlfix

                Nicht immer sind solche Vereinfachungen auch die bessere Variante. Aus den ausformulierten Bedingungen ging intuitiver hervor, was der Code machen sollte, als diese Formel auszudrücken vermag.

                Hab ich noch nachträglich als PS hinzugefügt.

                Die Formel mag zwar clever sein, aber auch schlechte UX.

                Mit UX hat das wenig zu tun. Du meinst DX‽

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. Tach!

                  Die Formel mag zwar clever sein, aber auch schlechte UX.

                  Mit UX hat das wenig zu tun. Du meinst DX‽

                  Warum nicht? User ist in dem Fall derjenige, der den Code liest. Und ob ich DX meine, kann ich nicht sagen, weil mir diese Abkürzung nicht geläufig ist.

                  dedlfix.

                  1. Hallo dedlfix,

                    Und ob ich DX meine, kann ich nicht sagen, weil mir diese Abkürzung nicht geläufig ist.

                    Das neuste Buzzword: Developer Experience.

                    LG,
                    CK

                    1. Und ob ich DX meine, kann ich nicht sagen, weil mir diese Abkürzung nicht geläufig ist.

                      Das neuste Buzzword: Developer Expirience.

                      Developer als Auslaufmodel?

                  2. @@dedlfix

                    Warum nicht? User ist in dem Fall derjenige, der den Code liest.

                    Es gibt durchaus Fälle, wo Entwickler die Nutzer sind; bspw. wenn über die UX von IDEs gesprochen wird.

                    Den hiesigen Fall würde ich nicht dazuzählen.

                    Und ob ich DX meine, kann ich nicht sagen, weil mir diese Abkürzung nicht geläufig ist.

                    Ich hab sie ja auch eben erst kreiert.

                    LLAP 🖖

                    --
                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                    1. Hallo Gunnar,

                      Und ob ich DX meine, kann ich nicht sagen, weil mir diese Abkürzung nicht geläufig ist.

                      Ich hab sie ja auch eben erst kreiert.

                      Äh, definitiv… nein 😂

                      LG,
                      CK

      2. hallo

        if(date("G") < 10) { $begruessung= "Guten Morgen"; }

        Konzeptionell richtiger wäre es, die Begrüssungsfloskel nach dem Zeitbegriff des Users zu wählen.

        1. @@beatovich

          if(date("G") < 10) { $begruessung= "Guten Morgen"; }

          Konzeptionell richtiger wäre es, die Begrüssungsfloskel nach dem Zeitbegriff des Users zu wählen.

          Soll heißen: Nicht die Zeit des Servers sollte den Ton Text angegeben, sondern die des Clients. Text, der sich je nach Uhrzeit verändert?

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. Hallo,

    hier mein fertiges Ergebnis:

    <div id="inline" style="display:none; width:500px;">
    
    <div id="response"></div>
    
    <form form method="post" action="" id="test">
    				
    	<label for="ansprechpartner_anrede">Anrede</label>
    	<input type="text" name="ansprechpartner_anrede" id="ansprechpartner_anrede" value="">
    
    	<label for="ansprechpartner_name">Name</label>
    	<input type="text" name="ansprechpartner_name" id="ansprechpartner_name" value="">
    
    	<label for="ansprechpartner_telefon">Telefon</label>
    	<input type="text" name="ansprechpartner_telefon" id="ansprechpartner_telefon" value="">
    
    	<label for="ansprechpartner_email">E-Mail</label>
    	<input type="email" name="ansprechpartner_email" id="ansprechpartner_email" value="" >
    
    	<input type="hidden" name="code" value="<?php echo md5(uniqid()); ?>">
    
    	<button type="submit" id="eintragen">Save</button>
    </form>
    
    </div>
    

    Mein Insert

    
    $code 			        = $_POST['code'];
    $ansprechpartner_anrede 	= $_POST['ansprechpartner_anrede'];
    $ansprechpartner_name 		= $_POST['ansprechpartner_name'];
    $ansprechpartner_telefon 	= $_POST['ansprechpartner_telefon'];
    $ansprechpartner_email 		= $_POST['ansprechpartner_email'];
    
    
    if ($stmt = $mysqli->prepare("INSERT INTO test_tabelle (code, ansprechpartner_anrede, ansprechpartner_name, ansprechpartner_telefon, ansprechpartner_email) 
    	                         
                                   VALUES (?, ?, ?, ?, ?)")) { 
    	     
    	    $code  			= $_POST['code'];
    	    $ansprechpartner_anrede     = $_POST["ansprechpartner_anrede"];
    	    $ansprechpartner_name  	= $_POST["ansprechpartner_name"];
    	    $ansprechpartner_telefon	= $_POST["ansprechpartner_telefon"];
    	    $ansprechpartner_email	= $_POST["ansprechpartner_email"];
    	      
    $stmt->bind_param("sssss", $code, $ansprechpartner_anrede, $ansprechpartner_name, $ansprechpartner_telefon, $ansprechpartner_email);
    	      
    $stmt->execute();
    
      echo json_encode($_POST);
    	      
    }
     else {
      echo $mysqli -> error;
    	      
    }
    

    Mein JS Code

    $( "#test" ).submit(function( event ) {
    
     event.preventDefault();
    
      var send = $("#test").serialize();
    
      $.ajax({
    				
    	type: 	  "POST",
    	url:  	  "insert.php",
    	data:     send,
    	dataType: 'json',
    				
    	success:  function(data) {
    
    	console.log(data);
    
    	$("#ansprechpartner option:last").after($('<option value="'+ data.code +'" selected>'+ data.ansprechpartner_name +'</option>'));
    
    	function clearInputs(data){
    	   $("#test :input").each(function(){
    	   $(this).val('');
    	});
    };
    
    	clearInputs();
            $.fancybox.close();
      }
     });
    });
    
    1. Hallo Achot,

      Dass du das Umkopieren von Variablen vermeiden sollst, wurde schon oft gesagt. Ebenso, dass text bzw. submit die default-typen für input resp. button sind.

      Und der Tippo <form form > ist auch noch da.

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      1. Dass du das Umkopieren von Variablen vermeiden sollst, wurde schon oft gesagt.

        Man sollte es vermeiden, wenn man mit den Daten nicht weiter arbeitet. In meinem Fall sieht du hier nur ein sehr kleinen Ausschnitt.

        Ich finde den Code so viel unübersichtlicher:

        if ($stmt = $mysqli->prepare("INSERT INTO test_tabelle (
                                         code, ansprechpartner_anrede, 
                                         ansprechpartner_name, ansprechpartner_telefon, 
                                         ansprechpartner_email) 
        	     
                     VALUES (?, ?, ?, ?, ?)")) { 
        	     	      
        $stmt->bind_param("sssss", $_POST['code'], 
                                   $_POST["ansprechpartner_anrede"], 
                                   $_POST["ansprechpartner_name"], 
                                   $_POST["ansprechpartner_telefon"], 
                                   $_POST["ansprechpartner_email"]);
        	      
        	    $stmt->execute();
        
        	    echo json_encode($_POST);
        	      
        	    }
        	      
        	else {
        	    echo $mysqli -> error;
        	      
        	}
        

        Ebenso, dass text bzw. submit die default-typen für input resp. button sind.

        Ganz ehrlich, dazu habe ich keine Lust das zu ändern. Es ist für den Code überhaupt nicht schlimm. Sublime Text macht dieses automatisch genauso wie der Google Web Designer.

        Wenn ich aus

        <input type="submit" name="abschicken" value="Eintragen">
        

        dieses mache

        <input name="abschicken" value="Eintragen">
        

        benötige ich eine weitere Klasse um den Button zu stylen?

        Ich bin der Meinung man muss nicht auf den Zug aufspringen, dazumal arbeiten wir im Team und ich habe keine Lust ständig irgendetwas umzustellen.

        Und der Tippo <form form > ist auch noch da.

        Danke, dieses ist weg. War selbstverständlich ein Fehler.

        1. @@Achot

          Ebenso, dass text bzw. submit die default-typen für input resp. button sind.

          Ganz ehrlich, dazu habe ich keine Lust das zu ändern. Es ist für den Code überhaupt nicht schlimm. Sublime Text macht dieses automatisch genauso wie der Google Web Designer.

          Wenn ich aus

          <input type="submit" name="abschicken" value="Eintragen">
          

          dieses mache

          <input name="abschicken" value="Eintragen">
          

          dann machst du aus einem Submit-Button ein Texteingabefeld.

          Du kannst aber aus

          <input type="text" name="ansprechpartner_anrede" id="ansprechpartner_anrede" value="">
          

          dieses machen:

          <input name="ansprechpartner_anrede" id="ansprechpartner_anrede">
          

          Auch value="" kann weg.

          Und du kannst aus

          <button type="submit" id="eintragen">Save</button>
          

          dieses machen:

          <button id="eintragen">Save</button>
          

          Dass "submit" (und nicht "button") der Defaultwert für type bei Formularbuttons ist, finde ich allerdings auch etwas weniger intuitiv als dass "text" der Defaultwert bei Eingabefeldern ist.

          benötige ich eine weitere Klasse um den Button zu stylen?

          Nein. Ebenso wie du Buttons mit "submit" per button[type="submit"] stylen kannst, kannst du auch Buttons ohne type-Attribut per button:not([type]) stylen.

          Wenn du nur Submit-Buttons von Formularen und nicht auch andere Buttons außerhalb von Formularen erwischen willst: form button:not([type])

          War selbstverständlich ein Fehler.

          Ein Fehler ist noch da: die Beschriftung des Submit-Buttons. Da das Formular auf deutsch ist, sollte die wohl kaum „Save“ sein.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. hallo

        Ebenso, dass text bzw. submit die default-typen für input resp. button sind.

        Guter Code erspart den Kommentar.

        1. @@beatovich

          Ebenso, dass text bzw. submit die default-typen für input resp. button sind.

          Guter Code erspart den Kommentar.

          Gute HTML-Kenntnisse ebenso.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. @@Achot

      <div id="inline" style="display:none; width:500px;">
      

      Abgesehen davon, dass Stilangaben nicht inline im Markup, sondern im Stylesheet stehen sollten, ist width: 500px recht unsinnig. Mein Viewport ist nur 320px breit; bei vielen anderen ähnlich schmal. Du willst eine _Maximal_breite setzen? Dann tu das: max-width.

      Und warum display: none und nicht das hidden-Attribut?

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Guten Morgen,

        Und warum display: none und nicht das hidden-Attribut?

        weil dieses von der fancybox 2 so vorgegen wird.

      2. @@Gunnar Bittersmann

        Du willst eine _Maximal_breite setzen? Dann tu das: max-width.

        Dass sich _ und * unterschiedlich verhalten, ist auch nicht gerade intuitiv.

        _Maximal_breite → _Maximal_breite

        *Maximal*breiteMaximalbreite

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo Gunnar Bittersmann,

          Dass sich _ und * unterschiedlich verhalten, ist auch nicht gerade intuitiv.

          Ja, das hatten wir schon.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.