sascha321: tabs und body aktualisieren

Beitrag lesen

SELF-Forum

tabs und body aktualisieren

sascha321
– Informationen zu den Bewertungsregeln

Hallo

Ich habe eine Seite mit Tabs, die per CSS gesteuert werden. Wenn ich nun auf einen Tab drücke, wird per JavaScript eine PHP Seite in den Body geladen. Mit dieser PHP Seite möchte ich das ein User sein Kennwort ändern kann. Die Meldungen, die von der PHP Seite kommen, z.B. Kennwort erfolgreich geändert, möchte ich wieder in dem Tab zur Verfügung stellen, ohne das sich die ganze Seite erneut lädt. Ich hoffe das war verständlich, hier der Code.

Test.html

<!doctype html>   
 <html>   
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">    
    
    <script src="jquery.js" type="text/javascript"></script>  
    <script type="text/javascript">
      function kb_source_2_target(tabseite) {
	      //alert(tabseite);
		    $.get(tabseite, function(data) {
		      $('#div_body').html(data);	
	      })  
	    }
    </script>
   	    
  </head>

  <style>
  
    .menueleiste {
    border-bottom: 2px solid #CE1719;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    }
    
    .tab [type=radio] {
    display: none;
    
    }

    /* normler Tab */
    .tab label {
    border : 2px solid #CE1719;
    width: 100px;
    height:auto;
    border-radius: 5px 5px 0px 0px;
    }

    /* Tab beim �berfahren */ 
    .tab:hover + label {
    border : 0px solid white;
    width: 100px;
    height:auto;
    border-radius: 5px 5px 0px 0px;
    }

    /* Aktiver Tab */
    [type=radio]:checked + label {
    border : 2px solid #CE1719;
    width: 100px;
    height:auto;
    border-bottom-color: aqua;
    background-color: aqua;
    border-radius: 5px 5px 0px 0px;
    }

    .body {
    border : 2px solid #CE1719;
    background-color: aqua;  
    margin-top: -2px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    }
    
  
  </style>
   
  <body>
      <div class="menueleiste">

        <div class="tab">
          <input type="radio" id="tab-1" name="tab-group-1" onclick="kb_source_2_target('passwortwechsel.php')">
          <label for="tab-1">Kennwort aendern</label>
        </div>      
        <div class="tab">
          <input type="radio" id="tab-2" name="tab-group-1" onclick="kb_source_2_target('leer.php')">
          <label for="tab-2">Benutzer</label>
        </div>
      </div>
      <div class="body" id="div_body">

      </div>  
  </body>

  </html>

passwortwechsel.php


  <?php

    if ($_POST['pwweg'] == 'Abschicken') {
       
      // sql abfragen und �berpr�fung des kennworts wenn alles ok geht es mit header('') weiter
         
        header('location: test.html');
    
    }
  ?>
  
  <form method="POST" action="passwortwechsel.php">
    <div id="div_changepass"><h1>Kennwort �ndern</h1></div>

     
    <div class="">
        <input type="text" name="altespasswort" placeholder="altes Kennwort" required>
    </div>

    <div class="">
        <input type="text" name="nneuespasswort1" placeholder="neues Kennwort" required>
    </div>

    <div class="">
      <input type="text" name="neuespasswort2" placeholder="neues kennwort" required>
    </div>
    
    <div class="">
      <input type="Submit" name="pwweg" value="Abschicken">
    </div>

  </form>

kann mir da jemand helfen.

Danke

Beitrag melden
–
Informationen zu den Bewertungsregeln