I have a standard input field:
<input type="file">
in my form, but I have it hidden so that I can use my own image for the button (as seen in many answers on stackoverflow)
But when using this method, there's no confirmation given to the user that their file was selected, because the standard input box is hidden and so they never see the filename.
So my question boils down to this: How can I detect that a file has been selected, and then display something on the page (not an alert box)? Ideally I just want to show a little icon or some text saying "file selected".
Jquery is fine but if there's a way to do this without it, I'd much prefer that. Thanks!
This is a pretty easy way to do it without using Jquery. You will have to change the id's to match your html of course.
Here is a link to a jsfiddle example: http://jsfiddle.net/larryjoelane/rrns0k4e/1/
HTML Part:
<input id="file-select" type="file">
<div id="file-selected"></div>
Javascript Part:
//on change event listener for #file-select
document.getElementById("file-select").onchange = function() {
//call getFileSelected method
getFileSelected();
};
function getFileSelected(){
//get the value of the input file element
var getFileSelected = document.getElementById("file-select").value;
//display the results of the input file element
//you can append something before the getFileSelected value below
//like an image tag for your icon or a string saying "file selected:"
//for example.
document.getElementById("file-selected").innerHTML = getFileSelected;
}
If you listen to the change event on the element, you'll know when a file have been selected:
$('input').change(function(){
console.log($(this).val());
});
You can use $(this).val(), if you want to show the filename. If you don't want to use jQuery, you're looking for the onchange event.
Fiddle: http://jsfiddle.net/cphutg90/
This is the Code which you are looking.
For better UI Performance, look on Internet Explorer 8+
HTML and JavaScript:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>File Picker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function fileValidator()
{
var fileName=document.forms["FileForm"]["fileName"].value.replace("C:\\fakepath\\", "");
var response=confirm("Are you sure to Upload '"+fileName+"'?");
console.log(response);
if(response==false)
{
document.forms["FileForm"]["fileName"].value="";
}
}
</script>
</head>
<body>
<form name="FileForm" action="" method="Post">
<table>
<tr>
<td><input type="file" name="fileName" onchange="fileValidator();"/></td>
</tr>
<tr>
<td><input type="submit" value="Upload"/></td>
</tr>
</table>
</form>
</body>
</html>
Related
I have code like this, and I want the raise button to tell the user how much they are going to bet if they click the button. If the value of the input were changed to 10, then I want the raise button to say "raise 10". Something along those lines. I'd like it to essentially change in 'real time' as a user types in the input box.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>poker</title>
</head>
<body>
<div>
<form id="actionForm">
<button id="fold" class="turn" type="submit">Fold</button>
<button id="call" class="turn" type="submit">Call</button>
<button id="raise" class="turn" type="submit">Raise<br>0</button>
<br>
<input id="amount" autocomplete="off" title="amount" value="0" />
</form>
</div>
</body>
</html>
I think I worded the question poorly when I searched online so I've come here for help. I'm not sure if I need js to do this with a loop of sorts, or there is something built into HTML.
Try something like this:
<script>
function updateButton()
{
// get value from input field
var inputValue = document.getElementById("inputField").value;
// update button text
document.getElementById("raise").innerHTML = "Raise " + inputValue;
}
</script>
The HTML
<input type="text" id="inputField" oninput="updateButton()">
PS: The oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.
You will need Javascript to create this behavior.
Steps would be :
Save "Raise" value into a variable
Set this value for your "button" label, and use it for increasing the amount
Here's what I came with :
<script>
function handleChange(){
var amount = document.getElementById('amount').value
document.getElementById('raise').innerText = `Raise ${amount}`
}
</script>
and call it as follows :
<input id="amount" autocomplete="off" onkeyup="handleChange()" />
I'm using "onkeyup" to achive the 'real-time' you mentioned.
Hope it helps!
I am attempting to create a couple of web pages that will allow me to fill out a form on input.html and have the entered data appended to a different HTML file, index.html.
I have been searching for an answer for a couple of hours now and it might just drive me insane!
Here is some example code of what I'm trying to do:
HTML form input.hmtl:
<form>
<label>
Enter something:
<input type="text" id="userinput" required>
</label>
<input type="submit" id="submit" value="submitted">
</form>
Javascript to get entered data and pass to index.html:
var userInput = document.querySelector("#userinput");
var submit = document.querySelector("#submit");
function addToIndex()
{
// create new element on index.html
}
submit.addEventListener("click", addToIndex, false);
HTML output file index.html:
<div id="contentstart">
<!-- newly created element here -->
</div>
I have attempted using this solution, but Chrome's console gives me an error and tells me that newWindow is not a function. I just stumbled upon using the <iframe> element in a couple of answers but don't quite understand it yet (I'm a noob).
Thanks in advance!
The best option is to use a web server or a serverless implementation. Server code can be written in multiple languages. Some of the languages include PHP, NodeJS, and ASP.NET.
However, you can pass data using browser storage.
But, browser storage is not secure and can be wiped at any time by the user. If you are storing information such as passwords or data that should be visible to multiple users, you should use a web server and/or database.
You need to have a script on both pages. The page with the form will store/set the data. The index page will retrieve the data and use javascript to render more content.
function addToIndex()
{
localStorage.setItem('input', userInput .value)
}
The script for the index page would look something like this.
var data = localStorage.getItem('input');
if (input) {
document.querySelector('#contentstart').innerHTML = data;
}
I put together a simple demo here.
http://plnkr.co/edit/iAitGxtdsHwXowNg
For you to receive data from a form in a different file, you will need a server-side language like php.
So the form will have this structure
<form action="external_file.php" method="get">
<label>
Enter something:
<input type="text" id="userinput" name="user_input" required>
</label>
<input type="submit" id="submit" value="submitted">
</form>
Note the action="external_file.php and the name="user_input" attribute added to the input element.
Then the file: external_file.php might have the following structure to receive the content from the form
<?php
$input = $_GET["user_input"];
//do something with $input
echo 'The data you entered is: ' . $input;
?>
I showed you the way to start. The rest is up to you, you can do whatever you want to do. I hope you could help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id ="form">
<label>
Enter something:
<input type="text" id="userinput" required>
</label>
<input type="submit" id="submit" value="submitted">
</form>
<script>
let form = document.getElementById("form");
let userInput = document.getElementById("userinput");
form.addEventListener("submit", submitForm) //this function will work when the form is submit
function submitForm (e) {
e.preventDefault() // this event will prevent page refresh when form submit
let userInputValue = userInput.value; // userinput value
console.log(userInputValue);
moveToAnotherPage(userInputValue); //we send the value we get from userinput to use in another function.
}
function moveToAnotherPage (value) {
// Select the index2 html elements and add with innerhtml or something.
//to do this, you may need to save the userinput value you received to localStorage and pull it from it. I suggest you look into localStorage .And if you know php, you can use it.
}
</script>
</body>
</html>
I'm very new to coding, so please forgive me if this is a dumb question.
I'm working on an assignment where I have to add functionality and styles to an existing bootstrap HTML doc. The purpose is to allow people to enter a dollar amount into an input field either by typing in an amount or by clicking buttons that populate the field with set amounts. One of my instructions was to update the donate submit button so that it appends the chosen donation amount to the "/thank-you" URL.
This is what I have for the input field:
<form id="amountSend">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount"/>
</form>
This is what I have for the button:
<button id="donateBtn" type="submit" action="/thank-you"
method="get">DONATE<span class="metric-amount"></span></button>
And I was thinking that the jQuery would look something like this, though the submit function is not currently giving me any visible results.
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit(function() {
var url = "/thank-you";
$(".metric-amount").appendTo("url");
});
}
})
I also got some decent results using a PHP method:
<form id="amountSend" method="post" action="/thank-you.php">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount" name="donation"></input>
</form>
<button id="donateBtn" type="submit">DONATE<span class="metric-amount"></span></button>
<script>
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit();
}
});
</script>
This one will open the PHP file I set up (/thank-you.php, which i have stored just in the same root folder as my main HTML doc), but all the browser gives me is the raw HTML code of the PHP file. Here's the code I have in the PHP file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
Thank you for your donation of
<?php echo $_POST["donation"]; ?><br>
</body>
</html>
Anyway, I guess I'm wondering if I'm on the right track? Should I pursue the jQuery or PHP method? Can I even do this using only jQuery? I've seen a few posts on this subject already, but I thought I'd make a new one since the ones I've seen are all fairly vague, I haven't seen the same answer twice, and I'm not sure I fully understand exactly what I'm trying to accomplish, in terms of a visual confirmation of results.
Thanks!
First of all, you have several issues with your code.
Number one: The formulary you have there is bad coded, the form tag needs to have the action and method attributes, not the submit button.
And in top of that, the submit button needs to be inside the form tag, if is not in there, it will not have and kind of effect.
Number two: If you are gonna submit the formulary to a php file and handle the request there ,you need the file to be running on a server (local or whatever). PHP is a server language, if you open the file directly in a browser, it will show you the code it has inside and will not work.
Hope it helps!
I have a page (demo):
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#id_button").click(function(e) {
$("#id_file").click();
});
});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="http://www.google.com/">
<input type="file" name="file" id="id_file" />
<input type="button" id="id_button" value="fake button" />
<input type="submit">
</form>
</body>
</html>
if
I open browse dialog via clicking "fake button", select file (I see it in input[type="file"]), than click submit button and no post happens, the input[type="file"] is cleared.
What should I changed to get it work?
I get this problem in IE8 and IE10.
PS: file input will be hidden, so user will work only with fake button.
All of the browsers have different behavior when it comes to what they allow you to do from javascript with regards to programmatically clicking the input button for file inputs.
The best solution I have found that seems to work cross browser is to set the opacity to 0 (do not use display:none) and put the button underneath the input, so the user clicks through the 0 opacity input to your button, thus firing the input select dialog.
A good writeup on styling the file input can be found here: http://www.quirksmode.org/dom/inputfile.html
http://jsfiddle.net/j38Wj Works fine in Google Chrome but does not work in IE 10.
As I think IE does not allow select file by external 'click' event.
Only one way to "customize" input[type=file] is usage of opacity style to hide it and relative positioning of custom button control below it.
Working example: http://blueimp.github.io/jQuery-File-Upload/
[...]
I think all browser does that behaviour for security reason. When you submit a form, you are redirected to a different page(or the same page) and if you are directed to the same page, the form is re-initialized.
In this case, you simply can NOT set the value of file for security reason.
From example, How to set a value to a file input in HTML?, you don't want this happen
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:\passwords.txt">
</form>
<script>document.foo.submit();</script>
Add a label tag along with the input file element. Set the 'for' attribute of the label to the id of the input file element.
Then when you click on the label the input file element will 'click' and the file dialog will open.
Then simply style the label however you like. Have tried on various IE versions.
I have created a Zend based php application.
I am looking for a simple way to create a popup or hoover-over help that I can use to to provide user help for the fields that the user should enter.
I guess I need javascript, and for the Zend form elements some decorator. But I have not been able to figure out how it should work. Maybe I need some CSS as well?
Does anyone have an example.
kind regards,
Vincent
you may use the jquery plugin for validation, which would prevent the form from submitting until first level checks have been passed. You find further information on the documentation page of jquery. But never trust those checks. You should always validate user input in the backend
http://docs.jquery.com/Plugins/Validation
or you use this, based on jquery
<!DOCTYPE html>
<html>
<head>
<title>Form Info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(':input.form-input').live('focus', function(){ //get input field
$(this)
.closest("div") //get up to div element
.find(".form-info") //and search for corresponding form-info class to that input field
.show(); //show it
}).live('blur', function(){
//once you leave the input field you might to some things
//...
//or just remove the element
$(this)
.closest("div") //get up to div element
.find(".form-info") //and search for corresponding form-info class to that input field
.hide(); //hide it
});
});
</script>
</head>
<body>
<div>
<input type="text" name="blub" value="" class="form-input" />
<span class="form-info" style="display:none;">my info to the customer</span>
</div>
</body>
</html>
I think you are looking for a tool tip for your controls.
Check this out jQuery Tooltip Plugin Demo
or this jQuery tools: tool tip