Hallo zusammen,
ich komme gerade mit einer Sache in HTML nicht weiter.
Ich habe ein Formular mit mehreren Inputboxen. Mittig im Formular habe ich dynamisch erweiterbare inputboxen. Durch anklicken des Speichern Buttons werden die Werte der fixen und dynamischen Inputboxen an mysql übermittelt. Das funktioniert soweit auch gut.
Das Problem ist jetzt nur, dass der Code für die dynamisch erweiterbaren Inputboxen nun nicht mehr funktioniert. Nach anklicken das Buttons zum generieren dynamischer Inputboxen passiert einfach gar nichts. Vermutlich liegt es daran, dass ich zwei Formulare ("<form...") ineinander verschachtelt habe. Nehme ich den Code zum erzeugen der dynamischen Inputboxen aus dem anderen Formular, funktioniert der Code wie gewollt.
Da ich jedoch die dynamischen Inputboxen gerne mittig in dem Formular platzieren möchte und ich die Werte aller Inputboxen (auch der dynamischen) an mysql übermitteln möchte, habe ich den Code wie folgt aufgebaut.
Kann mir jemand weiterhelfen, wie ich die dynamischen Inputboxen weiterhin mittig im Formular platzieren kann und darüber hinaus die Werte aller Inputboxen zusammen durch anklicken des Speichern Buttons an mysql übermitteln kann?
Ich wäre euch sehr dankbar.
Hier nun der Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Test</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="design.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Zusätzliche Artikel zur Buchung hinzufügen
$(function () {
$(document).on('click', '.btn-add', function (e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
})
.on('click', '.btn-remove', function (e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
});
</script>
<?php
if (isset($_POST['we_speichern']))
{
echo $_POST["mywe_nr"] ;
echo "<br \>";
$field = $_POST["fields"] ;
foreach($field as $key => $value)
{
echo $value;
echo "<br \>";
}
}
?>
</head>
<body>
<form action="" method="POST" id="form1" enctype="multipart/form-data">
<!-- Page Content -->
<div class="container">
<div class="form-group">
<label for="wenr">Lieferschein-Nr.:</label>
<input type="tel" class="form-control" id="wenr" name="mywe_nr" pattern="[0-9]*" inputmode="numeric" placeholder="Beispiel: 021123456">
</div>
<div class="control-group" id="fields">
<label class="control-label" for="field1">Artikelnummer</label>
<div class="controls">
<form role="form" method="POST" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" id="artnr" type="tel" pattern="[0-9]*" inputmode="numeric" placeholder="Artikelnummer" />
<span class="abstand"></span>
<input class="form-control abstand_links" name="fields[]" id="menge" type="tel" pattern="[0-9]*" inputmode="numeric" placeholder="Menge"/>
<span class="abstand"></span>
<span class="input-group-btn">
<button class="btn btn-success btn-add" id="add_button" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<small>Drücke <span class="glyphicon glyphicon-plus gs"></span> um einen weiteren Artikel hinzuzufügen :)</small>
</div>
</div>
<div class="form-group">
<label for="datum">Datum:</label>
<input type="date" class="form-control" id="datum" name="mydatum" placeholder="Beispiel: 31.12.2020">
</div>
<br>
<input type="submit" class="btn btn-success" id="speichern" name="we_speichern" value="Speichern"></input>
</div>
</form>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.slim.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>Vielen Dank im Voraus für eure Hilfe
Viele Grüße
Timo