How to upload a file in just one click - javascript

I have HTML page, which gives an option to upload a file to the server, there is a servlet action class at server side & it handles request and write the file. Here how it works
Click to Browse the file and select the file
click the submit button.
But I want to upload in just one click on any button, please take a look of my code and suggest how to do that using javascript/jQuery fn.
<html> <head>
<script type = "text/javascript">
function test() {
var uploadfile = document.getElementByID("upload_id");
uploadfile.click(); // here i can browse the file without clicking on file brows button
} </script> </head> <body>
<input type="button" id="just_one_click" value ="click me" onclick="test();" />
<form action="upload.do" method="post" enctype="multipart/form-data">
<input type="file" id="upload_id" name = "fileupload" />
<input type = "submit" value="upload" />
</form> </body> </html>

You can assign id (let's say 'myform') to your form and use document.getElementById('myform').submit(); instead of uploadfile.click();.

Related

Why are the values of my previous input field disappearing when I click on the ADD ANOTHER IMAGE button?

<html>
<head>
</head>
<body>
<form action="" enctype="multipart/form-data" method="post">
<input type="file" name="pic" accept="image/*" id="insert-file" class="ins=file">
<input type="submit" id="submit-btn" class="submit-btn">
<button id="add-img" type="button">ADD ANOTHER IMAGE</button>
<div id="new-field"></div>
<script src="{{ url_for('static', filename='upload.js') }}"></script>
</form>
</body>
</html>
This is my template and the following is upload.js
const addImg = document.getElementById('add-img')
const newField = document.getElementById('new-field')
addImg.addEventListener('click', function() {
newField.innerHTML += `
<input type="file" name="pic" accept="image/*" class="ins=file">
<input type="submit" class="submit-btn">
`
})
As you can see, a new input field will be created when a user clicks on the ADD ANOTHER IMAGE button but the image selected in that input field will disappear when the button is clicked and it will show, "No file chosen" despite the user selecting a file before clicking on the ADD ANOTHER IMAGE. I suspect that it is because I am getting rid of the value of the input field when creating a new with the ADD ANOTHER IMAGE button. (it is there in the JS code)
Anyway, how can I fix this? I want the user to be able to click on the ADD ANOTHER IMAGE button and the input field to still contain the file that they selected previously.
using .innerHTML += is converting what is currently on the dom in to a string, then putting it back in to the dom which causes it to become a new element.
use insertAdjacentHTML to insert a string of html in to the dom to keep the existing elements mdn docs
addImg.addEventListener('click', function() {
newField.insertAdjacentHTML('beforeend',`
<input type="file" name="pic" accept="image/*" class="ins=file">
<input type="submit" class="submit-btn">
`)
})

Why does my code change the innertext back to the starting value? [duplicate]

I am rather new to Javascript and am currently trying some stuff out with it.
I stumbled upon a tutorial in w3schools on how to change the color of a button after pressing it.
I wanted to do something similar, but instead load another page with some search query results when the button is pressed.
My html code for this is the following:
<html>
<head>
<meta charset = "utf-8">
<title>Test</title>
<script type="text/javascript" src="search.js" defer></script>
</head>
<body>
<header>
<h1>Test</h1>
</header>
<main>
<form>
<input type="search" id="query" placeholder="Search...">
<button id="submit">Search</button>
</form>
</main>
</body>
</html>
And here is the corresponding javascript code:
const searchbutton = document.getElementById("submit");
searchbutton.addEventListener("click", testmethod);
function testmethod() {
window.location.href="search.html";
}
The code itself seems to be working, but whenever the button is pressed, the search.html page loads for a split second before reverting back. I even copied the code from the w3schools tutorial directly but it's still not working.
Any idea what causes the page to get changed back after the button is pressed?
Thanks in advance!
Change location or submitting a form will (re)load the (target) page - you are doing BOTH.
You can start by passing in the event and using event.preventDefault() in the testmethod and then do something else than changing location
I strongly suggest to NOT assign events to a submit button, instead use the submit event
You also need to wrap in a page load event listener or move the script to after the form
ALSO never call anything submit in a form
function testmethod(e) {
e.preventDefault(); // stop submission
console.log(this.query.value);
this.subbut.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("myForm").addEventListener("submit", testmethod);
});
<main>
<form id="myForm">
<input type="search" name="query" id="query" placeholder="Search...">
<button name="subbut">Search</button>
</form>
</main>
If you do not need to submit the form, use a type="button" and no form
function testmethod(e) {
console.log(document.getElementById("query").value)
this.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("subbut").addEventListener("click", testmethod);
});
<main>
<input type="search" id="query" placeholder="Search...">
<button type="button" id="subbut">Search</button>
</main>

