changing the Placeholder attribute in html input field - javascript

i have a form that has an input field that uses a datalist, what i want to do is when something is selected from that field, update another input field with what was selected, here is what i have so far
<div class='form-row'>
<div class='col-xs-12 form-group required'>
<h2><label class='control-label'>Product code</label></h2>
<input id="ItemSelect" type=text list=jobs style='font-size:21px;height: 40px;'
class='form-control'
name="Code">
<datalist id=jobs>
<?php
foreach ($this->Products as $a) {
echo '<option value=' . $a["Code"] . '>' . $a["Code"] . " - " . $a["Name"] . ' </option>';
}
?>
</datalist>
</div>
<div class='col-xs-12 form-group required'>
<input id="Placeholder" readonly class='form-control'
placeholder="Prodcut Descirption">
</div>
<script>
$("#ItemSelect")
.change(function () {
var str = "";
$("datalist option:selected").each(function () {
str += $(this).text() + " ";
});
$("#Placeholder").attr("placeholder", str).val("").focus().blur();
})
.change();
</script>
this kind of works, it is selecting the right input field to detect the change, however it's not putting the value in. if i change
$("datalist option:selected")
to
$("select option:selected")
it does put the value of all the other select fields in there any ideas?

There is no such thing as option:selected in datalists.
You can get the selected value by looking at what's currently in the input instead:
$("#ItemSelect").change(function() {
var str = $(this).val() + " ";
$("#Placeholder").attr("placeholder", str).val("").focus().blur();
});
If you only want to do this when the input value is actually present in the datalist:
$("#ItemSelect").change(function() {
var str = $(this).val() + " ";.
$('datalist option').each(function() {
if($(this).text() === str) {
$("#Placeholder").attr("placeholder", str).val("").focus().blur();
}
});
});

<datalist id=jobs>
should change datalist tag to select tag
<select id=jobs>
once you change that the below statement will work
$("select option:selected")

Related

Jquery search, hide div by id

