We Keep Coding

document.getElementById() not working as intended with multiple ids

I have an issue with document.getElementById(). Basically I have different forms each one with a different id and I'm using a bit of Javascript to replace some classes and add dinamically file name after upload.
That should be really easy, but I don't know why even if the ids are totally unique I get a weird behavior: whatever is the form in which I submit a file javascript will apply changes always on the first of them.
function spinnerLoad(){
document.getElementById('file-name[[${id}]]').textContent = this.files[0].name;
document.getElementById('spinner[[${id}]]').classList.replace('fas', 'spinner-border');
document.getElementById('spinner[[${id}]]').classList.replace('fa-file-upload', 'spinner-border-sm');
document.getElementById('uploadForm[[${id}]]').submit()
}
/*I'm using Bootstrap for my styling rules*/
/*${id} variable is server-side and it's there to make unique each form, I'm using Thymeleaf template engine*/
<form th:id="'uploadForm'+${id}" method="post" enctype="multipart/form-data" th:action="#{/upload/{id} (id=${id})}">
<label for="file-upload" class="btn btn-outline-success">
<span th:id="'spinner'+${id}" class="fas fa-file-upload"></span> <b>Upload file:</b> <i th:id="'file-name'+${id}">No file selected</i>
</label>
<input id="file-upload" type="file" name="multipartFile" accept="application/pdf" style="display: none" th:onchange="spinnerLoad()"/>
</form>
I googled the problem but I didn't manage to find a specific answer to my issue, so that's why I'm here bothering you.
I hope someone can help my figure this out, thank you.

You get a lot of repeating code and that can be hard to maintain. Here I placed the event listener on the the parent <div> to all the buttons. Then I need to test if is a button. And there is no need for an id for each button.
Actually, if you are just replacing a class name you don't even need to do the test (if()), because replace() will only do the replacement when the old value is present. This should be fine:
buttons.addEventListener('click', e => {
e.target.classList.replace('btn-success', 'btn-danger');
});
But here is the full example with the test:
var buttons = document.getElementById('buttons');
buttons.addEventListener('click', e => {
if (e.target.nodeName == 'BUTTON') {
e.target.classList.replace('btn-success', 'btn-danger');
}
});
.btn-success {
background-color: green;
}
.btn-danger {
background-color: red;
}
<div id="buttons">
<button class="btn-success">Button 1</button>
<button class="btn-success">Button 2</button>
<button class="btn-success">Button 3</button>
</div>

You're missing the css that would make this work, but otherwise your example is functional. However, it can be done more simply by working on the buttons as a class instead of individually.
var btns = document.getElementsByClassName("btn");
var addDanger = function(){
this.classList.replace('btn-success', 'btn-danger')
};
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', addDanger, false);
};
.btn {height:20px; width: 50px;}
.btn-success {background-color:green}
.btn-danger {background-color:red}
<button id="btn1" class="btn btn-success"></button>
<button id="btn2" class="btn btn-success"></button>
<button id="btn3" class="btn btn-success"></button>

How to toggle show and hide for two forms present in the same div?

I have two forms present in a div, form1 is visible when the page loads, and if I click the next button form1 is hidden and form2 is shown, which is working as expected.
Now I want to achieve the reverse of above scenario which is on click of a back button, form2 should be hidden and form 1 is shown.
Here's javascript code I have so far..
function switchVisible() {
document.getElementById("disappear").innerHTML = "";
if (document.getElementById('newpost')) {
if (document.getElementById('newpost').style.display == 'none') {
document.getElementById('newpost').style.display = 'block';
document.getElementById('newpost2').style.display = 'none';
} else {
document.getElementById('newpost').style.display = 'none';
document.getElementById('newpost2').style.display = 'block';
}
}
}
So basically I am looking for a way to achieve toggle functionality for two forms present in the same div using javascript and setting their display property.

Use a variable stepCount and then according to the value of count display appropriate form.
Like initialise the stepCount with 0, then on click of next increment it by 1 and check condition if stepCount is 1 show second form
Similarly from there if back button is pressed decrement the stepCount by 1 and check condition if stepCount is 0 show first form
Do all this on click of appropriate button click event