html input file click event submit form before select file

I am trying to implement upload file , I want to call the file input to select the file first, after selected the file , then will do form submit. However in my code , it will call form submit immediately. I have tried use ajax but not work. Any way I want to do the form submit just after the user have selected the file. But it seems cannot find a way to wait the finishing of the file input click function ( I mean until the user have selected a file)
Here is my html:
<input type="text" id="body" name="body" >
<button type="submit" id="sent_1" value="Send">Submit</button>
<input type="file" id="image_file" name="image" size="chars">
<button id="send_img_btn" value="image">Image</button></td>
Here is my javascript:
$('#send_img_btn').click(function(e){
e.preventDefault();
$('#image_file').click();
$('#form').submit();
});
function imageClick(){
$('#image_file').click();
}
function submit(){
$('#form').submit();
}
Edited: Maybe I am not clearly saying my problem. The problem is that when
I click the button, it just submit the form instantly, not waiting me for selected file. I want it to wait me until I selected the file then submit.
Add attribute type="button" in <button> tag.
By default, <button> tag acts like <input type="submit"> inside <form> tag.
<button type="button" id="send_img_btn">Image</button>
If you want to submit the form as soon as the file is selected, use change event of that input.
<form action="formActionUrl" name="myForm">
<input type="file" name="myInput"/>
</form>
In Script
$(":file").change(function(e){
$("[name=myForm]").trigger('submit');
});

how can we provide different submit buttons in jsp, and execute respective page of button.?

I want to know how can we have different buttons in jsp, and how to submit the respective page for the button we pressed.
I have tried fallowing code :
<html>
<head> </head>
<body>
<%-- scriptlet here --%>
<%
if(request.getParameter("btnSubmit_1")!=null)
{
// means submit_1 is pressed.
// in java script we do give action as fallows
/**document.frm2.action="sub-faconline.jsp";
//document.frm2.target="right_f";
//document.frm2.submit();****
my question how can we do above java script code in scriplet in jsp
}
else if(request.getParameter("btnSubmit_2")!=null)
{
// i want to give some jsp page name here for action.
}
%>
<form name="frm2" method="post">
<input type="button" id="btnSubmit_1" name="btnSubmit_1" value="btnSubmit_1" />
<input type="button" id="btnSubmit_2" name="btnSubmit_2" value="btnSubmit_2"/>
</form>
</body>
</html>
You have to modify your html to this:
<form name="frm2" method="post" action="myJsp.jsp">
<input type="button" id="btnSubmit_1" name="btnSubmit_1" onClick="submitForm('btnSubmit_1'); value="btnSubmit_1"" />
<input type="button" id="btnSubmit_2" name="btnSubmit_2" onClick="submitForm('btnSubmit_2'); value="btnSubmit_2"/>
<input type="hidden" id="btnPressed" name="btnPressed" value=""/>
</form>
Javascript:
function submitForm(elem){
document.getElementById("btnPressed").value=elem;
document.frm2.submit();
}
And then in your jsp you can get the button value that was pressed using:
request.getParameter("btnPressed");
Explanation: Create an invisible input in the form that will hold the value of the btn. Then attach onclick functionality to each of the buttons that will set the value of the hidden input. And then submit the form to the form's action URL. Then in that url, you can get the hidden input's value(that contains the value of the button that was pressed)

Issue with file upload in one click

I'm using an icon instead of the regular upload input + submit button.
I want the upload to starts automatically right after a file is chosen.
Once the user selects a file, nothing happens though.
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input id="upload" type="file" name="image" style="display:none" value=/>
<input name="wishid" type="hidden" value=/>
<img id="upload_img" src="/images/upload.png">
</form>
<script type="text/javascript">
$('#upload_img').click(function(){
$('#upload').click();
});
</script>
What do I need to add to the jQuery code to actually start the upload process via upload.php ?
Take a look at this description of how to replace input:file with image and then you can just use the code below...
<script type="text/javascript">
$('#upload_img').click(function(){
$('form').submit();
});
</script>

Categories