2
I am creating an image selection page and wanted q when clicking choose the number to be for the input and if you click again it exit the input because there will be several fts chosen body
<?php
session_start();
if(!isset($_SESSION['tkm'])){
$redirect = "index.php";
header("location:$redirect");
}else{
include 'conn.php';
$tkm=$_SESSION['tkm'];
$sql="SELECT id FROM `usuario` WHERE tkm='$tkm'";
$executar= mysqli_query($link,$sql);
$num= mysqli_num_rows($executar);
if($num == 1){
while($show=mysqli_fetch_array($executar)){
$id=$show['id'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Selecionar Fotos</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarColor01" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="sair.php">sair</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<?php
$sql="SELECT foto FROM `foto` WHERE usuario=$id";
$executar= mysqli_query($link,$sql);
//$num= mysqli_num_rows($executar);
$i=0;
while($show=mysqli_fetch_array($executar)){
$foto=$show['foto'];
$i++;
?>
<div class="col-xs-12 col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="select zoom">
<img src="<?php echo $foto; ?>" onclick="imgZ('mostrar');AplI('<?php echo $foto; ?>');" >
<img class="veisto" src="visto.png" id="<?php echo $i; ?>" >
</div>
<button onclick="escolha('<?php echo $i; ?>');marcar('<?php echo $i; ?>')">escolher</button>
</div>
<?php
}
?>
<form action="" method="post">
<input type="text" name="escolidos" id="escolidos">
<input type="submit" value="enviar">
</form>
</div>
</div>
<div id="mostrar" class="mostrar">
<img src="x.png" class="img-fechar" onclick="imgF('mostrar')" title="fechar">
<center>
<div id="zoomimg" class="img"></div>
</center>
</div>
<script src="div.js"></script>
</body>
</html>
<?php
}else{
$redirect = "sair.php";
header("location:$redirect");
}
?>
<?php
}
?>
javascript
function imgZ(el){
document.getElementById(el).style.display="block";
}
function AplI(el){
document.getElementById('zoomimg').innerHTML=" <img src=\""+ el +"\" class=\" AplI \">";
}
function imgF(el){
document.getElementById(el).style.display="none";
}
function escolha(el){
var visto = document.getElementById(el).style.display;
if(visto == "none")
document.getElementById(el).style.display="block";
else
document.getElementById(el).style.display="none";
}
function marcar(el){
var visto = document.getElementById(el).style.display;
if(visto == "none")
document.getElementById('escolidos').value += el+"%";
else
document.getElementById('escolidos').value -= el;
}