Develop Reference

Manipulating element by ID

I'm creating a plugin for Input Files, I created everything but without having in mind the possibility of having multiple inputs on screen, then it was necessary instead to manipulate the element from the element ID. This is so that actions in one input do not affect all other inputs on the screen.
Below is the code so far, I could not make it work when informed by the element ID.
function bs_input_file() {
// TODO: add function to hide remove button when file not informed
const inputElement = $(".input-file").find('input');
const inputId = inputElement.map(function (index, dom) {
return dom.id
});
buttonInspec(inputId);
function buttonInspec(id) {
$("#" + id).find("button.btn-reset").addClass("hidden");
var element = $("#" + id).find('input');
element.on("change input propertychange", function() {
console.log("changed!")
if (element.val() != "") {
$("#" + id).find("button.btn-reset").removeClass("hidden");
}
});
}
// Necessary to put ID below also
$(".input-file").before(
function() {
if (!$(this).prev().hasClass('input-ghost')) {
var element = $("<input type='file' class='input-ghost' style='visibility:hidden; height:0'>");
element.attr("name", $(this).attr("name"));
element.change(function() {
element.next(element).find('input').val((element.val()).split('\\').pop());
});
$(this).find("button.btn-choose").click(function() {
element.click();
});
$(this).find("button.btn-reset").click(function() {
element.val(null);
$(this).parents(".input-file").find('input').val('');
});
$(this).find('input').css("cursor", "pointer");
$(this).find('input').mousedown(function() {
$(this).parents('.input-file').prev().click();
return false;
});
return element;
}
}
);
}
bs_input_file();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h3>Example</h3>
<form method="POST" action="#" enctype="multipart/form-data">
<!-- COMPONENT START -->
<div class="form-group">
<div class="input-group input-file" name="Fichier1">
<input id="fileInput0" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group input-file" name="Fichier2">
<input id="fileInput1" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<!-- COMPONENT END -->
</form>
</div>
</div>

How to search dropdown with input on PHP

