We Keep Coding

JavaScript only changes text of first iteration with thymeleaf

I hope you are all well.
I have a school assignment, and I want to dynamically be able to change the name of a 'project'. This assignment is about projects. The way I've done it right now works with the first 'project' from a list of 'projects' iterated through with thymeleaf. I'm aware that what I've done right now is absolutely bad code behavior, but we have had no teaching in JS yet. But I really wanted this feature.
I don't know how to make this work for each project preview, right now it works for the first preview, but for the rest it just erases the project name from database. (see picture)
<div class="projects" th:each="projectNames : ${listOfProjects}">
<form action="deleteProjectPost" method="post">
<input type="hidden" th:value="${projectNames.projectID}" name="deleteID">
<input type="image" src="delete.png" alt="Submit" align="right" class="deleteProject" onclick="return confirm('Are you sure that you want to delete this project?')">
</form>
<form action="/editProjName" method="post">
<input type="hidden" name="projectID" th:value="${projectNames.projectID}">
<input type="hidden" id="oldName" th:value="${projectNames.projectName}">
<input type="hidden" id="newName" name="projectName">
<input type="image" src="edit.png" alt="Submit" onclick="change_text()" align="right" class="editProject">
</form>
<form action="/projectPost" method="post">
<input class="projectInfo" name="projectID" type="text" th:value="'Project No.: ' + ${projectNames.projectID}" readonly="readonly">
<input class="projectInfo" type="text" th:value="'Project name: ' + ${projectNames.projectName}" readonly="readonly">
<input class="projectInfo" type="text" th:value="${projectNames.projectStartDate} + ' - ' + ${projectNames.projectEndDate}" readonly="readonly">
<input type="submit" value="OPEN" class="openProject">
</form>
</div>
<script>
function change_text() {
var changedText;
var projectName = prompt("Please enter name of project:");
var oldName = document.getElementById("oldName").value;
if (projectName === null || projectName === "") {
changedText = oldName;
} else {
changedText = projectName;
}
document.getElementById("newName").value = changedText;
}
</script>
First form in HTML is the red cross to delete an entire 'project'. Second form is what is intended to change the name displayed on the 'project preview', but only works on first preview and deletes project name from the rest. Last form is the actual preview. I couldn't find another way to have multiple forms and do different POSTS while working with Java Spring and Thymeleaf.
My wish is to make the change_text() function work for each 'project preview'
Best regards!

function change_text(imageInput) {
var changedText;
var projectName = prompt("Please enter name of project:");
var oldName = imageInput.parentNode.querySelector('.old-name').value;
if (projectName === null || projectName === "") {
changedText = oldName;
} else {
changedText = projectName;
}
imageInput.parentNode.querySelector('.new-name').value = changedText;
}
<form action="/editProjName" method="post">
<input type="hidden" name="projectID" th:value="${projectNames.projectID}">
<input type="hidden" class="old-name" id="oldName" th:value="${projectNames.projectName}">
<input type="hidden" class="new-name" id="newName" name="projectName">
<input type="image" src="edit.png" alt="Submit" onclick="change_text(this)" align="right" class="editProject">
</form>
Ok so I made a few changes. First, notice the inputs with oldName and newName now have classes on them. These can be repeated. If you are not using the ids for anything other than the script, you should remove them. Otherwise if you have styling rules for them you should consider changing those CSS rules to use the class instead so you can remove the invalid repeating ids.
Secondly, the onlick of the image now passes in this. What that does is it passes in the actual input that the user clicked, so you have some context into which form element the user is interacting with.
Then looking at the logic, the method now accepts in imageInput which is the this from the onclick.
Using imageInput.parentNode we go up the DOM Tree to the parent element of the input, which is the form in this case. We can then turn around and use querySelector to find the other element in the form we want to manipulate. And it will only find the element in our particular form because that is what we are selecting off of.

how can i create a preview for multiple upload buttons

How can i preview the selected ico with multiple inputs? The problem is that it select the input by id which is everywhere the same. How can i run the js with a indefined amount of inputs? The amount of inputs depends on the number of loops it ran. What can i do to make it work with multiple inputs
for ($x = 1; $x <= $number; $x++) {
$bar .= '<input type="text" name="title[]" placeholder="Name '.$x.'" id="title" value=""><input type="file" accept="video/*" name="file[]"/><input type="file" name="" class="icofile" id="icofile" accept="image/*" name="icon[]" hidden>
<label for="icofile" class="icofile" id="selector"><img src="../images/none.png"></label><br>';
}
}
?>
<script type="text/javascript">
var loader = function(e){
let file = e.target.files;
//let show= "<span>Selected file : </span>"+file[0].name;
let show= "<img src='none.png'>";
let output= document.getElementById("selector");
output.innerHTML = show;
output.classList.add("active");
if(file[0].type.match("image")){
let reader = new FileReader();
reader.addEventListener("load", function(e){
let data=e.target.result;
let image= document.createElement("img");
image.src=data;
output.innerHTML="";
output.insertBefore(image,null);
output.classList.add("image");
});
reader.readAsDataURL(file[0]);
}else{
let show="<img src='none.png'>";
//show= show+file[0].name;
output.innerHTML=show;
output.classList.add("active");
if(output.classList.contains("image")){
output.classList.remove("image");
}
}
};
let fileInput = document.getElementById("icofile");
fileInput.addEventListener("change", loader);
</script>

