Cześć, posiadam modala którego chciałbym używam jednocześnie do tworzenia nowego rekordu w tabeli oraz edytowania tych rekordów. Tworzenie rekordów do bazy MySQL działa świetnie gorzej z edytowaniem danego rekordu ponieważ nie wiem jak to zrobić :/ Przeczytałem chyba wszystkie tematy na forum dot. ładowania danych do modala ale ja posiadam jeden modal do dwóch rzeczy :/
Przycisk który otwiera modala do edytowania rekordu:
<td class="text-center">
<a href="#" id="edit_row" data-toggle="tooltip" data-placement="top" title="Edit">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="edit-event feather feather-edit-2 text-success">
<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
</svg>
</a>
</td>
JS przycisku:
$(document).ready(function() {
var editEvent = document.getElementById("edit_row");
editEvent.onclick = function() {
modal.style.display = "block";
addEvent.style.display = 'none';
editEvent.style.display = 'block';
addEventTitle.style.display = 'none';
editEventTitle.style.display = 'block';
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
createBackdropElement();
enableDatePicker();
}
});
Oraz cały modal:
<!-- The Modal -->
<div id="addEventsModal" class="modal animated fadeIn">
<?php
$currentDateTime = date('d-m-Y'); //echo $currentDateTime;
?>
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content -->
<div class="modal-content">
<form class="" action="process.php" method="post" enctype="multipart/form-data">
<div class="modal-body">
<span class="close">×</span>
<div class="add-edit-event-box">
<div class="add-edit-event-content">
<h5 class="add-event-title modal-title">Dodawanie nowego rekordu</h5>
<h5 class="edit-event-title modal-title">Edit Events</h5>
<div class="row">
<div class="col-md-6 col-sm-6 col-12">
<div class="form-group start-date">
<label for="start-date" class="">Data:</label>
<div class="d-flex">
<!-- name="data" -->
<input id="start-date" name="data" placeholder="Data" class="form-control" type="text" value=
<? echo $currentDateTime ?>>
</div>
</div>
</div>
<div class="col-md-12">
<label for="start-date" class="">Nr. artykułu:</label>
<div class="d-flex event-title"><!-- name="nr_art" -->
<input id="nr_art" name="nr_art" type="text" placeholder="Numer artykułu" class="form-control">
</div>
</div>
<div class="col-md-12">
<label for="start-date" class="">Nazwa artykułu:</label>
<div class="d-flex event-title"><!-- name="nazwa_art" -->
<input id="nazwa_art" name="nazwa_art" type="text" placeholder="Nazwa artykułu" class="form-control">
</div>
</div>
<div class="col-md-12">
<label for="start-date" class="">Ilość potrzebna:</label>
<div class="d-flex event-title"><!-- name="potrzeba" -->
<input id="ilosc_potrzeba" name="ilosc_potrzeba" type="text" placeholder="Zamówiona ilość detali" class="form-control">
</div>
</div>
<div class="col-md-12">
<label for="start-date" class="">Ilość wydana:</label>
<div class="d-flex event-title"><!-- name="data" -->
<input id="ilosc_wyslana" name="ilosc_wyslana" type="text" placeholder="Ilość wydanych detali" class="form-control">
</div>
</div>
<div class="col-md-12">
<label for="start-date" class="">Wykonał:</label>
<div class="d-flex event-title">
<input id="wydal" name="wydal" type="text" placeholder="Wydał" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="start-date" class="">Uwagi:</label>
<div class="d-flex event-description">
<textarea id="taskdescription" placeholder="Wpisz swoją uwagę(opcjonalne)" rows="3" class="form-control" name="uwagi"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="event-badge">
<p class="">Status:</p>
<div class="d-sm-flex d-block">
<div class="n-chk">
<label class="new-control new-radio radio-success">
<input type="radio" class="new-control-input" name="marker" value="success">
<span class="new-control-indicator"></span>Wysłane
</label>
</div>
<div class="n-chk">
<label class="new-control new-radio radio-danger">
<input type="radio" class="new-control-input" name="marker" value="danger">
<span class="new-control-indicator"></span>Anulowane
</label>
</div>
<div class="n-chk">
<label class="new-control new-radio radio-primary">
<input type="radio" class="new-control-input" name="marker" value="primary">
<span class="new-control-indicator"></span>Przygotowane
</label>
</div>
<div class="n-chk">
<label class="new-control new-radio radio-warning">
<input type="radio" class="new-control-input" name="marker" value="warning">
<span class="new-control-indicator"></span>Wstrzymane
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<!--<button id="discard" class="btn" data-dismiss="modal">Anuluj</button>-->
<a href="java script:void(0);" id="discard" data-dismiss="modal">Anuluj</a>
<button id="edit-event" class="btn">Zapisz</button>
<button id="add-e" name="gotowe_add" class="btn">Dodaj</button>
</div>
</form>
</div>
</div>
</div>
Ten post edytował filip3712 25.06.2020, 00:00:38