Related
I had made a html page through google app script in spreadsheet , all is working fine in pc mode but in mobile friendly its not responsive and after clicking particular field it displays blank black screen.
forms.html
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!---<title> Responsive Registration Form | CodingLab </title>--->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 120vh;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.container {
max-width: 700px;
width: 100%;
background-color: #fff;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .title {
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.content form .user-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box {
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span.details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input {
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box select {
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid {
border-color: #9b59b6;
}
form .gender-details .gender-title {
font-size: 20px;
font-weight: 500;
}
form .category {
display: flex;
width: 80%;
margin: 14px 0;
justify-content: space-between;
}
form .category label {
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot {
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked~.category label .one,
#dot-2:checked~.category label .two,
#dot-3:checked~.category label .three {
background: #9b59b6;
border-color: #d9d9d9;
}
form input[type="radio"] {
display: none;
}
form .button {
height: 45px;
margin: 35px 0
}
form .button input {
height: 100%;
width: 100%;
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6, #9b59b6);
}
#media(max-width: 584px) {
.container {
max-width: 100%;
}
form .user-details .input-box {
margin-bottom: 15px;
width: 100%;
}
form .category {
width: 100%;
}
.content form .user-details {
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar {
width: 5px;
}
}
#media(max-width: 459px) {
.container .content .category {
flex-direction: column;
}
}
</style>
<script>
var stateObject = {
"Human Resource": {
"Zoopero Marketing Limited": [],
},
"Digital Marketing": {
"Zoopero Marketing Limited": [],
},
"Businees Dev Executive": {
"Analytics Valley technologies": [],
"Material Library India": [],
"Purple Apple Infosystems": [],
"Find My Hospital": [],
"Edurific": [],
},
"Market Researcher": {
"Acadspace technologies": [],
},
"Mern Stack": {
"Jackfruit": [],
},
"Social Media Manager": {
"Trinano Technologies": [],
},
"PHP & Laravel": {
"Analytics Valley technologies": [],
},
"React JS Developer": {
"Analytics Valley technologies": [],
}
}
window.onload = function () {
var domain = document.getElementById("domain"),
company = document.getElementById("company"),
districtSel = document.getElementById("districtSel");
for (var country in stateObject) {
domain.options[domain.options.length] = new Option(country, country);
}
domain.onchange = function () {
company.length = 1; // remove all options bar first
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value]) {
company.options[company.options.length] = new Option(state, state);
}
}
domain.onchange(); // reset in case page is reloaded
company.onchange = function () {
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[domain.value][this.value];
for (var i = 0; i < district.length; i++) {
districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="title">Registration</div>
<div class="content">
<form action="" class="main" id="form" novalidate="novalidate">
<div class="user-details">
<div class="input-box">
<span class="details">Full Name</span>
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true"
placeholder="Enter your name" required>
</div>
<div class="input-box">
<span class="details">Whatsapp Number</span>
<input type="number" name="whatsapp" id="whatsapp" class="validate" required=""
aria-required="true" placeholder="Enter Your number">
</div>
<div class="input-box">
<span class="details">Email</span>
<input type="email" name="email" id="email" class="validate" required="" aria-required="true"
placeholder="Enter your email" required>
</div>
<div class="input-box">
<span class="details">Select Year</span>
<select id="year" name="year" required>
<option value="" selected disabled>Year</option>
<option value="1st Year">1st Year</option>
<option value="2nd Year">2nd Year</option>
<option value="3rd Year">3rd Year</option>
<option value="4th Year">4th Year</option>
</select>
</div>
<div class="input-box">
<span class="details">Gender</span>
<select id="gender" name="gender" required>
<option value="" selected disabled>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Prefer Not To Say">Prefer Not To Say</option>
</select>
</div>
<div class="input-box">
<span class="details">Prefered Domain</span>
<select id="domain" name="domain" required>
<option value="" disabled selected>Select Domain</option>
</select>
</div>
<div class="input-box">
<span class="details">Prefered Company</span>
<select id="company" name="company" required>
<option value="" disabled selected>Select Company</option>
</select>
<select name="district" id="districtSel" size="1" style="display: none;">
<option value="" selected="selected">Please select State first</option>
</select><br>
</div>
<div class="input-box">
<span class="details">Select College</span>
<select id="college" name="college" required>
<option value="" selected disabled>College</option>
<option value="Bharati Vidyapeeth College Of Engineering Pune">Bharati Vidyapeeth College Of Engineering Pune</option>
<option value="Others">Others</option>
</select>
</div>
<div class="input-box">
<span class="details">Upload Resume</span>
<input type="file" id="files" placeholder="Upload your resume" required
accept=".doc,.docx,.pdf">
</div>
<div class="input-box">
<span class="details">College Name</span>
<input id="college-name" type="text" name="college-name" class="validate" required="" aria-required="true"
placeholder="If Others Enter College Name" required>
</div>
<div class="input-box">
<span class="details">Unique ID</span>
<input id="unqID" type="number" name="unqID" class="validate" required="" aria-required="true"
placeholder="Enter your Unique ID" required>
</div>
<div class="input-box">
<span class="details">Alternate Mobile</span>
<input id="tel" type="tel" name="tel" class="validate" required="" aria-required="true"
placeholder="Enter your number" required>
</div>
</div>
<div class="input-box">
<div id="progress">
</div>
</div>
<div class="button">
<input type="submit" value="Register" onclick="submitForm(); return false;">
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">File Uploaded</h5>
<p>Your file has been successfully uploaded.</p>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materializ e.min.js"></script>
<script>
var file, reader = new FileReader();
reader.onloadend = function (e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#whatsapp').val(), $('select#year').val(), $('input#email').val(), $('select#gender').val(), $('select#college').val(), $('input#college-name').val(), $('select#domain').val(), $('select#company').val(), $('input#tel').val(), $('input#unqID').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide(); $('#success').show();
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset"); $('#forminner').show(); $('#success').hide(); $('#progress').html("");
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Please select a file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. ");
return;
}
showMessage("Uploading file ...");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
$(document).ready(function () {
$('select').material_select();
});
</script>
</body>
</html>
code.gs
// 1. Enter sheet name where data is to be written below
var SHEET_NAME = "Sheet1";
// 2. Run > setup
//
// 3. Publish > Deploy as web app
// - enter Project Version name and click 'Save New Version'
// - set security level and enable service (most likely execute as 'me' and access 'anyone, even anonymously)
//
// 4. Copy the 'Current web app URL' and post this in your form/script action
//
// 5. Insert column names on your destination sheet matching the
//parameter names of the data you are passing in (exactly matching case)
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new
//property service
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("SIPP Registrations");
// return HtmlService.createHtmlOutputFromFile('forms.html').setFaviconUrl("");
}
function uploadFileToGoogleDrive(data, file, name, whatsapp, year, email, gender, college, college_name, domain, company, tel, unqID) {
try {
var dropbox = "Received Files";
//var folder, folders = DriveApp.getFoldersByName(dropbox);
var folder=DriveApp.getFolderById('1H_52_xxh1rrzSjZyVrHl4pawMtLpeFqE');
/*
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
*/
/* Credit: www.labnol.org/awesome */
var contentType = data.substring(5,data.indexOf(';')), bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)), blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob),
filelink=file.getUrl() ;
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
// next set where we write the data - you could write to multiple/alternate destinations
var doc = SpreadsheetApp.openById("1Z4mvlfJpStn6tYyq35HeLGJCKbVRikJyqs5M9pZJgt0");
var sheet = doc.getSheetByName(SHEET_NAME);
// we'll assume header is in row 1 but you can override with
//header_row in GET/POST data
var headRow = 1;
var headers = sheet.getRange(1, 1, 1,
sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
// loop through the header columns
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a'Timestamp' column
row.push(new Date());
} else if (headers[i] == "name"){
row.push(name);
} else if (headers[i] == "whatsapp"){
row.push(whatsapp);
} else if (headers[i] == "year"){
row.push(year);
} else if (headers[i] == "email"){
row.push(email);
} else if (headers[i] == "gender"){
row.push(gender);
} else if (headers[i] == "college"){
row.push(college);
} else if (headers[i] == "college_name"){
row.push(college_name);
} else if (headers[i] == "domain"){
row.push(domain);
} else if (headers[i] == "company"){
row.push(company);
} else if (headers[i] == "tel"){
row.push(tel);
} else if (headers[i] == "unqID"){
row.push(unqID);
} else if (headers[i] == "filelink"){
row.push(filelink);
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// return json success results
//return ContentService
// .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
// .setMimeType(ContentService.MimeType.JSON);
return "OK";
} catch (f) {
return f.toString();
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet(); SCRIPT_PROP.setProperty("1Z4mvlfJpStn6tYyq35HeLGJCKbVRikJyqs5M9pZJgt0", doc.getId());
}
What is the issue?
Error in mobile devices
I am using an HTML form with validation patterns from this article but I am unsure how to keep the same (style of) validation pattern for a telephone number of 10 characters starting with 0?
I simply have "[0-9]{10}" atm.
This will take care of the preceding 0 right? "0([0-9]){9}"
Do I need the other beginning "^(([-\w\d]+)" & end stuff ")$" from the other inputs to keep the patterns uniform for all inputs or is this just overcomplicating the requirement?
//sitepoint.com/instant-validation
//add event construct for modern browsers or IE
//which fires the callback with a pre-converted target reference
function addEvent(node, type, callback) {
if (node.addEventListener) {
node.addEventListener(
type,
function(e) {
callback(e, e.target);
},
false
);
} else if (node.attachEvent) {
node.attachEvent("on" + type, function(e) {
callback(e, e.srcElement);
});
}
}
//identify whether a field should be validated
//ie. true if the field is neither readonly nor disabled,
//and has either "pattern", "required" or "aria-invalid"
function shouldBeValidated(field) {
return (
!(field.getAttribute("readonly") || field.readonly) &&
!(field.getAttribute("disabled") || field.disabled) &&
(field.getAttribute("pattern") || field.getAttribute("required"))
);
}
//field testing and validation function
function instantValidation(field) {
//if the field should be validated
if (shouldBeValidated(field)) {
//the field is invalid if:
//it's required but the value is empty
//it has a pattern but the (non-empty) value doesn't pass
var invalid =
(field.getAttribute("required") && !field.value) ||
(field.getAttribute("pattern") &&
field.value &&
!new RegExp(field.getAttribute("pattern")).test(field.value));
//add or remove the attribute is indicated by
//the invalid flag and the current attribute state
if (!invalid && field.getAttribute("aria-invalid")) {
field.removeAttribute("aria-invalid");
} else if (invalid && !field.getAttribute("aria-invalid")) {
field.setAttribute("aria-invalid", "true");
}
}
}
//now bind a delegated change event
//== THIS FAILS IN INTERNET EXPLORER <= 8 ==//
//addEvent(document, 'change', function(e, target)
//{
// instantValidation(target);
//});
//now bind a change event to each applicable for field
var fields = [
document.getElementsByTagName("input"),
document.getElementsByTagName("textarea")
];
for (var a = fields.length, i = 0; i < a; i++) {
for (var b = fields[i].length, j = 0; j < b; j++) {
addEvent(fields[i][j], "change", function(e, target) {
instantValidation(target);
});
}
}
import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');
*,*:before,*:after {
box-sizing: border-box;
}
body {
font-family: 'Titillium Web', sans-serif;
font-size: 20px;
line-height: 1.4;
color: var(--color-woodsmoke);
}
:root {
--color-woodsmoke: #161B1E;
}
.container {
width:600px;
margin: 200px auto 0;
}
.container * {
transition: all 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
/*transition: all 220ms cubic-bezier(0.19, 1, 0.22, 1) 0s;*/
}
#contactForm fieldset {
border: none;
}
.form-control {
width: 100%;
display: block;
padding: .5rem 0;
font-size: 18px;
line-height: 1.25;
color: var(--color-woodsmoke);
-webkit-tap-highlight-color: transparent;
border: none;
border-bottom: 1px solid #767676;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.9 17.1l-5.5-5.5-1.8 1.8L8 20.8 23.5 5.1l-1.8-1.8L7.9 17.1z" fill="%234eb239"/></svg>') no-repeat right -35px / 24px 24px;
/*transition: none;*/
}
.form-control:focus {
color: var(--color-woodsmoke);
/*background: none;*/
border-color: transparent;
outline: 0;
}
input[aria-invalid="true"].form-control,
textarea[aria-invalid="true"].form-control {
border-color: red;
}
.form-group {
position: relative;
margin-bottom: 2.5rem;
}
.form-control-placeholder {
position: absolute;
top: 0;
color: #767676;
}
.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
font-size: 70%;
transform: translate3d(0, -100%, 0);
}
input[aria-invalid="true"].form-control + .form-control-placeholder,
textarea[aria-invalid="true"].form-control + .form-control-placeholder {
font-size: 70%;
transform: translate3d(0, -100%, 0);
color: red;
}
.form-control:focus + .form-control-placeholder {
color: #115293;
}
.focus-border {
width: 100%;
height: 2px;
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
transform: scaleX(0);
transition: transform 280ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
background-color: #115293;
}
.form-control:focus + .form-control-placeholder + .focus-border {
transform: scaleX(1);
}
.form-control:valid:not([aria-invalid="true"]) {
border-color: #57b846;
/*background: blue;*/
background-position: right center;
}
textarea.form-control:valid:not([aria-invalid="true"]) {
background-position: right 7px;
}
/*MOZ FIX*/
:not(output):-moz-ui-invalid {
box-shadow: none;
}
input:invalid {
box-shadow: none;
}
/*CHROME FIX*/
#-webkit-keyframes autofill {
to {
color: var(--color-woodsmoke);
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
/*
input:-internal-autofill-selected {
background-color: red !important;
background-image: inherit !important;
color: var(--color-woodsmoke) !important;
}
*/
input:-webkit-autofill {
-webkit-text-fill-color: var(--color-woodsmoke);
}
input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-woodsmoke);
}
/*TEXTAREA*/
#txtMessage {
resize: none;
}
<div class="container">
<h4 class="align-center white text-shadow">Get in touch</h4>
<form id="contactForm" method="post" action="php/mail.php">
<fieldset>
<div class="form-group">
<input name="txtName" id="txtName" class="form-control" value="" aria-required="true" pattern="^([- \w\d\u00c0-\u024f]+)$" title="Your name" type="text" spellcheck="false" maxlength="30" required autofocus>
<label class="form-control-placeholder" for="txtName">Name</label>
<span class="focus-border"></span>
</div>
<div class="form-group">
<input name="txtEmail" id="txtEmail" class="form-control" value="" aria-required="true" pattern="^(([-\w\d]+)(\.[-\w\d]+)*#([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" title="Your email address" type="email" spellcheck="false" maxlength="30" required>
<label class="form-control-placeholder" for="txtEmail">Email</label>
<span class="focus-border"></span>
</div>
<div class="form-group">
<input name="txtPhone" id="txtPhone" class="form-control" value="" aria-required="true" pattern="[0-9]{10}" title="Your telephone number" type="tel" spellcheck="false" maxlength="10" required>
<label class="form-control-placeholder" for="txtPhone">Telephone</label>
<span class="focus-border"></span>
</div>
<div class="form-group">
<textarea name="txtMessage" id="txtMessage" class="form-control" aria-required="true" cols="40" rows="7" spellcheck="true" title="Your enquiry" required></textarea>
<label class="form-control-placeholder" for="txtMessage">Enquiry</label>
<span class="focus-border"></span>
</div>
<button name="btnSubmit" id="btnSubmit" class="button primary" type="submit">Submit</button>
</fieldset>
</form>
</div>
The ^(([-\w\d]+) matches start of string (^) and then 1+ hyphens, underscores, letters or digits (note \w matches digits, too, so \d is redundant) and the )$ is just the end of a grouping construct and end of string assertion. So, if you do not plan to match any letters, digits, hyphens or underscores before the number, do not add the ([-\w\d]+) pattern, and the anchors - ^ (start of string) and $ (end of string) - are redundant - see below why.
In fact, you may just use
pattern="0[0-9]{9}"
It is enough because you already curbed the input field limit to 10 with maxlength="10":
<input name="txtPhone" id="txtPhone" class="form-control" value="" aria-required="true" pattern="0[0-9]{9}" title="Your telephone number" type="tel" spellcheck="false" maxlength="10" required>
I need to make HTML5 validation rule so:
10 characters
mix of letters and numbers
at least 1 letter
I try something like:
<input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg" pattern="[a-fA-F]{1,}[0-9]{10}" title="Wrong Code" placeholder="Security Code" />
but don't work.
You could use <input type="password" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" required>
Or this (it's a bit longer...):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px
}
input[type=button] {
background-color: #4CAF50;
color: white
}
.container {
background-color: #f1f1f1;
padding: 20px
}
#message {
display: none;
position: relative;
margin-top: 10px
}
.valid {
display: none
}
</style>
</head>
<body>
<div class="container">
<form action="/db.php" id="form">
<label for="psw">Password</label>
<input type="password" id="psw" name="psw" required>
<input type="button" value="Submit" onclick="analyze()">
</form>
</div>
<div id="message">
<h3 id="theH3">Your password doesn't contain any of the following:</h3>
<p id="letter" class="invalid">A letter</p>
<p id="number" class="invalid">A number</p>
<p id="length" class="invalid">10 characters</p>
</div>
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var tmp = 0;
myInput.onfocus = function () {
document.getElementById("message").style.display = "block";
}
myInput.onblur = function () {
document.getElementById("message").style.display = "none";
}
myInput.onkeyup = function () {
var lowerCaseLetters = /[a-zA-Z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
tmp++;
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
tmp++;
} else {
number.classList.remove("valid");
number.classList.add("invalid");
} if (myInput.value.length >= 10) {
length.classList.remove("invalid");
length.classList.add("valid");
tmp++;
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
function analyze() {
var lowerCaseLetters = /[a-zA-Z]/g;
var numbers = /[0-9]/g;
if (lowerCaseLetters.test(myInput.value) && numbers.test(myInput.value))document.getElementById('form').submit();
if(tmp==3){
var message = document.getElementById('theH3')
message.style('display:none;');
}
}
</script>
</body>
</html>
<input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" title="Wrong Code" placeholder="Security Code" />
^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$
I think you are looking for this website.
URL : http://html5pattern.com/Names
I have a registration form which is designed in JQuery & i have a .php file where data insert query is written. But when i click on the submit button of the form .php file does not call. I already mentioned that formaction="insert.php". While i already store the folder in the htdocs folder.
Form.html
<!DOCTYPE html>
<html style=" border-bottom-right-radius: 258px; border-bottom-left-radius: 258px; border-top-left-radius: 258px; border-top-right-radius: 258px; ">
<head>
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../dist/jquery.validate.js" type="text/javascript"></script>
<link href="../css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet">
<script src="../js/jquery-ui-1.10.4.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(document).ready(function() {
$("#form").validate({
messages:
{
ProjectName: {
required: 'Please Enter Project Name'
},
location: {
required: 'Please Enter Location'
},
arch: {
required: 'Please Enter Architect Name'
},
projectno: {
required: 'Please Enter Project No.'
},
dof: {
required: 'Please Select Date'
},
dorder: {
required: 'Please select Order No.'
},
email:{
required: 'Please write EmailID'
}
}
});
$( "#datepicker" ).datepicker();
$("input").focus(function(){
$(this).css("background-color","#F7D9BA");
});
$("input").blur(function(){
$(this).css("background-color","#B8860B");
});
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.Default();
});
$( "input[type=reset], a, button" )
.button()
.click(function( event ) {
event.Default();
});
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<style>
body
{
background-color: #CC6600;
}
span
{
color:red;
}
.error
{
font-size: 12px;
color: #A72727;
}
label
{
display: inline-block; width: 15em;
}
fieldset div
{
margin-bottom: 1em;
}
fieldset .help
{
display: inline-block;
}
.ui-tooltip
{
width: 210px;
}
input
{
background-color: white;
background: white url("../test/inputbox.jpg") repeat-x left top;
border: 0px solid #ccc;
padding: 0px 2px;
height: 25px;
font: 80% "Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1 style="margin-left: 0px; color:white; margin-left: 600px; "><b><u>Form:</u></b></h1>
<form id="form">
<fieldset style=" border-color: ghostwhite; border-width: 12px; margin-top: 42px;; background-color:gray;">
<legend style=" text-align: center; color:white;">Enter Details</legend>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;" >Project:<span>*</span></label>
<input name="ProjectName" data-rule-required="true"/>
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Location:<span>*</span> </label>
<input id="location" name="location" data-rule-required="true" />
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Architect:<span>*</span></label>
<input name="arch" data-rule-required="true"/>
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Project No.:<span>*</span> </label>
<input id="projectno" name="projectno" data-rule-required="true" />
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Date:<span>*</span></label>
<input type="text" id="datepicker" name="dof" data-rule-required="true" />
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Recent Work:</label>
<input id="check" type="checkbox" name="check" data-rule-required="fasle" />
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Display Order:<span>*</span></label>
<select id="dorder" name="dorder" data-rule-required="true" style=" height: 22px; width: 38px; ">
<option ></option>
<option >1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Email:<span>*</span></label>
<input id="email" name="email" data-rule-required="true"/>
</p>
<br>
<p>
<input style="margin-left:580px; padding-top: 2px;" class="submit" type="submit" value="Submit"/>
<input style="margin-left:20px; padding-top: 2px;" type="reset" value="Reset" name="Reset" />
</p>
</fieldset>
</form>
</body>
</html>
insert.php
<!DOCTYPE html>
<html>
<body>
<?php
$con=mysqli_connect("localhost","root","","NProject");
$rec_limit = 3;
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// escape variables for security
$Project = mysqli_real_escape_string($con, $_POST['ProjectNo']);
$Location = mysqli_real_escape_string($con, $_POST['Location']);
$Architect = mysqli_real_escape_string($con, $_POST['Architect']);
$ProjectNo = mysqli_real_escape_string($con, $_POST['ProjectNo']);
$Date = mysqli_real_escape_string($con, $_POST['Date']);
$RecentWork = mysqli_real_escape_string($con, $_POST['RecentWork']);
$DisplayOrder = mysqli_real_escape_string($con, $_POST['DisplayOrder']);
$EmailID = mysqli_real_escape_string($con, $_POST['EmailID']);
$sql="INSERT INTO projecttb (Project, Location, Architect, ProjectNo, Date, RecentWork, DisplayOrder, EmailID)
VALUES ('$Project', '$Location', '$Architect','$ProjectNo','$Date','$RecentWork','$DisplayOrder','$EmailID')";
if (!mysqli_query($con,$sql)) {
die('Error: ' . mysqli_error($con));
}
echo "1 record added";
mysqli_close($con);
?>
</body>
</html>
you need to add this code to your form
<form id="form" method="post" action="insert.php">
This will call the PHP file
Is it possible to change the appearance of <input type="file">?
You can’t modify much about the input[type=file] control itself.
Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.
Here is how you can do it…
label {
cursor: pointer;
/* Style as you please, it will become the visible UI component. */
}
#upload-photo {
opacity: 0;
position: absolute;
z-index: -1;
}
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />
The CSS for the form control will make it appear invisible and not take up space in the document layout, but will still exist so it can be activated via the label.
If you want to display the user’s chosen path after selection, you can listen for the change event with JavaScript and then read the path that the browser makes available to you (for security reasons it can lie to you about the exact path). A way to make it pretty for the end user is to simply use the base name of the path that is returned (so the user simply sees the chosen filename).
There is a great guide by Tympanus for styling this.
Something like that maybe?
<form>
<input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>
<script>
$(document).ready( function() {
$('#falseinput').click(function(){
$("#fileinput").click();
});
});
$('#fileinput').change(function() {
$('#selected_filename').text($('#fileinput')[0].files[0].name);
});
</script>
<label for="fusk">dsfdsfsd</label>
<input id="fusk" type="file" name="photo" style="display: none;">
why not? ^_^
See the example here
If you're using Bootstrap here is a better solution:
<label class="btn btn-default btn-file">
Browse <input type="file" style="display: none;" required>
</label>
For IE8 and below: https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/#legacy-approach-(ie8-and-below)
Source: https://stackoverflow.com/a/18164555/625952
Easiest way..
<label>
Upload
<input type="file" style="visibility: hidden;"/>
</label>
The trick is hide the input and customize the label.
HTML:
<div class="inputfile-box">
<input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
<label for="file">
<span id="file-name" class="file-box"></span>
<span class="file-button">
<i class="fa fa-upload" aria-hidden="true"></i>
Select File
</span>
</label>
</div>
CSS:
.inputfile-box {
position: relative;
}
.inputfile {
display: none;
}
.container {
display: inline-block;
width: 100%;
}
.file-box {
display: inline-block;
width: 100%;
border: 1px solid;
padding: 5px 0px 5px 5px;
box-sizing: border-box;
height: calc(2rem - 2px);
}
.file-button {
background: red;
padding: 5px;
position: absolute;
border: 1px solid;
top: 0px;
right: 0px;
}
JS:
function uploadFile(target) {
document.getElementById("file-name").innerHTML = target.files[0].name;
}
You can check this example: https://jsfiddle.net/rjurado/hnf0zhy1/4/
In webkit you can try this out...
input[type="file"]::-webkit-file-upload-button{
/* style goes here */
}
first of all it's a container:
<div class="upload_file_container">
Select file!
<input type="file" name="photo" />
</div>
The second, it's a CSS style, if you want to real more customization, just keeping your eyes is open :)
.upload_file_container{
width:100px;
height:40px;
position:relative;
background(your img);
}
.upload_file_container input{
width:100px;
height:40px;
position:absolute;
left:0;
top:0;
cursor:pointer;
}
This example hasn't style for text inside the button, it depends on font-size, just correct the height and padding-top values for container
It's much better if you just use a <label>, hide the <input>, and customize the label.
HTML:
<input type="file" id="input">
<label for="input" id="label">Choose File</label>
CSS:
input#input{
display: none;
}
label#label{
/* Customize your label here */
}
Bootstrap example
<label className="btn btn-info btn-lg">
Upload
<input type="file" style="display: none" />
</label>
Here is a quick pure CSS workaround (works on chrome and has a FireFox fallback included), including the file name,a label and an custom upload button, does what it should - no need for JavaScript at all! 🎉
Note: ☝ anyways, I would not use it on a real world website - if browser compatibility is a thing to you (what it should be). So it's more kind of experimental, otherwise while time goes by, it could be that this isn't an issue today.
.fileUploadInput {
display: grid;
grid-gap: 10px;
position: relative;
z-index: 1; }
.fileUploadInput label {
display: flex;
align-items: center;
color: setColor(primary, 0.5);
background: setColor(white);
transition: .4s ease;
font-family: arial, sans-serif;
font-size: .75em;
font-weight: regular; }
.fileUploadInput input {
position: relative;
z-index: 1;
padding: 0 gap(m);
width: 100%;
height: 50px;
border: 1px solid #323262;
border-radius: 3px;
font-family: arial, sans-serif;
font-size: 1rem;
user-select: none;
cursor: pointer;
font-weight: regular; }
.fileUploadInput input[type="file"] {
padding: 0 gap(m); }
.fileUploadInput input[type="file"]::-webkit-file-upload-button {
visibility: hidden;
margin-left: 10px;
padding: 0;
height: 50px;
width: 0; }
.fileUploadInput button {
position: absolute;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
line-height: 0;
user-select: none;
color: white;
background-color: #323262;
border-radius: 0 3px 3px 0;
font-family: arial, sans-serif;
font-size: 1rem;
font-weight: 800; }
.fileUploadInput button svg {
width: auto;
height: 50%; }
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
border: 0px;
outline: 0;
background-repeat: no-repeat;
appearance: none;
border-radius: 0;
vertical-align: middle;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
text-decoration: none;
list-style: none;
user-select: text;
line-height: 1.333em; }
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: rgba(66, 50, 98, 0.05); }
.container {
padding: 25px;
box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
border: 1px solid #eaeaea;
border-radius: 3px;
background: white; }
#-moz-document url-prefix() {
.fileUploadInput button{
display: none
}
}
<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->
<div class="container">
<div class="fileUploadInput">
<label>✨ Upload File</label>
<input type="file" />
<button>+</button></div>
</div>
to show path of selected file you can try this
on html :
<div class="fileinputs">
<input type="file" class="file">
</div>
and in javascript :
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
var image = document.createElement('div');
image.className='fakebtn';
image.innerHTML = 'browse';
fakeFileUpload.appendChild(image);
fakeFileUpload.appendChild(document.createElement('input'));
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
and style :
div.fileinputs {
position: relative;
height: 30px;
width: 370px;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
right: 0;
width: 370px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
border: none;
box-shadow: 0px 0px 2px 1px #ccc;
padding: 4px;
width: 241px;
height: 20px;
}
div.fakefile .fakebtn{
width: 150px;
background: #eb5a41;
z-index: 10;
font-family: roya-bold;
border: none;
padding: 5px 15px;
font-size: 18px;
text-align: center;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
display: inline;
margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
background: #DA472E;
}
div.fileinputs input[type="file"] {
opacity: 0;
position: absolute;
top: -6px;
right: 0px;
z-index: 20;
width: 102px;
height: 40px;
cursor: pointer;
}
Here is one way which I like because it makes the input fill out the whole container. The trick is the "font-size: 100px", and it need to go with the "overflow: hidden" and the relative position.
<div id="upload-file-container" >
<input type="file" />
</div>
#upload-file-container {
width: 200px;
height: 50px;
position: relative;
border: dashed 1px black;
overflow: hidden;
}
#upload-file-container input[type="file"]
{
margin: 0;
opacity: 0;
font-size: 100px;
}
I went for this option which clarifies how to fully customize the browse button by including an handler of the uploaded file name, also customized.
It adds additional fields and client-side controls on them just to show how to include the browse in a "real" form, not just a standalone.
Here's the codepen: http://codepen.io/emiemi/pen/zxNXWR
JS:
//click on our custom btn triggers a click on the hidden actual file input
$("#btnup").click(function(){
$("#fileup").click();
});
//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file
var res=$('#fileup').val();
var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 && formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 && formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
$( ".imgupload" ).hide("slow");
$( ".imguploadok" ).hide("slow");
$( ".imguploadstop" ).show("slow");
$('#nomefile').css({"color":"red","font-weight":700});
$('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}else{
//if file is valid we show the green alert
$( ".imgupload" ).hide("slow");
$( ".imguploadstop" ).hide("slow");
$( ".imguploadok" ).show("slow");
$('#nomefile').html(arr.slice(-1)[0]);
$('#nomefile').css({"color":"green","font-weight":700});
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
//if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}
}
});
$('#nome').change(function(){
//same as file change but on name field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
$('#tit').change(function(){
//same as file change but on tit field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
HTML:
<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
<div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
<input type="file" value="" class="hidden" name="fileup" id="fileup">
<div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
<h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
<h1 class="imguploadok"><i class="fa fa-check"></i></h1>
<h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
<p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
<button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
</div>
</div>
<!--additional fields-->
<div class="col-md-6">
<div class="row">
<div class="form-group" id="top">
<div class="col-md-12">
<input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p class="white">All fields are mandatory</p>
</div>
<div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
<input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
<button type="button" class="btn btn-default" disabled="disabled" id="fakebtn" style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
This is my fully functional customerized file upload/Attachment using jquery & javascript (Visual studio). This will be useful !
Code will be available at the comment section !
Link : https://youtu.be/It38OzMAeig
Enjoy :)
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
You can style them, but you can't remove the elements that are already there. If you're creative, you can work with that and do something like this:
input[type=file] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #EEE;
background: linear-gradient(to top, #FFF, #DDD);
border: thin solid rgba(0,0,0, .5);
border-radius: .25em;
box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
cursor: text;
padding: .25em;
}
http://jsfiddle.net/zr1x1m2b/1/
I suggest you play around with this code, remove lines, add your own, do whatever until you get something that looks how you like!
Just style a normal button however you want, using your favorite CSS.
Then call a simple JS function to create and link a hidden input element to your styled button. Don't add browser-specific CSS to do the hiding part.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
width : 160px;
height : 30px;
font-size : 13px;
border : none;
text-align : center;
background-color : #444;
color : #6f0;
}
button:active {
background-color : #779;
}
</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {
var hidden_input = null;
document.getElementById(id).onclick = function() {hidden_input.click();}
function setup_hidden_input() {
hidden_input && hidden_input.parentNode.removeChild(hidden_input);
hidden_input = document.createElement("input");
hidden_input.setAttribute("type", "file");
hidden_input.style.visibility = "hidden";
document.querySelector("body").appendChild(hidden_input);
hidden_input.onchange = function() {
handler(hidden_input.files[0]);
setup_hidden_input();
};
}
setup_hidden_input();
}
Upload_On_Click("upload", function(file) {
console.log("GOT FILE: " + file.name);
});
</script>
Notice how the above code re-links it after every time the user chooses a file. This is important because "onchange" is only called if the user changes the filename. But you probably want to get the file every time the user provides it.
For more details, research DropZone and gmail uploads.
Here is one way I recently discovered, with a bit of jQuery
HTML Code:
<form action="">
<input type="file" name="file_upload" style="display:none" id="myFile">
<a onclick="fileUpload()"> Upload a file </a>
</form>
For the javascript/jQuery part :
<script>
function fileUpload() {
$("#myFile").click();
}
</script>
In this example, I have put an "anchor" tag to trigger the file upload. You can replace with anything you want, just remember to put the "onclick" attribute with the proper function.
Hope this helps!
P.S. : Do not forget to include jQuery from CDN or any other source