We Keep Coding

Create fields dynamically in js

I create dynamic inputs and selects in js by clicking the button.
To fill in the select, I query a table in the database. The problem I have is that whenever I click the button to create a new input and select, it clears the previous select and shouldn't.
Code:
var cars = [
{colour: "red", },
{colour: "white", },
{colour: "black", },
];
var campos_max = 10;
var x = 0;
$('#add_field').click (function(e) {
e.preventDefault();
if (x < campos_max) {
$('#listas').append('<select class="form-control1 Reff" name="Ref[]"></select>');
}
var html = $('.Reff').html("");
cars.forEach(element => {
html += `<option value="`+element.colour+`">`+element.colour+`</option>`;
});
$('.Reff').html(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listas"></div>
<button type="button" id="add_field" class="btn btn-warning caixa"><span class="material-icons">add</span></button>
I intended that when clicking the button to create a new select and input, do not delete the value that I already placed in the previous select.
The problem is that it always queries the database and then returns the data back to the previous select, but I don't know how to solve it.
Can anyone help?

Enter to select and activate href link

I have setup an autocomplete searchbar with jquery. When I type a part of a searchterm the suggestions pop-up, when I click the suggestion I get redirected to a new page (of the suggestion) which is good.
The problem I have is when I type the a part of a searchterm or the full searchterm there is no action.
What I want is: When I type a searchterm or a part of a searchterm and I press Enter I get redirected to the page of the first suggestion. When I press hover over the suggestion press Enter right now, the first suggestion just comes up in the searchbar.
How can I go about this?
Javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/black-tie/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
$(function() {
var projects = [{
label: "Bitcoin (BTC)",
icon: "./alt/alt_logo/bitcoin.png",
href: "./alt/alt_info/bitcoin.html"
}, {
label: "Ethereum (ETH)",
icon: "./alt/alt_logo/ethereum.png",
href: "./alt/alt_logo/bitcoin.png"
}, {
label: "Litecoin (LTC)",
icon: "./alt/alt_logo/litecoin.png",
href: "./alt/alt_logo/bitcoin.png"
}, {
label: "Cardano (ADA)",
icon: "./alt/alt_logo/cardano.png",
href: "./alt/alt_logo/bitcoin.png"
}];
$(".field_values").autocomplete({
source: projects,
create: function() {
$(this).data('ui-autocomplete')._renderItem = function(ul, item) {
return $('<li>')
.append('<img class="icon" src="' + item.icon + '" />' + item.label + '<br>' + '')
.appendTo(ul);
};
}
});
});
PS: Dont mind the wrong href in var projects
EDIT:
When I submit the form by pressing enter or hitting the button. The page reloads but stays on the same page.
HTML:
<div class="searchbar">
<form id="submitsearch">
<input class="field_values" id="autocomplete" placeholder="Search..."/>
<button type="submit" id="searchbutton" class="icon" ><i class="fa fa-search"></i></button>
</form>
</div>
I also tried <form action="./js/searchbar.js"> but that just sends me to a webpage with the javascript displayed on it

You need to add autoFocus: true, to the autocomplete
so that it becomes:
$("#field_values").autocomplete({
autoFocus: true,
source: projects,
This only puts the data into the form field.
To handle the data, you will need to do the following:
Wrap the input in a form tag
Make sure you have a submit button in the form
You will then be able to hit enter to fill in the field and you will have to hit enter again to submit the form.

Why does my button not print out the code and select the right option?

I'm relatively new to Web Development and for my coursework I've been asked to design a website.
I'm having a problem with the following code - the idea behind it is that the user selects a puppy from the drop down menu (the image is displayed along with details about the pup) then they can press the 'Adopt' button and adopt the dog. It's all for academic purposes so just now all I'm trying to do is output saying 'You adopted (the dog's name)' hopefully then I will be alter it so the user can fill out a form with details.
However, just now the button won't work at all and nothing is printed out. The two parts of code work perfectly separately but together them seem to fall apart.
Any help or insight would be appreciated as this is properly caused by a silly mistake on my part that I just can't see.
https://jsfiddle.net/heh4d63j/
HTML
<select id="selector">
<option>Select product</option>
<option value="1">John</option>
<option value="2">Yana</option>
<option value="3">Fifi</option>
<option value="4">Ruby</option>
</select>
<div>
Name: <span id="dog-title"></span>
<br>
Gender: <span id="dog-gender"></span>
<br>
Age: <span id="dog-age"></span>
</div>
<div>
<img id="dog-image" src="someimage.png" />
</div>
<button onclick="adoptDog(value)">Adopt Dog</button>
<p id="demo"></p>
CSS
#dog-image
{
width:300px;
height:auto;
border:1px solid black;
padding:5px;
}
JAVASCRIPT
var data = {
"1" : {
img: "https://s-media-cache-ak0.pinimg.com/736x/a0/e9/cd/a0e9cddfdce31044874f02f781a30245.jpg",
label: "John" ,
gender: "Male",
age: "11 weeks" },
"2" : {
img: "https://s-media-cache-ak0.pinimg.com/564x/69/62/7f/69627f67a78540334ef54da048d423b6.jpg",
label: "Yana",
gender:"Female",
age:"10 weeks" },
"3" : {
img: "http://i45.photobucket.com/albums/f91/sarahriley1983/DSC01542.jpg",
label: "Fifi",
gender:"Female",
age: "8 weeks" },
"4" : {
img: "http://www.dogster.com/wp-content/uploads/2015/05/rhodesian-ridgeback-puppies-10.jpg",
label: "Ruby",
gender:"Female",
age:"12 weeks" },
};
function adoptDog(value) {
var dogName="Ruby";
document.getElementById("demo").innerHTML = "You adopted " + data[value].label
}
$('#selector').change(function(value) {
var value = $(this).val();
if (data[value] != undefined)
{
$('#dog-image').attr('src', data[value].img);
$('#dog-title').text(data[value].label);
$('#dog-gender').text(data[value].gender);
$('#dog-age').text(data[value].age);
}
});
Thanks again for any help that can be offered. :)

JSFiddle doesn't support inline-JS like onclick by default (check this). You should select 'No wrap' Load Type option in JavaScript settings (click on the "JAVASCRIPT" title in the JavaScript panel).
Also you forgot to add jQuery. Use JavaScript settings for this or "External Resources" section in the left sidebar. And bind click event to your button with jQuery like this:
function adoptDog() {
var val = $('#selector').val();
$("#demo").html("You adopted " + data[val].label);
}
$("#adopt").click(adoptDog);
Html:
<button id="adopt">Adopt Dog</button>
JSFiddle demo
Note: you can use your browser's console in JSFiddle to look at thrown JavaScript errors.

Three things:
1. Value is defined as 'var' inside the onchange handler, cannot be visible from outside. Create a visible variable for that value, i.e. window.value (but I'd suggest to use a better name, not as generic as 'value').
2. The onchange event for the select element is defined in the window scope, before the select is actually loaded and cannot be seen yet. Invoke it in a document ready function.
3. The button onclick attribute is a function scope, reference the global 'value' variable by explicitly referring to it as 'window.value'.
JS:
window.value = "";
function adoptDog(value) {
if (value) {
var dogName = "Ruby";
document.getElementById("demo").innerHTML = "You adopted " + data[value].label
}
}
$('document').ready(function () {
if (!document.body) {setTimeout(ready, 50); return;}
$('#selector').change(function(ev) {
value = $(this).val();
if (data[value] != undefined) {
$('#dog-image').attr('src', data[value].img);
$('#dog-title').text(data[value].label);
$('#dog-gender').text(data[value].gender);
$('#dog-age').text(data[value].age);
}
});
});
HTML:
<button onclick="adoptDog(window.value)">Adopt Dog</button>

Why does jQuery dropdown require two clicks?

When I click on the button labeled "Continents & Oceans," a dropdown list appears - but only if I click on the button twice. I'd like it to work with the first click.
Is there something wrong with my code, or do I need to add something to make the dropdown drop down on the first click?
This is a jQuery function, but it also includes my first experiment with AJAX, so maybe that's the problem.
<input type = "button" id = "konoce" value = "Continents & Oceans" class="btn btn-konoce"
<div id = "div-konoce"> </div>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#konoce").click(function(event) {
if ($('#div-konoce').html() == '') {
$.get( "/2b/inc/ajax/db-lists/world/konoce.php", { name: "KonOce" }, function(data) {
$('#div-konoce').html(data);
});
}
else {
$('#div-konoce').html('');
}
});
});
</script>
EDIT:
I revised my code per the answer below. However, it still takes two clicks to open the dropdown.
<button type = "button" id = "konoce" class="btn btn-konoce">Continents & Oceans</button>
<div id = "div-konoce" style="margin: 0 -5px;"> </div>

Your line:
if ($('#div-konoce').html() == '')
checks if the "div-konoce" div is empty, but it's not:
<div id = "div-konoce"> </div>
There's a space there... meaning not == ''
Remove the space and try again.

you are not closing your input - it should be:
<input type = "button" id = "konoce" value = "Continents & Oceans" class="btn btn-konoce" />
and I am not sure why you have this as an input and not a button, since it not used to gather information - but acts as a trigger fo the click.:
<button type = "button" id = "konoce" class="btn btn-konoce">Continents & Oceans</button>

One tip is ,Why are you always emptying $('#div-konoce') , it will cause one ajax request per click . But if you only wrote the first if , it will show the previously loaded menu after the first click onwards .
<div id = "div-konoce"></div>
if ($('#div-konoce').html()=='') {
$.get( "/2b/inc/ajax/db-lists/world/konoce.php", { name: "KonOce" }, function(data) {
$('#div-konoce').html(data);
});

how to change view /model on button click?

I make a simple demo in which one button present "openpopup" .On click button a pop up screen is display in which user can select multiple element .Initially first and second by default selected .If you run application you will notice there is two column also present. (It is because first two option are selected in multiple selected box).When you open the pop up and select third option it automatically create third column in view .I want this should happen only button click "select" button on pop up screen .In other words when user select or dissect the check box it automatically reflect in model and display in view .I want it will not reflect on view till user didn't press "select" button .I want every thing after "select" button
here is my code
<button ng-click="openPopover($event)">
openpopup
</button>
<script id="my-column-name.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">My Popover Title</h1>
</ion-header-bar>
<ion-content>
<ul class="list" ng-repeat="item in data">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="item.checked" ng-click="itemCheckedUnCheckedhandler(item)">
</label>
{{item.label}}
</li>
</ul>
<button ng-click="closePopover()">select</button>
</ion-content>
</ion-popover-view>
</script>

The best way, in my opinion, would be to bind the checked items to a mediating variable (checkedItems in this example), that doesn't immediately affect the view
<input type="checkbox" ng-model="checkedItems[$index]" ng-click="checkboxClicked($index)">
"checkboxClicked" function simply updates the checked status of the current item
$scope.checkcoxClicked = function(n){
$scope.checkedItems[n] = !$scope.checkedItems[n];
};
And on popup close (NOTE that function is invoked only on "select" button click and not when clicking outside the popup), we simply update the view-binded data variable with the new checked / unchecked statuses
$scope.closePopover = function() {
for (var i = 0; i < $scope.data.length; i++){
$scope.data[i].checked = $scope.checkedItems[i];
}
$scope.popover.hide();
};
Here's a working plunker.

you just change little bit on your code:
like:
//***for html template
<input type="checkbox" ng-model="item.tempChecked" ng-click="itemCheckedUnCheckedhandler(item)">
//*for Controller
//****Add one new field("tempChecked") on your data object*
$scope.data = [{
"label": "Invoice#",
"fieldNameOrPath": "Name",
"checked": true,
'tempChecked': true
}, {
"label": "Account Name",
"fieldNameOrPath": "akritiv__Account__r.Name",
"checked": true,
'tempChecked': true
}, {
"label": "Type",
"fieldNameOrPath": "Type__c",
"tempChecked": false,
'checked': false
}, {
"label": "SO#",
"fieldNameOrPath": "akritiv__So_Number__c",
'checked': false,
"tempChecked": false
}]
//****"some change on your select button"***
$scope.closePopover = function() {
for (var d in $scope.data) {
if ($scope.data[d].tempChecked == true) {
$scope.data[d].checked = true;
} else {
$scope.data[d].checked = false;
}
}
$scope.popover.hide();
};