You got quite some redundant (repetitive) code that you could remove. Using Object URLs could make it easier for you if you ditch the unnecessary FileReader that waste time encoding decoding long base64 urls.
also you don't have uniq id's throughout your html. and you used name twice on the icofile input... so this problems have to be fixed first before you move on.
also the label with the for="icofile" will only point to the first input so it also needs to be uniq.
globalThis.preview = function preview (evt) {
const file = evt.target.files[0]
// Get matching label
const output = document.querySelector(`label[for=${evt.target.id}]`)
// Reuse the existing image instead of clearing and rebuilding
const img = output.querySelector('img')
output.classList.add('active')
output.classList.remove('image')
// This if statement is almost useless since
// accept="image/*" ensure that you only get images
if (file.type.match('image')) {
img.src = URL.createObjectURL(file)
output.classList.add('image')
} else {
img.src = 'https://dummyimage.com/50x50/ff0000/000000&text=None'
}
}
<!-- for loop that did output this: -->
<!-- foreach id in this list append an index -->
<input type="text" name="title[]" placeholder="Name" id="title-1">
<input type="file" name="file[]" accept="video/*" />
<input type="file" name="icon[]" accept="image/*" onchange="preview(event)" id="icofile-1" hidden>
<label for="icofile-1" class="icofile">
<img width="50" height="50" src="https://dummyimage.com/50x50/ff0000/000000&text=None">
</label>
<hr> <!-- for better look/seperation without css. -->
<input type="text" name="title[]" placeholder="Name" id="title-2">
<input type="file" name="file[]" accept="video/*" />
<input type="file" name="icon[]" accept="image/*" onchange="preview(event)" id="icofile-2" hidden>
<label for="icofile-2" class="icofile">
<img width="50" height="50" src="https://dummyimage.com/50x50/ff0000/000000&text=None">
</label>

get img src from input text id on load modal

How to pass input type image (name of pic) to img src inside div, when load modal?
<div class="form-group">
<label for="image" class="col-sm-2 control-label">
<?=l ang( 'image') ?>
</label>
<div class="col-sm-4">
<input type="image" id="pimage" width="300px">
</div>
</div>
<script>
var imageSrc = 'http://ricap.pt/encomendas/assets/uploads/' + pimage + '';
var input = document.getElementById('pimage');
input.src = imageSrc;
</script>
This show blank div and is getting the name of image
Pic url : http://ricap.pt/encomendas/assets/uploads/2774cc3506ee269c379b215d3a1876d5.jpg

The problem is you don't have a src="" in your tag, so you're trying to edit an attribute that isn't there. Add a blank attribute to your code like this:
<input src="" type="image" id="pimage" width="300px">
input.src doesn't add an attribute; it only changes what is already there.
As you mentioned in your comment, you could also do that with PHP like this:
<input src="assets/uploads/<?php echo $row->image; ?>" type="image" id="pimage" width="300px">

Try this:
var imageSrc = 'http://ricap.pt/encomendas/assets/uploads/' + pimage + '';
$('#pimage').parent().append('<img src="'imageSrc'">');

Dynamically remove a dynamically added input (type=file)

