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>
<script>
$(document).ready(function(){
$("#find_jobs").click(function(){
$("#job").css("display","block");
$("#freelancer").css("display","none");
});
$("#find_freelancer").click(function(){
$("#job").css("display","none");
$("#freelancer").css("display","block");
});
$(".submitss").click(function(){
job_id = $(".job_search").attr('id');
job_val = $(".job_search").val();
alert(job_id);
alert(job_val);
});
});
</script>
<form class="form-horizontal" role="form" method="post" id="myform">
<div class="input-group" id="header-search">
<div class="input-group-btn">
<div class="btn-group" role="group">
<i class="fa fa-search"></i>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="margin-top: 10px;"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-left" role="menu">
<div class="form-group">
<ul>
<li>Find Jobs</li>
<li>Find Freelancers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<input type="text" id="job" class="form-control job_search" placeholder="Search Job" name="job_search" style="display:block;"/>
<input type="text" id="freelancer" class="form-control freelancer_search" placeholder="Search Freelancer" name="freelancer_search" style="display:none;"/>
</div>
</form>
In this code, I have a search box form with list ul Now, What am I doing here when I select find_job then search job input field active and If I selected find_freelancer then freelancer input field active. Now, What I required When I click on class="submitss" or press enter key then it shows job_id and job_val but if I select then it shows freelancer_id and freelancer_val.
So, How can I do this? Please help me.
Thank You
If I understood you correctly, this should do the job. Basically if input#job is visible show job, else show freelancer. I don't really see the need to use two different input fields, but ok.
function submit() {
if ($("#job").css("display") === "block") {
job_id = $(".job_search").attr('id');
job_val = $(".job_search").val();
} else {
job_id = $(".freelancer_search").attr('id');
job_val = $(".freelancer_search").val();
}
alert(job_id);
alert(job_val);
}
$(document).ready(function(){
$(window).keydown(function(event) {
if (event.keyCode == 13) { // enter key
submit();
event.preventDefault();
return false;
}
});
$("#find_job").click(function () { // find_job not find_jobs
$("#job").css("display", "block");
$("#freelancer").css("display", "none");
});
$("#find_freelancer").click(function() {
$("#job").css("display", "none");
$("#freelancer").css("display", "block");
});
$(".submitss").click(submit);
});
Also
<a href="javascript:void();" class="submitss" id="submitss">
should be
<a href="javascript:void(0);" class="submitss" id="submitss">
or you get
Uncaught SyntaxError: Unexpected token )
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.
I'm just learning Mysql/PHP and I'm trying to update a textfield depending on the selected value from the dropdownlist. I have read through several tutorials, and tried to apply them, but I cannot get this working...
Dont mind my messy code, will clean later !!!
Page with dropdown list and texfields:
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
if (isset($_SESSION['logged_in'])) {
include("/includes/connect.php");
$sql="SELECT id, nr, model, serienummer, capaciteit, persoon, opmerking, datumuitgeleend, datumretour FROM ipads WHERE uitgeleend='Ja' ORDER BY nr";
$stmt = $db->prepare($sql);
$stmt->execute();
$result = $stmt->fetchAll();
if(isset($_POST['btnAdd'])) {
$id=$_REQUEST['id'];
$persoon=$_POST['persoon'];
$datumuitgeleend=$_POST['datumuitgeleend'];
$datumretour=$_POST['datumretour'];
$opmerking=$_POST['opmerking'];
$sql="UPDATE ipads SET uitgeleend='Ja', persoon='$persoon', datumuitgeleend='$datumuitgeleend', datumretour='$datumretour', opmerking='$opmerking' WHERE id='$id'";
$result=$db->query($sql);
header("location:index.php");
}
include("/includes/get_header.php");
?>
<h1 class="page-title">iPad uitlenen</h1>
<ul class="breadcrumb">
<li>Home </li>
<li class="active">Nieuw</li>
</ul>
</div>
<form id="gegevensForm" class="col-xs-4" form method="POST" action="ipad-uitlenen.php">
<div class="form-group">
<label>Selecteer leen iPad</label>
<select name="id" class="form-control">
<option value="">Selecteer een leen iPad</option>
<?php foreach($result as $row): ?>
<option data-datumuitgeleend="<?= $row['datumuitgeleend']; ?>" data-datumretour ="<?= $row['datumretour']; ?>" data-opmerking="<?= $row['opmerking']; ?>" data-persoon="<?= $row['persoon']; ?>" value="<?= $row['id']; ?>"><?= $row['nr']; ?> / <?= $row['serienummer']; ?> / <?= $row['model']; ?> / <?= $row['capaciteit']; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label>Naam</label>
<input type="text" class="form-control" name="persoon" value="" />
</div>
<div class="form-group">
<label>Datum uitgeleend</label>
<input type="text" id="datepicker" class="form-control" name="datumuitgeleend" value="" />
</div>
<div class="form-group">
<label>Datum retour</label>
<input type="text" id="datepicker1" class="form-control" name="datumretour" value="" />
</div>
<div class="form-group">
<label for="comment">Opmerking</label>
<textarea class="form-control" rows="5" id="comment" name="opmerking" value=""></textarea>
</div>
<button class="btn btn-primary pull-right" name="btnAdd" type="submit"><i class="fa fa-save"></i> Opslaan</button>
<input type="button" name="btnCancel" value="Annuleer" class="btn btn-primary pull-left">
<?php
include('../includes/get_footer.php');
?>
</form>
<?php
}
?>
get_header.php
<html lang="en"><head>
<meta charset="utf-8">
<title>Admin Control Panel</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="stylesheets/theme.css">
<link rel="stylesheet" type="text/css" href="stylesheets/premium.css">
<link rel="stylesheet" href="./resources/demos/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="lib/jQuery-Knob/js/jquery.knob.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("select[name='id']").on('change',function() {
$("input[name='persoon']").val($(this ).children(":selected").data( "persoon" ));
$("input[name='datumretour']").val($(this ).children(":selected").data( "datumretour" ));
$("input[name='datumuitgeleend']").val($(this ).children(":selected").data( "datumuitgeleend" ));
$("input[name='opmerking']").val($(this ).children(":selected").data( "opmerking" ));
; })
;})
</script>
</head>
<body class=" theme-blue">
<style type="text/css">
#line-chart {
height:300px;
width:800px;
margin: 0px auto;
margin-top: 1em;
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
color: #fff;
}
</style>
<script type="text/javascript">
$(function() {
var uls = $('.sidebar-nav > ul > *').clone();
uls.addClass('visible-xs');
$('#main-menu').append(uls.clone());
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker1" ).datepicker();
});
</script>
<script type="text/javascript">
$(function() {
$(".knob").knob();
});
</script>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="" href="index.html"><span class="navbar-brand"><span class="glyphicon glyphicon-phone"></span> iPad Control Panel</span></a></div>
<div class="navbar-collapse collapse" style="height: 1px;">
<ul id="main-menu" class="nav navbar-nav navbar-right">
<li class="dropdown hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user padding-right-small" style="position:relative;top: 3px;"></span>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin Panel</li>
<li><a tabindex="-1" href="logout.php"><i class="glyphicon glyphicon-off"></i> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="sidebar-nav">
<ul>
<li><img src="./images/ipad.png" width="16" height="16"> Overzicht iPads</li>
<li><ul class="dashboard-menu nav nav-list collapse in">
<li><span class="fa fa-caret-right"></span> Beschikbaar</li>
<li><span class="fa fa-caret-right"></span> Uitgeleend</li>
<li><span class="fa fa-caret-right"></span> Geschiedenis</li>
</ul></li>
</div>
<div class="content">
<div class="header">
<div class="stats">
</div>
Table :
click here for table
Site :
Click here for example
To get the on change value with php you have you reload the page if the select box changes a better alternative would be to use js.
You could do something like:
$("select[name='id']").on('change',function()
{$("input[name='persoon']").val($(this).val()); //this will put the select value in text field
})
the above code will put select $row['id'] in text box if you want $row['persoon'] to be updated you might want to update your option html first to have $row['persoon'] as any of the attribute something like
<option data-datumuitgeleend="<?= $row['datumuitgeleend']; ?>" data-datumretour ="<?= $row['datumretour']; ?>" data-opmerking="<?= $row['opmerking']; ?>" data-persoon="<?= $row['persoon']; ?>" value="<?= $row['id']; ?>"><?= $row['nr']; ?> / <?= $row['serienummer'];
an you javascript should update this value like use:
$("select[name='id']").on('change',function( { $("input[name='persoon']").val($(this ).children(":selected").data( "persoon" ));
$("textarea[name='opmerking']").html($(this ).children(":selected").data( "opmerking" ));
$("input[name='datumretour']").val($(this ).children(":selected").data( "datumretour" ));
$("input[name='datumuitgeleend']").val($(this ).children(":selected").data( "datumuitgeleend" ));
})
If you're not using jQuery Way to do in plain js:
var select =document.getElementsByName('id')[0];
select.addEventListener("change", function() {
var options = this.options;
var persoon = options[options.selectedIndex].getAttribute('data-persoon');
document.getElementsByName('persoon')[0].value = attr;
var datumuitgeleend= options[options.selectedIndex].getAttribute('data-datumuitgeleend');
document.getElementsByName('datumuitgeleend')[0].value = attr;
var opmerking= options[options.selectedIndex].getAttribute('data-opmerking');
document.getElementsByName('opmerking')[0].value = attr;
var datumretour = options[options.selectedIndex].getAttribute('data-datumretour');
document.getElementsByName('datumretour')[0].value = attr;
}
And also change your sql select statement to have datumretour, datumuitgeleend,
$sql="SELECT id, nr, model, serienummer, capaciteit, datumretour, datumuitgeleend, persoon, opmerking FROM ipads WHERE uitgeleend='Ja' ORDER BY nr";
Hope it helps!
I did mind the messy code, but mostly the lack of minimum code to reproduce the problem you are facing, so forgive me if I did not distill your question properly.
I think the problem you describe boils down to "how to populate a <textarea> whenever the chosen <select> option changes?"
$(function() {
var select = $('select[name="pickAnOption"]');
function update(select) {
var value = select.val(),
textarea = $('textarea[name="describeTheOption"]');
if (value) {
textarea.attr('disabled', false).text('You picked ' + value);
}
else {
textarea.attr('disabled', true).text('Pick an option first');
}
}
select.on('change', function() {
update(select);
});
update(select);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Choose wisely:
<select name="pickAnOption">
<option value="">Pick one</option>
<option value="a">option A</option>
<option value="b">option B</option>
<option value="c">option C</option>
</select>
<br>
Gives some options:
<textarea name="describeTheOption"></textarea>
</form>
As to explain what is going on, here's the flow of the javascript broken down into pieces
$(function() {, this function is executed when the document is ready (all elements are available, assets such as images/stylesheet may or may not be loaded yet)
var select = ..., store a reference to the <select> element as we will be using it multiple times and don't fancy to look it up constantly
function update() {..}, as we want to update both on changes and the first time the page is loaded (as some browsers remember form state across page refresh), we want a function to call for these occasions
var value = select.val(), take the selected option value
(var) textarea = $(..), store a reference to the textarea
if (value), if an option with a non-false(-ish) value (in this example: value is not the empty value we've added to the 'Pick one' option), execute the code in this block
$(textarea).attr('disabled', false) make sure the textarea becomes editable (not disabled)
.text('You picked ' + value), set the contents of the textarea to display the option value
else, pretty much the same as above, but acting on a non-value (disabling the textarea, setting a default text).
select.on('change', function() {..}), listen to change events on the <select> element and trigger the update when another option is picked
update(select), initially trigger the update to ensure the textarea is on par with the selected option.
It is a matter of taste if you like to have the initial update (I prefer to do this), it would save one additional function if you don't.
Or you could use an alternative notiation, should you want to prevent a stand-alone function, for example
$('select[name="pickAnOption"]')
.on('change', function() {
// update code here.
})
.change(); // invoke the change handler immediately
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;
});