Make two button elements
<button id="next"></button>
<button id="back"></button>
You can use jquery (or plain javascript) for this, but I personally prefer jquery.
$("#next").click(function {
$("#newpost").hide();
$("#newpost1").show();
});
$("#back").click(function {
$("#newpost").show();
$("#newpost1").hide();
});
(Here 'newpost' and 'newpost1' are the id's of the two form elements)
You can use a similar format if you want to use plain javascript.
Add this
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</head>

You can also use link button and provide URL for particular form in this and hide back link button when click on back that time show only Next button.
e.g.
Next
Previous
$("#btnNext").click(function {
$("#btnNext").hide();
$("#btnPrevious").show();
});
$("#btnPrevious").click(function {
$("#btnPrevious").show();
$("#btnNext").hide();
});

You can use toggle function to show hide div.
$('#newpost2').hide();
$("#Toggle").click(function() {
$(this).text(function(i, v) {
return v === 'More' ? 'Back' : 'More'
});
$('#newpost, #newpost2').toggle();
});
.one {
height: 100px;
width: 100px;
background: #eee;
float: left;
}
.two {
height: 100px;
width: 150px;
background: #fdcb05;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Toggle' class='pushme'>More</button>
<div class="one" id='newpost'>
<p>Show your contain</p>
</div>
<div class="two" id='newpost2'>
<p>Hide your contain</p>
</div>

This fiddle for button disappear:
$("#next").click(function()
{
$("#next").hide();
$("#back").show();
});
$("#back").click(function() {
$("#back").show();
$("#next").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="button" id="next" value="Next"/>
<input type="button" id="back" value="Back"/>
<button class="btn btnSubmit" id="Button1" type="button" value="Click" onclick="switchVisible();">NEXT</button>
<button type="button" class="btn btnSubmit" onclick="previousVisible();" >BACK</button>
simply use this jquery:
function switchVisible()
{
$("#newpost").hide();
$("#newpost2").show();
}
function previousVisible()
{
$("#newpost").show();
$("#newpost2").hide();
}
your updated fiddle
Or you may do like this:
<button class="btn btnSubmit" id="Button1" type="button" value="Click" onclick="form(1);">NEXT</button>
<button type="button" class="btn btnSubmit" onclick="form(2);" >BACK</button>
function form(a)
{
if(a==1)
document.getElementById("newpost").style.display="none";
else
document.getElementById("newpost2").style.display="block";
}

Button in div not working

Initially my div (with the button inside) is hidden, when I press a button I make 10 clones of that div.
I want to be able to use each of the buttons seperatly (they all have the same attributes and class). At the moment I cannot use the any of the buttons.
<div class="search-result">
<h3>Titel(year)</h3>
<button class="btn btn-warning btnFavorite">Favorite</button>
<button id="btnArkiv" class="btn btn-warning btnFAvorite">Arkiv</button>
</div>
$(".btnFavorite").on("click", function(){
alert("hej");
var input = $("#search").val();
saveFavorite(favoriteMovie);
});
Method to clone the div x times.
for(movie in search){
console.log(search[movie].Title);
favoriteMovie = search[movie].Title;
$(".search-result:first").clone().appendTo(".search").find('h3').text(search[movie].Title);
$('#your_element').attr('id','the_new_id');
}

I've replaced the input elements with actual buttons and delegated the event to the body, so that newly inserted movie buttons automatically use the same event handler. The div cloning function can also use some updates, but it should work and that's not the question. :)
You might have to update any function that uses the value as well, since it's a data-value attribute now. Hope it helps.
PS: I don't usually use jQuery, so untested and there might be syntax errors.
<div class="search-result">
<h3>Titel(year)</h3>
<button data-value="Favoritfilm" class="btn btn-warning btnFavorite">buttonText</button>
<button id="btnArkiv" data-value="Arkiv" class="btn btn-warning">buttonText</button>
</div>
$("body").on("click", ".btnFavorite", function() {
alert("hej");
var input = $("#search").val();
saveFavorite(favoriteMovie);
});

It seems that you are using click event without using the right ID.
$(".btnFavorite") here you need to use the right ID, which is related to the button you are going to activate. In this case "btnArkiv".

var movieList = [
{
'ID': 1,
'title': 'Movie 1',
'year': 1988
},
{
'ID': 2,
'title': 'Movie 2',
'year': 2017
}
];
$(".btnFavorite").on("click", function(){
alert("hej");
var input = $("#search").val();
saveFavorite(favoriteMovie);
});
$(".btnAdd").click(function() {
for(index in movieList){
$(".list").append("<div class='search-result' data-id=" + movieList[index].ID + "><h3>" + movieList[index].title + " (" + movieList[index].year + ")</h3><button class='btn btn-warning btnFavorite' data-action='favoritize-id-" + movieList[index].ID + "'>Favorite Movie " + movieList[index].ID + "</button></div>");
}
});
.search-result {
background-color: #EEE;
padding: 20px;
margin: 15px 0;
}
.search-result h3 {
display: inline-block;
}
.search-result button {
display: inline-block;
margin: 0 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-warning btnAdd">Show Movie List</button>
<div class="list"></div>

According to the docs for .on this is why you are finding that only your first set of buttons work after cloning the result 10 times:
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated events to attach event handlers.
You can read more about it here: http://api.jquery.com/on/.
Since there isn't much information to go on, one way you can make all of your buttons use the same event handler is by using event delegation as CBroe mentioned in the comments.
Check out the snippet I have here with all the buttons working.
$(".search").on("click", function(e) {
if ($(e.target).hasClass('btnFavorite')) {
alert('hej');
}
});
for (var i = 0; i < 10; i++) {
$(".search-result:first").clone().appendTo(".search");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<div class="search-result">
<h3>Titel(year)</h3>
<input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite">
<input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning">
</div>
</div>
In the snippet, I put a listener on the parent container and then check that the clicked target is the correct button before alerting.

Jquery a .Show() is not fully working

I have two functions. One that hides a Edit and Delete button, and shows a Save button, and another one that does the opposite (hides save, shows edit and delete).
Right now the first button works: Save appears and Edit/Delete disappear, but the second function does not work: It hides Save but only shows Delete...somehow Edit is not being shown.
button code within a <td>
<td class="col-lg-3 col-lg-offset-1">
<span style="visibility:hidden" class="ID">#Html.DisplayFor(modelItem => item.ID)</span>
<span class="item-edit-button">
<button type="button" onclick="someFunction(this)" class=" btn btn-warning col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
</span>
<span class="item-save-button">
<button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
</span>
<span class="item-delete-button"> // no use right now - ignore
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>
</td>
the JQuery
<script>
function someFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
</script>
http://jsfiddle.net/isherwood/BrP2a/
Hopefully I am just making some silly mistake.
ANSWER
I was accidentally hiding the button, not the span, thus when I tried to show my edit button's span it did not work as the button itself was hidden originally to fix this I had to use.
function someFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}

You have hide the actual button by $(element).hide(); in someFunction and you are showing item-edit-button span so actual button is still hidden. Try this,
function saveFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-edit-button button").show();
$(element).closest("td").find("span.item-delete-button").show();
}

You have to define the function before your HTML elements that mean if your elements are in body tag then you have to define the function in the head tag
then you can change the code little bit
function someFunction(element)
{
$(element).hide();
$(element).siblings("span.item-save-button").show();
$(element).siblings("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).hide();
$(element).siblings("span.item-edit-button").show();
$(element).siblings("span.item-delete-button").show();
}
Here is the working fiddle for the code
http://jsfiddle.net/murli2308/YeZDe/

I think the problem is your use of the .closest() function, which finds the nearest parent of the given selector, starting with the selected element. See documentation for closest().
You probably are intending to use the .prev() and .next() functions.

You are hiding the Element (the button) but them Showing the TD. So the result is TD is visible but button itself is still hidden.
Here is the working code:
function someFunction(element)
{
$(element).closest("td").find("span.item-edit-button").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).closest("td").find("span.item-save-button").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}

This doesn't answer your question directly, but I think it presents a simplification of your code that may help.
http://jsfiddle.net/isherwood/BrP2a/4/
<button id="item-edit" ...>...Edit</button>
...
$('#item-edit').click(function () {
$(this).hide();
$('#item-save').show();
$('#item-delete').hide();
});
$('#item-save').click(function () {
$(this).hide();
$('#item-edit, #item-delete').show();
});

Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class

How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?
I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.
I've tried this so far (Bootply), but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.
//JS
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
//HTML
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"> </span>
</div>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
//CSS
.searchinput {
width: 200px;
}
.searchclear {
position:absolute;
right:5px;
top:0;
bottom:0;
height:14px;
margin:auto;
font-size:14px;
cursor:pointer;
color:#ccc;
}

1) You can use $(this) to get a reference to the current targeted element
2) Use .next() to toggle the visibility for only the icon which is the next immediate sibling of input that you're currenlty key in
3) Use .prev() to clear only the input which is the immediate previous sibling of clear icon that is clicked:
Final code should look like:
$(document).ready(function () {
$(".searchinput").keyup(function () {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
$(this).prev().val('').focus();
$(this).hide();
});
});
Bootply Demo

Try changing your javascript code to this:
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).parent().find('.searchclear').toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(this).parent().find('.searchinput').val('').focus();
$(this).hide();
});
});
Essentially what it does is add scope to the clear buttons so that it is limited to the sibling. There are other jQuery functions that might be more specific, but this should work.
http://www.bootply.com/130368

Another option would be to use .siblings() to make sure you are targeting just the siblings with the searchclear class.
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).siblings(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
http://www.bootply.com/130369