hope all be will. I face to like this problem anyone can help me.
I get the value of dropdown and I put it to input, but I am unable to search it.
I used from jQuery to get the value from bootstrap dropdown to give for input.
<!-- HTML Code With Form -->
<!-- Basic dropdown -->
<form method="post" enctype="multipart/form-data" action="team.php"
class="form-inline active-purple-3 active-purple-4" style="width:400px;
margin-top:-50px; margin-left:125px; ">
<button id="sb" class="btn btn-primary dropdown-toggle mr-4" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
style="margin-top:20px; margin-left:-140px;">Search By</button>
<div class="dropdown-menu" id="dm" style="margin-left:89px; margin-
top:-963px;">
<a class="dropdown-item" id="dl" href="#" value="ID">BY ID</a>
<a class="dropdown-item" id="dl" href="#" value="Name">Name</a>
<a class="dropdown-item" id="dl" href="#" value="Positon">Position</a>
</div>
<input type='hidden' name='thenumbers'>
<!-- Basic dropdown -->
<!-- Search form -->
<i class="fa fa-search" aria-hidden="true" style="margin-top:15px;"></i>
<input name="txtSearch" class="form-control form-control-sm ml-3 w-75"
id="in" type="text" placeholder="Search" style=" margin-top:15px; border-
radius:5px 5px 5px 5px;" aria-label="Search">
<button type="Submit" name="searchrec" class="btn btn-primary"
style="margin-left:365px; margin-top:-55px;">Search</button>
</form>
<!-- jQuery Code -->
<script>
$(document).ready(function(){
$('#dm a').on('click', function(){
$('#sb').text($(this).text());
});
});
</script>
<script>
$(function(){
//Listen for a click on any of the dropdown items
$("#dm a").click(function(){
//Get the value
var value = $(this).text();
//Put the retrieved value into the hidden input
$("input[name='thenumbers']").val(value);
});
});
</script>
<!-- jQuery Code End -->
<!-- PHP Code -->
<?php
include "Config.php";
if(isset($_POST['searchrec']))
{
$txtSearch=$_POST['txtSearch'];
$column=$_POST['thenumbers'];
if($column == "BY ID")
{
$query1="SELECT * FROM ourteam WHERE id LIKE '%$txtSearch%'";
$result1=mysqli_query($db,$query1);
$count=mysqli_num_rows($result1);
if($count == 0)
{
}else{
while($rowr=mysqli_fetch_array($result1))
{
$id=$rowr['id'];
$name=$rowr['name'];
echo "<script>alert($name);</script>";
}
}
This PHP code is just for ID and I used elesif statement also for other entities.

First, get the values not the text:
//Get the value
var value = $(this).attr('value'); // instead of text
Then, map it on the server side
$allowed_columns = ['id', 'name', 'position'];
$column = $_POST['thenumbers'];
$txtSearch = $_POST['txtSearch'];
// Check the field name
if (!in_array($column, $allowed_columns)) {
// Throw some exception, or do whatever you want
}
// Sanitize the value
$txtSearch = mysqli_real_escape_string($txtSearch);
$query1="SELECT * FROM ourteam WHERE `$column` LIKE '%$txtSearch%'";
// ...

Hide tables or forms in javascript

I would like to hide a element of HTML when I click in other element.
I have a menu with a submenu that has two options. One option shows a table and the other a form. When I click on the first option, the table appears. If after I click on the second option, the previous table and the form appear.
The menu is:
In action I get a table and in another action I get a form.
The code in HTML is:
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#" onclick="origin()">Action</a>
<a class="dropdown-item" href="#" onclick="formOrigin()">Another action</a>
</div>
<div>
<table class="table"></table>
</div>
<div>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="city">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="add">
<label class="form-check-label" for="add">Check</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
The code in Javascript is:
function origin() {
var url = "http://localhost:8000/api/v1/origin";
petition.onreadystatechange = ResponseOrigin;
petition.open("GET", url, true);
petition.send();
}
function ResponseOrigin(){
var response;
text="<tr><th>Identifier</th><th>Name</th><th>Numero</th><th>City</th></tr>";
if (petition.readyState == 4)
if (petition.status == 200) {
responser = petition.responseText;
var responseC = response.split("<");
var responseV = responseC[0];
var data = JSON.parse(responseV);
for (var i = 0; i < data.length; i++) {
text += "<tr id =" + data[i].id + "><td>" + data[i].id + "</td><td id='name'>" + data[i].name + "</td><td>" +
data[i].city + "</td>
document.getElementById('table').innerHTML = text;
document.formOrigin.style.display="none";
}
else alert("Problem with URL");
}
function formOrigin() {
var url = "http://localhost:8000/api/v1/origin";
petition.onreadystatechange = responseAddOrigin;
petition.open("POST", url, true);
petition.send(JSON.stringify({name: document.formOrigin.name.value,
city: document.formOrigin.city.value}));
}
function responseAddOrigen(){
var response;
if (petition.readyState == 4)
if (petition.status == 200) {
response = petition.responseText;
alert ("data recorded correctly");
}
else
alert("Problem with URL");
}

Since you're using bootstrap, you can try this:
$('yourTriggerElement').click(function(){
$('yourTargetElement').addClass('d-none');
});
This add bootstrap class 'd-none' to your target element, which is the same as display none. You can add some conditionals if you want to show the element again with the same trigger. Change 'yourTriggerElement' and 'yourTargetElement' with your real id's or classes.

Disable and enable search when button is not an INPUT using jQuery

I have seen examples of this being done where the button is an INPUT but I can't seem to make it work with this example below where the Input[type=button] is replaced with a Span/Icon. I can't post all my code here, but I hope this is enough to receive help.
I want to disable the span until a user clicks into the text field:
$(document).ready(function() {
$('.header-search-btn').prop('disabled', true);
$('input[type="text"].header-search').keyup(function() {
if ($(this).val() != '') {
$('.header-search-btn').prop('disabled', false);
}
});
});
.fa-arrow-right::before {
content: "\25B6";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" class="header-search" placeholder="Search" id="searchInput">
<div class="header-search-btn">
<span class="fa fa-arrow-right" aria-hidden="true" id="submitBtn"></span>
</div>

There is no disabled property on divs.
But you could simply show / hide the arrow.
$(document).ready(function() {
$('.header-search-btn').hide();
$('input[type="text"].header-search').keyup(function() {
if ($(this).val() != '') {
$('.header-search-btn').show();
} else {
$('.header-search-btn').hide();
}
});
});
.fa-arrow-right::before {
content: "\25B6";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" class="header-search" placeholder="Search" id="searchInput">
<div class="header-search-btn"> <span class="fa fa-arrow-right" aria-hidden="true" id="submitBtn"></span> </div>

If you want to the span hidden UNTIL the user clicks into the input field, then this will do it:
$(document).ready(function() {
$('.header-search-btn').hide();
$('input[type="text"].header-search').on("click", function() {
$('.header-search-btn').show();
});
});
.fa-arrow-right::before {
content: "\25B6";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" class="header-search" placeholder="Search" id="searchInput">
<div class="header-search-btn">
<span class="fa fa-arrow-right" aria-hidden="true" id="submitBtn"></span>
</div>

How to dynamically Add/Remove file type input field using jquery?

I cannot remove input field dynamically, I can add field but my remove option is not working.
I am using jquery for dynamically add/remove field and bootstrap 3 for my layout.
Here is my markup:
<div class="row margin-bottom">
<div class="col-md-12 col-sm-12">
<button type="submit" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button>
</div>
</div>
<?php $attributes = array('class' => 'form-horizontal', 'role' => 'form'); echo form_open_multipart('config/upload_image', $attributes);?>
<div class="text-box form-group">
<div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput"/></div>
</div>
<div class="form-group">
<div class="col-sm-2">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Upload</button>
</div>
</div>
<?php echo form_close();?>
Here is my jquery code:
$(document).ready(function(){
$('.add-box').click(function(){
var n = $('.text-box').length + 1;
if(n > 5)
{
alert('Only 5 Savy :D');
return false;
}
var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput'+ n +'"/></div><div class="col-sm-2"><button type="submit" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>');
$('.text-box:last').after(box_html);
box_html.slidedown('slow');
});
$('.form-horizontal').on('click', '.remove-box', function(){
$(this).parent().remove();
return false;
});
});

The error is in the remove button click event handler. You need to remove the closest form group rather than the immediate parent:
$('.form-horizontal').on('click', '.remove-box', function(){
$(this).closest(".form-group").remove();
return false;
});
check this bootply for a working example: http://www.bootply.com/x8n3dQ6wDf
EDIT
for animation on remove you can use jQuery slideUp like this:
$('.form-horizontal').on('click', '.remove-box', function(){
var formGroup = $(this).closest(".form-group");
formGroup.slideUp(200, function() {
formGroup.remove();
});
return false;
});