We Keep Coding

When executing the createModalAddPost() function, a window opens, but only once

a question about js, I have a panel that causes the window to open, it works, but when I close the window and try to open it again, it doesn't work, you need to reload the page, you need to be able to open the window again after clicking close, thanks in advance
<admin class="admin">
<div onclick="createModalAddPost()" class="admin-btn"><i class="fas fa-plus"></i></div>
<div class="admin-btn"><i class="fas fa-plus"></i></div>
</admin>
<!--Modal window-->
<div class="bgPage blog" >
<div class="admin-add">
<form action="">
<label for="">Заполните данные поста</label>
<input type="text" placeholder="Введите название поста">
<textarea name="" id="" placeholder="Введите текст поста"></textarea>
<input type="file" accept="image/*" multiple onchange="changeImages(this)">
<div class="image-check"></div>
<div class="pre-order__button blog-bt">Создать</div>
</form>
</div>
</div>
function createModalAddPost() {
let form = document.querySelector(".admin-add");
if(!form){
console.warn("Элемент [.admin-add] не найден");
return;
}
let closeMain = document.createElement("i");
closeMain.classList.add("fas", "fa-times");
closeMain.onclick = function () {
this.parentElement.parentElement.remove();
};
let blog = document.querySelector(".blog");
blog.classList.add("visual");
if (form.append(closeMain)) {
window.parent.location = window.parent.location.href;
}
}
.visual {
display:flex;
justify-content: center;
align-items: center;
display: block;
}
.blog {
display:flex;
justify-content: center;
align-items: center;
display: none;
}

The onClick event associated to a method wich removes the modal from the DOM as we can tell with this.parentElement.parentElement.remove(). So you cannot add it anymore when calling the method again.
To show and close modals, what I recommend you doing is switching the display value of your element, from display: none to display: flex (or whatever).

Passing id to jquery function