I'm having troubles with the following code.
I'm populating a webpage with some elements from an array:
$a = array("Volvo", "BMW", "Toyota");
foreach($a as $item) {
echo '<div class="column col-3" id="'.$item.'" >';
}
and i have a simple search box:
<input class="form-input" id="filter" type="text" placeholder="filter">
It is possible to hide elements by id when user starts input?
$( document ).ready(function() {
$("#filter").keyup(function() {
each element in webpage
if div id contains userinput
keepelement
else
hideit
Can someone help?
$('#filter').keyup(function(){
$('div').each(function(){
var str = $(this).attr('id').toLowerCase();
if(str.indexOf($('#filter').val().toLowerCase())){
$(this).removeClass('d-none');
}
else{
$(this).addClass('d-none');
}
});
});
just use this code. This is for all div tags in html. if you want just for .column classed div's use $('div.column')
Try like this -
<input class="form-input" id="filter" type="text" placeholder="filter"/>
<?php
$a = array("Volvo", "BMW", "Toyota");
foreach ($a as $item) {
echo '<div class="column col-3" id="' . $item . '" >' . $item . '</div>';
}
?>
<script>
$(function () {
$("#filter").keypress(function (e) {
const val = e.target.value;
$('div.column').each(function (ind, ele) {
if (ele.id.includes(val)) {
$(ele).hide();
} else {
$(ele).show();
}
});
});
});
</script>
Here is a working code. You'd better use keyup function.
In keypress event on #filter div, it iterates div with .column class and checks if its id contains a value of filter div. If it contains, it will be hidden and others will be shown.
<input class="form-input" id="filter" type="text" placeholder="filter"/>
<?php
$a = array("Volvo", "BMW", "Toyota");
foreach ($a as $item) {
echo '<div class="column col-3" id="' . $item . '" >' . $item . '</div>';
}
?>
<script>
$(function () {
$("#filter").keypress(function (e) {
const val = e.target.value;
$('div.column').each(function (ind, ele) {
if (ele.id.includes(val)) {
$(ele).hide();
} else {
$(ele).show();
}
});
});
});
</script>

Dropdown populated with database data that adds on button click

I am confused how to populate my dropdown that adds on button click with database values . I used jQuery to do the adding function of dropdown on button click. but it seems like i cant populate the options of the select tag inside my jQuery with database values. Please help me out...
This is my php page
<?php include("connect.php");
$smt = $conn->prepare('select CompanyName From Company');
$smt->execute();
$data = $smt->fetchAll();
?>
<div class="form-group" id='TextBoxesGroup'>
<label for="layer" class="col-sm-3 control-label">Layer</label>
<div id="TextBoxDiv1" class="col-sm-6">
<select class="form-control" id='textbox1' name="company" placeholder="Company" >
<?php foreach ($data as $row): ?>
<option><?=$row["CompanyName"]?></option>
<?php endforeach ?>
</select>
</div><hr/>
</div>
<div class="form-group" >
<div class="col-md-9 text-right">
<input type='button' class="btn btn-default" value='Add +' id='addButton'>
</div>
</div>
The jQuery code used to add dropdown on button click is:
EDIT:
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>5){
alert("Only 5 Layers allowed");
return false;
}
var companies = [<?php echo "'".join("','",$data)."'";?>];
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div class="form-group" id="TextBoxesGroup"><label class="col-sm-3 control-label">Layer '+ counter + ' : </label>' +' <div id="TextBoxDiv1" class="col-sm-6"><select class="form-control" name="textbox' + counter + '" id="textbox' + counter + '" name="company" placeholder="Company">');
$.each(companies, function(key, value){
newTextBoxDiv.append('<option>'+value+'</option>');
});
newTextBoxDiv.append('</select> </div></div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
</script>
But the output shows like this:
Thanks
Well, you need to echo out the value of $row['companyName'] (the one inside your foreach loop)
Another implementation would be... say you have an array of values in your PHP.
$data = array("company A", "company B", "company C");
And the javascript...
<script>
var companies = [ <?php echo "'". join("','", $data) . "'";?> ];
//This generates : ['company A', 'company B', 'company c'];
function insertOptions()
{
$.each(companies, function(key, value){
$("#IDofSelectTag").append("<option>"+value+"</option>");
});
}
</script>

how to add new select box after clicking a button in jquery

i dont know if its possible using jquery,..i have a select option that has an array of data came from database and what i want is that whenever i click a button, another select option will popout like the first select option..
here is the code of my select option
<select class="form-control" name="room[]" id="room[]">
<option value="" default>Select</option>
<?php
$room = $subjectsClass->room();
foreach ($room as $key => $value) {
echo '<option value=" ' . $value['room_id'] .' ">' . $value['room_no'] . '</option>';
}
?>
</select>
<button type="button" class="btn btn-default" id="addRooms" >Add more Rooms?</button>
<script>
$('#addRooms').click(function(){
//append another select box with data from database,..how??
});
</script>
Let's say you have that wrapped into a div like:
<div id="the_div_of_wrapping"> all your stuff </div>
Then I would do:
var the_select = $("#room[]");
var the_id = the_select.prop("id");
var the_number_of_selects = $("select").length;
var the_div_of_wrapping = $("#the_div_of_wrapping");
the_select.clone().prop("id", the_id + the_number_of_selects);
the_div_of_wrapping.append(the_select);
.
Update:
As discussed in the comments, I would remove id since it is unnecessary and then the code would be:
var the_select = $("#room[]");
var the_div_of_wrapping = $("#the_div_of_wrapping");
the_select.clone();
the_div_of_wrapping.append(the_select);

Detecting if selected item is in a datalist

I have a bit of JQuery that I am trying to use to detect if the value that is in a data list select box is actually in the list, here is what i have.
<div class='form-row'>
<div class='col-xs-12 form-group required' style="margin-top: -2px; margin-bottom: 0px;">
<h2>
<label class='control-label' style="font-size: 20px;">
Product code
</label>
</h2>
<input required id="ItemSelect" list=jobs style='font-size:21px;height: 40px;' class='form-control' name="Code">
<datalist id="jobs">
<?php
foreach ($this->Products as $a) {
$inputValue = " " . htmlentities($a["Code"] . " | " . $a["Name"]) . " ";
echo '<option>' . $inputValue;
}
?>
</datalist>
</div>
$('#submit').on('click', function (e) {
var datalistval = $('#ItemSelect').val();
console.log(datalistval);
console.log($("#ItemSelect option[value='" + datalistval + "']").length)
if ($("#ItemSelect option[value='" + datalistval + "']").val() === undefined) {
console.log("not there");
} else {
console.log(" there");
}
});
currently with this if i enter a value that is not in the list it comes back as no there, but it also comes back as not there if i do select one out of the list.
Here out the outputs of the console.logs
console.log(datalistval); // X01A172 | Sub Assembly 2
console.log($("#ItemSelect option[value='" + datalistval + "']").length) // 0
not there

Showing a specific graphic onchange

I currently have a piece of JavaScript that takes the value and the selected text from the PHP dynamic dropdown menu and passes it through to a input box for editing.
Questions:
How could I pass a PHP item through the JavaScript to show the specific image for the selected value when it is selected?
How could I make the selected text echo into the input box on select?
$('#captionSelect').change(function(){
$('#captionInput').val($("#captionSelect option:selected").html()).show();
});
<select name="captionSelect" id="captionSelect">
<?php foreach ($get_images as $image){
echo '<option value="'.$image['id'].'">'.$image['description'].'</option>';
};
?>
</select>
<select name="captionSelect" id="captionSelect">
<?php
foreach ($get_images as $image){
echo '<option title="'.$image['thumbname'].'" value="'.$image['id'].'" id="captionOption_'.$image['id'].'">'.$image['description'].'</option>';
};
?>
</select>
<input id="captionInput" type="text" />
<img id="preview" />
<script type="text/javascript">
$('#captionSelect').change(function(){
var id = $(this).val();
var caption = $('#captionOption_' + id).html();
var thumbname = $('#captionOption_' + id).attr('title');
$('#captionInput').val(caption);
$('#preview').attr('src', '/path/to/pictures/' + thumbname + '.jpg');
});
</script>

Categories