We Keep Coding

redirect event with javascript

I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?

Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location

ASP .NET CORE MVC, html - choose default image if user didn't choose any

I want the "Choose file" to be optional. That means if user does not click "Choose file", the default image (/wwwroot/n-image/NoImage.png) is chosen. "Image" is a string property of Article object.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
<div>
<div class="form-group">
<label asp-for="Image" class="control-label"></label>
<br />
<div class="custom-file">
<input type="file" asp-for="Image" class="custom-file-input" id="FLFormFIle" />
</div>
<span class="text-danger"></span>
<br />
</div>
<img id="FormFilePrv" src="" style="border:1px; top:20px;margin-left:120px;" />
<div class="form-group">
<br />
<input type="submit" value="Utwórz artykuł" class="btn btn-primary" />
</div>
</div>
</form>
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
document.getElementById('FormFilePrv').src = window.URL.createObjectURL(this.files[0])
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
})

I have edited some code in your view . I set a default Image 117.png in wwwroot/n-image , When the page load , <img id="FormFilePrv" src="/n-image/117.png" class="detailImage" /> will display the default Image and if user doesn't choose any image just cilck the submit button , <input type="hidden" name="ImagePath" id="test" value="/n-image/117.png"/> will submit the default Image's path .
If user click the Change button , the choosen Image will display in <img.../> and the value of <input type="hidden" ...../> will change to the path of the choosen Image.
View
<form asp-controller="Home" asp-action="Show" method="post" enctype="multipart/form-data">
<div>
<div class="form-group">
<label name="Image" class="control-label"></label>
<br />
<div class="custom-file">
<input type="file" name="Image" class="custom-file-input" id="FLFormFIle" />
</div>
<span class="text-danger"></span>
<br />
</div>
<img id="FormFilePrv" src="/n-image/117.png" class="detailImage" />
<input type="hidden" name="ImagePath" id="test" value="/n-image/117.png"/>
<div class="form-group">
<br />
<input type="submit" value="Utwórz artykuł" class="btn btn-primary" />
</div>
</div>
</form>
#section Scripts
{
<script>
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
document.getElementById('FormFilePrv').src = window.URL.createObjectURL(this.files[0]);
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
var ImagePath = document.getElementById('FormFilePrv').src;
document.getElementById('test').value= ImagePath;
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
}
Controller
[HttpGet]
public IActionResult Show()
{
return View();
}
[HttpPost]
public async Task<IActionResult> Show(string ImagePath,IFormFile Image)
{
//......
return View();
}
demo
when user click submit button directly, the default Image's path will submit to the controller.
When user choose a Image and click submit button , the choosen Image and the choosen Image's path will submit to the controller.

unable to display a list with alert function

first post here, i'm trying to write a code following a tutrial, its a to do list and i wrote a function that takes the content of a text type input and adds it to a list, im testing the code using an alert inside the function but it doenst work and no alerts are shown, here's the code. Thanks in advance
let elements = [];
function addElements(){
if (document.querySelector("#task").nodeValue.trim() != ""){
elements.push(document.querySelector("#task").nodeValue.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
<script src="../todo_list/apps.js"></script>
</body>

So your problem was you didn't call addElements() on your button.
and instead of using nodeValue just use value instead.
this is working code
let elements = [];
function addElements(){
console.log(document.querySelector("#task").value)
if (document.querySelector("#task").value.trim() != ""){
elements.push(document.querySelector("#task").value.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
</body>

First you need to stop the html form submit with
<form action="#" id="todoForm" onsubmit="return false;">
Then you need to bind click function to your button, so that when button clicked your addElements function will be triggered
<button class="addBtn" onclick="addElements()">
Finally you need to get the input value with
document.getElementById('task').value;
Complete Code Sample
let elements = [];
function addElements() {
var task = document.getElementById('task').value;
if (task.trim() != "") {
elements.push(task);
alert(elements)
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm" onsubmit="return false;">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
</form>
</div>
</body>

When I try to send two files in a html form, request is always pending

I am trying to send two files/images in a form but request is stalled. It is always pending. In my local VM Box it works but on server the problem that i mentioned is occurred. I checked out php version, jQuery version and they are all same with my local. What is the problem?
EDIT 1: Here is form:
<form method="POST" id="package-create-form" action="/admin/packages/pack">
<div class="form-group">
<label for="image" class="bold">IMAGE</label>
<input type="file" class="form-control" id="image" name="image">
</div>
<div class="form-group">
<label for="map-image" class="bold">MAP IMAGE</label>
<input type="file" class="form-control" id="map-image" name="map_image">
</div>
<div class="text-right">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<button type="button" class="btn btn-danger" id="cancel-button"
data-href="/admin/packages/pack"><i class="fa fa-arrow-left"></i>Back</button>
<button type="submit" id="store-btn2"
class="btn btn-primary">Forward<i class="fa fa-arrow-right"></i>
</button>
</div>
</form>

First of all you have to write correct enctype for form.
This is enctype="multipart/form-data" for images. It's required
And second one, if you'd like to upload more than one image, you have to use tag multiple in your input type="file".
To sum up:
<form method="POST" id="package-create-form" action="/admin/packages/pack" enctype="multipart/form-data">
and
<input type="file" class="form-control" id="map-image" name="map_image" multiple>
More about enctype

how to show a div tag when i click on a button?

My program is to upload a file and when I click on Upload it will call a servlet. the same upload page contain some other fields which should b displayed when I click on upload button only. how to call the servlet as well as to show the remaining contents. Actually using the servlet I want to show the file contents on same page.
here is my code.
<form class="form-horizontal" name="regist" action="Registration"
onsubmit="return validateFile((this))" enctype="multipart/form-data"
method="post">
<div class="control-group" class="span12">
<label class="control-label" for="file">Please upload a
file:</label>
<div class="controls">
<input type="file" name="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>
<div id="showFrames" style="display:none;">
<!--
hidden contents are here -->
</div>
and my script is
function validateFile(form) {
var fileName = form.file.value;
if (!fileName) {
alert("No File Selected!!!");
return false;
}
else
{
$("#showFrames").show();
}
}
but it doesn't work. can anyone help me? thanks

With jQuery I'll do it like that :
$('.form-horizontal').sumbit(function(e) {
if($(this).find('input[type="file"]').val().length) { //check by length
$("#showFrames").show();
} else {
alert('No file Selected');
e.preventDefault();
}
});
It'll be better using a form ID if you need to have more than one form.
This way you can remove the onsubmit attribute.

Replace your as per below
<form class="form-horizontal" name="regist" action="Registration"
onsubmit="return validateFile(this)" enctype="multipart/form-data"
method="post">
<div class="control-group" class="span12">
<label class="control-label" for="file">Please upload a
file:</label>
<div class="controls">
<input type="file" name="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>