I have a button and a hidden div.
Button:
<input
type="button"
id="myButton"
name="answer"
value="OPTIONS"
style=" margin-top: -30px; margin-bottom: 10px;float: right;background-color: #C80918;border: none;color: #ffffff"
onclick="showDiv()" />
Hidden div:
<div id="customDiv" style="display:none;" class="answer_list" > WELCOME</div>
I have included a function to hide/show the div:
$('#myButton').click(function() {
$('#customDiv').toggle('slow', function() {
// Animation complete.
});
});
The button and the div are included inside a PHP loop. There is an identifier for every loop, it is $row['id'].
Now, when the button is clicked, only the first item from the loop is showing its div, I would need to pass the id to the jquery function to identify which button/item is clicked.
How could I change my code to pass the id of every loop item to the jquery function?
EDIT
<?php
//output customizable
$customizable = $row["customizable"];
if ($customizable == 1){
$output .= '
<div class="col-md-3 col-sm-6 col-xs-6" style="margin-top:12px;">
<div class="item-content" >
<button type="button" style="float: right;background-color: Transparent;border: none;" data-toggle="modal" data-target="#modalPort"
data-id="'.$row["id"].'" ><img src="info.png" width=30
></button>
<div class="img-container">
<img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info" style= "color:#666">'.$row["nombre"].'</h4>
<h4 class="text-info" style= "color:#000"><strong>'.$row["name"].'<strong></h4>
<h5 class="text-info" style= "color:#000">'.$row['descripcion'].'</h5>
<h4 class="text-danger" style= "color:#000">$ '.$row["price"] .'</h4>
<input
type="button"
id="myButton"
name="answer"
value="OPTIONS"
style=" margin-top: -30px; margin-bottom: 10px;float: right;background-color: #C80918;border: none;color: #ffffff"
onclick="showDiv()" />
<input style= " color:#000" type="text" name="comentarios" id="comentarios' . $row["id"] .'" placeholder="Special Instructions" class="form-control" value="" />
<br>
';
if($statement_opc->execute())
{
$numero_opciones = 0;
$result_opc = $statement_opc->fetchAll();
foreach($result_opc as $row_opc)
{
if ($row_opc['producto'] == $row['id']) {
$numero_opciones = $numero_opciones + 1;
$output .= '
<div class="checkbox">
<label><input type="checkbox" data-nombre="'. $row_opc["nombre"] .'"
data-precio="'. $row_opc["precio"] .'" id="opcion'.$row["id"].'" class="opcion_cbox"
data-rowid="'. $row["id"] .'" value="">'.$row_opc['nombre'].' (+ $'.$row_opc['precio'].')</label>
</div>
';
}
}
}
?>
//zona custom
<?php
$output .= '
<div id="customDiv" style="display:none;" class="answer_list" > WELCOME</div>
';
?>
//fin zona custom

You could connect each button to the respective div using their individual index (so the first button will toggle the first div, the second will toggle the second...)
var buttons = $("input[type='button']");
var answers = $(".answer-list");
buttons.each(function(index, dom) {
$(dom).on("click", function(e) {
$(answers[index]).toggle("slow");
});
});
body {
display: block;
height: 120px;
}
input[type="button"] {
background-color: #C80918;
margin-bottom: 10px;
/*margin-top: -30px;*/
color: #ffffff;
float: right;
border: none;
}
.answer-list {
display: none;
}
.answer-list.slow {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="OPTIONS 1" />
<input type="button" value="OPTIONS 2" />
<input type="button" value="OPTIONS 3" />
<div class="answer-list">WELCOME 1</div>
<div class="answer-list">WELCOME 2</div>
<div class="answer-list">WELCOME 3</div>
Or you could have unique ids for each div and just somehow store that id in a data attribute in the respective button.
$("input[type='button']").on("click", function(e) {
$($(e.target).data("target")).toggle("show");
});
body {
display: block;
height: 120px;
}
input[type="button"] {
background-color: #C80918;
margin-bottom: 10px;
/*margin-top: -30px;*/
color: #ffffff;
float: right;
border: none;
}
.answer-list {
display: none;
}
.answer-list.slow {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" data-target="#answer-list-1" value="OPTIONS 1" />
<input type="button" data-target="#answer-list-2" value="OPTIONS 2" />
<input type="button" data-target="#answer-list-3" value="OPTIONS 3" />
<div class="answer-list" id="answer-list-1">WELCOME 1</div>
<div class="answer-list" id="answer-list-2">WELCOME 2</div>
<div class="answer-list" id="answer-list-3">WELCOME 3</div>
But you should never use duplicate ids on the same page or duplicate names on the same form.

You can simply do this :
$('#myButton').click(function() {
$('#customDiv').each( function() {
$( this ).toggle('slow', function() {
// Animation complete.
});
});
});
But you may think to change id#customDiv to a class.customDiv.
It's not good let two or more elements with the same id.
EDIT
On button click :
var ids = [];
$( 'div.checkbox' ).find( 'input' ).each( function() {
var currentID = $( this ).data( 'rowid' );
// Some code, id verification or others
ids.push( currentID );
});
Now ids contains id of all checkbox.
Documentation :
https://api.jquery.com/find/
https://www.w3schools.com/jsref/jsref_push.asp
https://api.jquery.com/data/

after click on link javascript not working

when I click on link and I want to add class not working
i want do (div modal )
code php/html
<?php if(isset($_GET['ido']) )
{
?>
<div id ="modal" class="modal" style="background: blue; width: 100%;
height: 180%">
<div class="modal2" >
</div>
</div>
<?php
}
?>
<div id="no" class="no" style="width: 100%;height: 300%;background: #000">
<div class="nolink" style="width: 50%;height: 50%;margin: 0 auto ; background: #fff">
<span>
link
</span>
</div>
</div>
code javascript
<script type="text/javascript">
document.getElementById('link').onclick = function(){
document.getElementById('modal').classList.add('new') ;
};
</script>
when I click on link and I want to add class not working
i want do (div modal )

if you want to add new class on click, you should remove php condition and add 'return false' in onClick function
something like this: https://codepen.io/tuzov/pen/OQWJzB
document.getElementById('link').onclick = function(){
document.getElementById('modal').classList.add('new') ;
return false;
};
.modal {
display:none;
}
.modal.new {
display:block;
}
<div id ="modal" class="modal" style="background: blue; width: 100%;
height: 180%">
<div class="modal2" >
123
</div>
</div>
<div id="no" class="no" style="width: 100%;height: 300%;background: #000">
<div class="nolink" style="width: 50%;height: 50%;margin: 0 auto ; background: #fff">
<span>
link
</span>
</div>
</div>

link
Your code is fine. The problem here is href in link (?ido=22). try to replace it with other options. and
<script type="text/javascript">
document.getElementById('link').onclick = function(){
document.getElementById('modal').classList.add('new') ;
};
if you use return false inside click function your link will not work. Be aware of that.

Bootstrap bug - input has-error has-feedback glyphicon not vertically centred?

Why glyphicon-warning-sign form-control-feedback is not vertically centred in the code below - after adding font-size: 20px; to the label?
<div class="container">
<div class="content align-left contact">
<p>Hello World!</p>
<form action="#" method="post" id="contact-form">
<div class="form-group has-error has-feedback">
<label for="inputName">Your Name (required)</label>
<input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status">(warning)</span>
</div>
</form>
</div>
</div>
CSS:
.has-feedback .form-control-feedback {
border: 1px solid black;
}
.content {
padding: 100px;
}
.content p {
font-size: 18px;
letter-spacing: 1px;
line-height: 30px;
padding-bottom: 20px;
}
.content.contact label {
font-weight: 700;
}
.content.contact label {
font-size: 20px; // this is where the error cause - but why!???
}
Result:
The warning text is not red too.
Any ideas?
at jsfiddle but I can't find bootstrap as the load option!
EDIT:
You can see the bug at bootply

Brad's answer is good, but it is partial. When you change size of the label, or you put some more content before input, then it will be destroyed again. Since element .form-control-feedback has absolute position, then you should warp it in the common parent with input, so you will always get the right result. Add this CSS:
.warning {
color:#a94442;
}
.my-group {
position: relative;
}
And update you HTML:
<div class="form-group has-error has-feedback">
<label for="inputName">Your Name (required)</label>
<div class="my-group">
<input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
</div>
<span id="inputWarning2Status">(warning)</span>
</div>
Working demo: http://www.bootply.com/jGxRAFMKkg

1) you can add external resources to jsfiddle on the left side of the screen, use the bootstrap CDN.
2) the font-size for the label is causing the problem. The icon is fixed and doesnt play nice with the label size changing (don't ask me why - log with bootstrap).
3) THE FIX: add the following to css:
.has-feedback label~.form-control-feedback {
top:33px;
}
.warning {
color:#a94442; /*add this class to your warnings span*/
}
DEMO https://jsfiddle.net/10yLhpu3/

Add this to you stylesheet:
.glyphicon-warning-sign{
margin-top:8px;
}
#inputWarning2Status{
color:red;
}
http://www.bootply.com/gy41ldchWf
And it will work fine.

