Gjorde ett formulär efter infon i början av tråden.
Har ändrat så det bara är en modal. videoId plockas från knappens data-video-id och läggs formulärets videoId-fält när modalen skall visas.
Sen får du göra en mottagande php-sida som skriver ner data till databasen och ger svar som du vill ha.
Kod: Markera allt
<!DOCTYPE html>
<!-- saved from url=(0041)http://www.hahnes.se/video/modalTest.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Time Stamp Test</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="./Time Stamp Test_files/all.css">
<link href="./Time Stamp Test_files/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./Time Stamp Test_files/album.css" rel="stylesheet">
</head>
<body class="">
<section class="jumbotron text-center">
<div class="container">
<h2 class="jumbotron-heading black-color">Click on a modal you want to open.</h2>
</div>
</section>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm" data-video-id="1">
Launch demo modalA
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm" data-video-id="2">
Launch demo modalB
</button>
<div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" style="display: none;" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal form.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="myForm" action="receiver.php">
<div class="form-group">
<label for="id-input">Id</label>
<input type="text" class="form-control" id="id-input" name="videoId" placeholder="0" readonly>
</div>
<div class="form-group">
<label for="event-start-time-input">Event start time</label>
<input type="text" class="form-control" id="event-start-time-input" name="eventStartTime">
</div>
<div class="form-group">
<label for="event-stop-time-input">Event stop time</label>
<input type="text" class="form-control" id="event-stop-time-input" name="eventStopTime">
</div>
<div class="form-group">
<label for="event-info">Event info</label>
<input type="text" class="form-control" id="event-info" name="eventInfo">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="saveTime">Save changes</button>
</div>
</div>
</div>
</div>
<script src="./Time Stamp Test_files/jquery.min.js"></script>
<script src="./Time Stamp Test_files/popper.js"></script>
<script src="./Time Stamp Test_files/bootstrap.min.js"></script>
<script src="./Time Stamp Test_files/my_script.js"></script>
</body>
</html>
Kod: Markera allt
$(function(){
$("#saveTime").on("click", function(event) {
var $form = $("#myForm"),
data = $form.serialize(),
url = $form.attr( "action" );
$.post( url, data ) //i din receiver.php (form action) bör du komma åt postat data med $_POST, kanske så här(jag har inget php-miljö att testa i)? $_POST["eventInfo"]
.done(function(result) {
//kanske uppdatera nånting med det data du får tillbaka (om du skickar tillbaka nåt dvs)
$form.trigger('reset');
$('#modalForm').modal('hide');
})
.fail(function(jqXHR, textStatus, errorThrown){
alert(textStatus);
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
});
});
$('#modalForm').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var videoId = button.data('videoId');
var modal = $(this);
modal.find('.modal-body #id-input').val(videoId)
})
});