Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Aus Modal-Form heraus Daten per $_POST senden
#1
Hallo Forum, 
ich bin recht neu bei Bootstrap und finde das echt Klasse. Allerdings stoße ich gerade an meine Grenzen. Ich habe eine Tabelle mit dem footable-Plugin erstellt. Dort gibt es auch einen Edit-Button, der einen Datensatz in eine Modal-Form lädt und zum ändern bereitstellt. Die Daten kann ich auch ändern, aber leider nur innerhalb der Tabelle. Ich bräuchte die aber danach geändert in meiner mysql DB.
Wie bringe ich das jetzt zum laufen, dass ich aus der Modal Form heraus daten per Post an die Parent-Datei verschicke oder aber gleich im Modal in die DB eintrage? Ich habe schon viele versuche durch, bin aber immer gescheitert, da ich mich auch mit jquery nicht so gut auskenne.
Hier der Code den ich bisher habe:

PHP-Code:
<!DOCTYPE html>
<?
php
    session_start
();
    
$GLOBALS['SCRIPTNAME'] = basename(__FILE__);
    include(
"header.php");
    
$user check_user();
     if(!isset(
$_SESSION['userid']) OR $user['funktion']!="VORSTAND") {
        include_once(
"error.php");
        include(
"footer.php");
        exit;
    }
ScreenOut($_POST);
?>
    <script src="js/footable.min.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <link href="css/footable.bootstrap.min.css" rel="stylesheet">
    <div class="container">
    <h2>Spielstätten-Verwaltung</h2>
        <div class="example">
            <table id="editing-example" class="table" data-paging="true" data-filtering="true" data-sorting="true">
                <thead>
                <tr>
                    <th data-name="id" data-breakpoints="all" data-type="number">ID</th>
                    <th data-name="name">Spielstätten-Name</th>
                    <th data-name="plz" data-breakpoints="all">Postleitzahl</th>
                    <th data-name="ort" data-breakpoints="xs">Ort</th>
                    <th data-name="strasse" data-breakpoints="all">Strasse</th> 
                    <th data-name="telefon" data-breakpoints="xs">Telefon</th>
                    <th data-name="ruhetage" data-breakpoints="xs">Ruhetage</th>
                </tr>                         
                </thead>                          
                <tbody>                               
<?php
                $SQL 
"SELECT * FROM spielstaetten ORDER BY NAME ASC";
                if(!
$result $db->query($SQL))
                { die(
'Es ist ein Fehler aufgetreten!/n[' $db->error ' ]'); }
                else
                {
                    while(
$row $result->fetch_assoc())
                    {
?>
                <tr>
                    <td><?php echo $row['ID']; ?></td>
                    <td><?php echo $row['NAME']; ?></td>
                    <td><?php echo $row['PLZ']; ?></td>
                    <td><?php echo $row['ORT']; ?></td>
                    <td><?php echo $row['STRASSE']; ?></td>
                    <td><?php echo $row['TELEFON']; ?></td>
                    <td><?php echo $row['RUHETAGE']; ?></td>
                </tr>
<?php
                    
}
                }
                
mysqli_free_result($result);
?>
                </tbody>
            </table>
            <!-- Modal --->    
            <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
                <style scoped>
                    .form-group.required .control-label:after {
                        content:"*";
                        color:red;
                        margin-left: 4px;
                    }
                </style>
                <div class="modal-dialog" role="document">
                    <form class="modal-content form-horizontal" id="editor" action="spielstaettenverwaltung.php" method="POST">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="editor-title">Neue Spielstätte</h4>
                        </div>
                        <div class="modal-body">
                            <input type="number" id="id" name="id" class="hidden" value="0" />
                            <div class="form-group required">
                                <label for="name" class="col-sm-4 control-label">Spielstätten-Name</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Spielstätten-Name" required>
                                </div>
                            </div>
                            <div class="form-group required">
                                <label for="plz" class="col-sm-4 control-label">Postleitzahl</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" id="plz" name="plz" placeholder="Postleitzahl" required>
                                </div>
                            </div>
                            <div class="form-group required">
                                <label for="ort" class="col-sm-4 control-label">Ort</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="ort" name="ort" placeholder="Ort" required>
                                </div>
                            </div>
                            <div class="form-group required">
                                <label for="strasse" class="col-sm-4 control-label">Strasse</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="strasse" name="strasse" placeholder="Strasse" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="telefon" class="col-sm-4 control-label">Telefon</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ruhetage" class="col-sm-4 control-label">Ruhetage</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="ruhetage" name="ruhetage" placeholder="Ruhetage">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                             <button type="submit" name="submit" id="submit" class="btn btn-success btn" value="Speichern">Speichern</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- /container -->

<!-- Placed at the end of the document so the pages load faster -->
<script>
    jQuery(function($){
        var $modal = $('#editor-modal'),
            $editor = $('#editor'),
            $editorTitle = $('#editor-title'),
            ft = FooTable.init('#editing-example', {
                editing: {
                    enabled: true,
                    addRow: function(){
                        $modal.removeData('row');
                        $editor[0].reset();
                        $editorTitle.text('Add a new row');
                        $modal.modal('show');
                    },
                    editRow: function(row){
                        var values = row.val();
                        $editor.find('#id').val(values.id);
                        $editor.find('#name').val(values.name);
                        $editor.find('#plz').val(values.plz);
                        $editor.find('#ort').val(values.ort);
                        $editor.find('#strasse').val(values.strasse);
                        $editor.find('#telefon').val(values.telefon);
                        $editor.find('#ruhetage').val(values.ruhetage);
                        $modal.data('row', row);
                        $editorTitle.text('Datensatz #' + values.name + ' bearbeiten...');
                        $modal.modal('show');
                    },
                    deleteRow: function(row){
                        if (confirm('Diese Spielstätte sicher löschen?')){
                            row.delete();
                        }
                    }
                }
            }),
            uid = 10;

        $editor.on('submit', function(e){
            if (this.checkValidity && !this.checkValidity()) return;
            e.preventDefault();
            var row = $modal.data('row'),
                values = {
                    id: $editor.find('#id').val(),
                    name: $editor.find('#name').val(),
                    plz: $editor.find('#plz').val(),
                    ort: $editor.find('#ort').val(),
                    strasse: $editor.find('#strasse').val(),
                    telefon: $editor.find('#telefon').val(),
                    ruhetage: $editor.find('#ruhetage').val(),
                };

            if (row instanceof FooTable.Row){
                row.val(values);
            } else {
                values.id = uid++;
                ft.rows.add(values);
            }
            $modal.modal('hide');
        });
    });
</script>

<?php
    
include("footer.php");
?>
</div> 
Die erforderlichen scripte werden alle in der header.php geladen.
Wäre super, wenn mir da jemand weiterhelfen könnte..

LG Micha
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Bootstrap 4 Mega Menu
Last Post: The-Error
08.12.2019 12:57
» Replies: 2
» Views: 621
max-width Layout-Breite
Last Post: The-Error
12.11.2019 17:12
» Replies: 1
» Views: 335
Multi-Language in 10.0.8
Last Post: bootshock
01.11.2019 23:19
» Replies: 0
» Views: 405

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 328
» Latest member: michi323
» Forum threads: 256
» Forum posts: 1.007

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently 13 online users. [Complete List]
» 1 Member(s) | 12 Guest(s)
Avatar

>