Remove this from the style
.content.contact label {
font-size: 20px;
}
In this line of code add warning in the class
<span class="glyphicon glyphicon-warning-sign form-control-feedback warning" aria-hidden="true"></span>
add any class name then replace the style that you've remove with this
.warning {
font-size: 20px;
}

Clicking on img class to upload file

I am trying to be able to just show my img class on my view .But also use that img to be able to click on it to pop up the file selector.
How am I able to do so I not sure. I thought might be able to do it with java-script but unsure how. Do not want "No File Selected To Show.
<div class="form-group">
<label for="input-image" class="col-lg-2 col-md-12 col-sm-2 col-xs-12"><?php echo $entry_image; ?></label>
<div class="col-lg-2 col-md-2 col-sm-10 col-xs-12">
<img class="thumbnail" src="<?php echo $image; ?>" style="width:100px; height:100px;"/>
</div>
</div>

<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="$('#file').click();">
with jQuery
or without it:
<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="document.getElementById('file').click();">

File selector is raw behavior of browser,you can only emulate the "Raw File Input" by image background and hide the raw input button by setting "opacity" style.
Refer: the profile setting page in twitter, use chrome debugger to look into elements and styles.
https://twitter.com/settings/profile

this is a sample code taken from the folllowing Source
css:
<style>
.element{
background-color:red;
width:200px;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
width:200px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
html:
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload">
<div class="element">Upload</div>
<input id="uploadBtn" type="file" class="upload" />
</div>
js:
<script>
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
</script>