I have a form where user can add files to be uploaded. Change event on that input adds new input the same type and so on. But the new inputs have to have "X" character with click event attached to it to be able to remove the input field and the X chracter.
The form:
<form id="upload_form">
<div class="p_file">
<p class="icon">X</p>
<input type="file" name="userfile1" size="40" class="required" />
</div>
</form>
and the JavaScript:
$('#upload_form input[type="file"]').change(function(){
addUploadField($(this));
});
function addUploadField($field)
{
$current_count = $('#upload_form input[type="file"]').length
$next_count = $current_count + 1;
$field.parent('p').after('
<div class="p_file" >
<p class="icon">X</p>
<input type="file" name="userfile'+$next_count+'" size="40" />
</div>
');
$field.unbind('change');
$nextField = $('#upload_form input[type="file"]').last();
$nextField.bind('change',function(){
addUploadField($(this));
});
$("#upload_form .icon").on('click',function(){
removeUploadField($field);
});
}
function removeUploadField($field)
{
$field.parent('p').remove();
}
The code above remove all the fields after the clicked 'X' character. What I want to do is to remove only the next input field.
I tried to prepare this example in jsFiddle, but I can't make this work. Anyhow maybe this would help.

Putting "div" tag inside "p" tag is the main problem
Remove is corrected in this code
Note: In your html code "div" is is added inside "p" tag, this is invalid practice
HTML:
<form id="upload_form">
<div class="p_file">
<div class="icon">X</div>
<input type="file" name="userfile1" size="40" class="required" />
</div>
</form>
Script:
$('body')
.delegate('#upload_form input[type="file"]', 'change', inputChanged)
.delegate('#upload_form .icon', 'click', removeField);
function inputChanged() {
$current_count = $('#upload_form input[type="file"]').length;
$next_count = $current_count + 1;
$(this).closest('.p_file').after(
'<div class="p_file" ><div class="icon">X</div>' +
'<input type="file" name="userfile'
+ $next_count + '" size="40" /></div>');
}
function removeField(){
$(this).closest('.p_file').remove();
return false;
}
Link: http://jsfiddle.net/cBrQX/2/

how to add date picker to a textbox in a div which has display none?

I have a text box in a div whose display is none by default and it will display only when a link is clicked. I tried to add date picker in the textbox inside the hidden div. but i couldn;t do it as the date picker is nt displaying. if code is needed for this tip. i can provide or if more explainations,i can provide that too..please help me how to over come this problem.
Note : the datepicker works in other fields which are visible. but not working with the textbox in the hidden div. Below is the HTML Code of the div and the text field with nxt_date is the field where i wanna add date picker.
The below div will be the innerHTML of another div when a link is clicked. I have added the JS function below for the link.
This is the link which triggers editor function :
<a id='edit' style='cursor:pointer;' onClick='editor();'><b style='color:#689BB9;'>Add Payment</b></a>
JQUERY
$(function() {
$("#nxt_date").date_input();
});
$.extend(DateInput.DEFAULT_OPTS, {
stringToDate: function(string) {
var matches;
if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
return new Date(matches[1], matches[2] - 1, matches[3]);
} else {
return null;
};
},
dateToString: function(date) {
var month = (date.getMonth() + 1).toString();
var dom = date.getDate().toString();
if (month.length == 1) month = "0" + month;
if (dom.length == 1) dom = "0" + dom;
return dom+ "-" + month + "-" + date.getFullYear();
}
});
JAVASCRIPT
function editor(){
val=document.getElementById("shwDiv").innerHTML;
document.getElementById("payDiv").innerHTML=val;
document.getElementById('net_pay').value='<? echo $paid->net_payable;?>';
document.getElementById('balance').value='<? echo $paid->balance_amount;?>';
}
HTML
<div id="shwDiv" style="display:none">
<table style="background-color:#CFE0EA;width:30px;font-size:13px;">
<tr>
<td>
<strong>Netpay:</strong>
<input type='text' id='netpaid' value = '<? echo$net1; ?>' class= 'box'size="3" readonly />
</td>
<td>
<strong>Paid:</strong> <input type='text' value='<? echo $paid1; ?>' id='paid1' size="3" name='paid1' class="box" readonly />
<input type='hidden' value='<? echo $paid1; ?>' id='paid1_hidden' size="3"></td>
</td>
<td>
<strong>Balance:</strong>
<input type='text' value='<? echo $balance1;?>' id='balance1' readonly size="3" class="box"/>
<input type='hidden' value='<? echo $balance1;?>' id='balance1_hidden' />
</td>
<td>
<strong>Paying now:</strong><br/><input type='text' class="box" id='paying_now' onkeyUp='aa(this.value);' size="3" class="box" onkeypress="return isNumberKey(event)" />
</td>
<td>
<strong>Due Date:</strong><input type='text' class="box" id='nxt_date' size="3" />
</td>
<td><input type="button" value="Save" id="save" class="add_btn" onClick="pay_submit();" style="margin-top:10px;height:25px;"/></td>
</tr>
</table>
</p>
</div>

I think it's not working because you expect the datepicker to be copied (created) when you set the innerHTML of the "payDiv" from the "shwDiv".
First of all, there are some inconstancies in your code:
You tags have several times a classattribute: <input type='text' class="box" id='paying_now' onkeyUp='aa(this.value);' size="3" class="box" onkeypress="return isNumberKey(event)" />
Your elements have IDs. If you copy the innerHTML from one div to the other, you will have multiple time the same ID which is not allowed. Use the name attribute.
To correct your situation, do this:
You have to initialize again the datePicker instance for the field in the "payDiv" after you set the 'innerHTML'.
function editor() {
// always you 'var' to declare variables, otherwise they go to the global scope
var shwDivContent = $('#shwDiv').html(),
$payDiv = $('#payDiv');
$payDiv.html(shwDivContent);
// instanciate the datepicker in the 'payDiv'
// assuming you have added a 'name' attribute to your field
$payDiv.find('input[name=nxt_date]').date_input();
$payDiv.find('input[name=net_pay]').val('<? echo $paid->net_payable;?>');
$payDiv.find('input[name=balance]').val('<? echo $paid->balance_amount;?>');
}