Как открыть новую форму на динамическое событие нажатия кнопки в переполнении стека
Я создал динамическую кнопку в PHP. Мне нужно, чтобы открыть новую форму на той же главной странице в этом событии нажатия кнопки dyanamic, и когда я нажимаю на кнопку, она обновляет страницу. Как решить эту проблему
вот мой код, который я пробовал
<?php
function dash() {
include 'config.php';
$sql = "SELECT roomno FROM roombook";
if($result = mysqli_query($db, $sql)){
$str = '';
while($row = mysqli_fetch_array($result)){
// generate array from comma delimited list
$rooms = explode(',', $row['roomno']);
//create the dynamic button and set the value
foreach ( $rooms as $k=>$v ){
$str .= '<input type="submit" class="Click" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';
}
//return $str;
}
return $str;
}else {
echo "ERROR: Could not able to execute $sql. " . mysqli_error($db);
}
mysqli_close($db);
}
?>
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>room boking</title>
<link href="css/bootstrap1.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/front.css">
</head>
<body>
<form mathod="post" action="">
<div class =" row box col-md-4" >
<div style="color:black"><?php echo dash();?></div>
</div>
<script>
function showDiv() {
document.getElementById('link').style.display = "block";
}
</script>
</form>
Решение
Вы можете загрузить форму, чтобы она выглядела эффектно
http://jsfiddle.net/KyleMit/0fscmf3L/
Попробуй это
Он имеет HTML и CSS код, так что вам просто нужно интегрировать его, и вы можете открыть форму на той же странице и в всплывающем окне
HTML код
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
Launch Horizontal Form
</button>
<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label"for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control"id="inputEmail3" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"for="inputPassword3" >Password</label>
<div class="col-sm-10">
<input type="password" class="form-control"id="inputPassword3" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
Launch Normal Form
</button>
<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control"id="exampleInputEmail1" placeholder="Enter email"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"id="exampleInputPassword1" placeholder="Password"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form></div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO Question:
<a href='http://stackoverflow.com/q/26562900/1366033'>
Twitter Bootstap - form in Modal fomatting
</a><br/>
Fork This Skeleton Here:
<a href='http://jsfiddle.net/KyleMit/kcpma/'>
Bootstrap 3 Skeleton
</a><br/>
</div>
код CSS
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Надеюсь, это поможет вам
Другие решения
Используйте кнопку типа ввода вместо отправки
$str .= '<input type="button" class="Click" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';