New to HTML,WebMatrix,Razor,etc Dealing with WebGrid - javascript

I'm am very sorry if this has been asked before but I cannot find it anywhere.
I am fairly new to web development in all aspects, but decided to create a nice little application to access and search a database from anywhere in the office.
I followed several tutorials using WebMatrix on how to set up a simple webpage etc and I have it mostly working, except for dealing with going to the next page in WebGrid. Here is what im talking about (kind of obscure but it cannot be helped)
I found two examples online about trying to use javascript and they gave me these bits of code to use..
In a file called _layout.cshtml
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Start</title>
<script src="#Href("~/scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<link href="#Href("~/styles/site.css")" rel="stylesheet" />
#RenderSection("script", required: false);
</head>
<body>
#RenderBody();
</body>
</html>
Then a file called _PageStart.cshtml
#{
Layout = "~/_layout.cshtml";
}
Then I started creating my own site and modeling it after a few tutorials I had seen, specifically involved around the WebGrid.
This is my Default.cshtml
#{
string searchStr = Request["searchBox"];
string choice = Request["choice"];
Database db = Database.Open("NameOfDatabase");
if(choice == null)
{
choice = "DefaultColumnName"; // they choose which column they want to search
//via radio buttons
}
var queryStr = "SELECT * FROM databaseTable WHERE "+choice
+" LIKE '"+searchStr+"%'";
var data = db.Query(queryStr);
WebGrid grid = new WebGrid(source: data,
defaultSort: "Name",
rowsPerPage: 20, canPage:true, canSort:true);
if(IsPost)
{//not really doing anything here
}
}
<head>
<title>Database</title>
<style type="text/css"> " //added that because it was goofing up the color scheme..
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 1px; }
.alt { background-color: #E8E8E8; color: #000; }
.style1{ min-width: 300px; max-width:400px; font-weight:bold; white-space:nowrap; overflow:hidden;}
.style2{ min-width: 100px; max-width:150px; overflow:hidden;}
.style3{ min-width: 200px; max-width:250px; overflow:hidden; white-space:nowrap;}
.style4{ min-width:100px; max-width:200px; overflow:hidden; }
.style5{ min-width: 150px; max-width:250px; overflow:hidden; white-space:nowrap;}
.style6{ min-width: 200px; max-width:250px; overflow:hidden;}
</style>
</head>
<body onload="document.form1.searchBox.focus();">
<h1>Database</h1>
<form name="form2" method="post" action="">
<p><input type="submit" name="populate" value="Populate DB" /></p>
</form>
<div id="grid">
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Name","Name",
format: #<p title="#item.Name.Trim()">#item.Name</p>,
style:"style1"),
//repeat to create 5 more columns exactly the same essentially
), mode: WebGridPagerModes.All
)
</div>
<form name="form1" method="post" action="Default">
<p><label for="searchBox">Search:</label>
<input type="text" name="searchBox" value="#searchStr" /></p>
<p><input type="radio" name="choice" value="Name" />
<label for="Name">Name</label></p>
<p><input type="radio" name="choice" value="choice1" />
<label for="choice1">choice1</label></p>
<p><input type="radio" name="choice" value="choice2" />
<label for="choice2">choice2</label></p>
<p><input type="radio" name="choice" value="choice3" />
<label for="choice3">choice3</label></p>
<p><input type="radio" name="choice" value="choice4" />
<label for="choice4">choice4</label></p>
<p><input type="radio" name="choice" value="choice5" />
<label for="choice5">choice5</label></p>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form>
</body>
#section script{
<script type="text/javascript">
$(function () {
$('th a, tfoot a').live('click', function () {
$('form1').attr('action', $(this).attr('href')).submit()
return false;
});
});
</script>
}
That is my website in general.. Well whenever you enter say someones name and a choice and click submit, it queries it fine, but if there are more than 20 names then when i click on the second page it essentially redoes my orginial query to get all the names and i loose what they typed into the text field and which option they choose.
The script I found is supposed to fire whenever they user clicks on the links that the webgrid creates to go to the next page, and put the data from form1 into something so that I can pull it back out when the page is loaded again.
I have looked and looked online for a solution and if I have found one I havent understood how it works.. so if anyone out there understands what I'm talking about and could help me out it would be greatly appreciated.
Thanks!

Take a read of Mikesdotnetting The WebGrid - Efficient Paging and Sorting at
http://mikesdotnetting.com/Article/181/The-WebGrid-Efficient-Paging-And-Sorting-With-SQL-CE-4.0
Should give you some ideas to work with.

Related

HTML Javascript Doesn't login

!!!Solved!!!
So I'm pretty new to HTML, CSS and Javascript is near unknown to me.
I used the help of people from a previous question, to do it.
The code of login was working before, but it doesn't work anymore and I can't really figure out what's the problem as everything for me seems alright.
The way it should work, that in (labavakara.neocities.org) you enter 'admin' and 'labadiena' in the form and it sends you to another website of my own.
Anyone know what I did wrong?
function check(form) should see what was entered in the form boxes and then see if it matches the correct user and pass.
When I go to the site and inspect element, then check console - 0 errors.
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 55%;
margin-top: -100px;
margin-left: -200px;
}
body {
background-image: url("backg.png");
background-color: #cccccc;
}
function {
color: red;
}
</style>
<body>
<script>
function check(form)
{
if(form.loginInput.value == "admin" && form.passwordInput.value == "labadiena")
{
window.location.href = "https://labavakara.neocities.org/trysketuri.html";
}
else
{
alert("Error Password or Username")
}
}
</script>
<div>
<title>Login</title>
<form>
<p><input style="background-color:red;color:black;border:1px solid #ff0000" type="text" id="loginInput" name="login" value="" placeholder="Username"></p>
<p><input style="background-color:red;color:black;border:1px solid #ff0000" type="password" id="passwordInput" name="password" value="" placeholder="********"></p>
<a class="submit"><input style="color:blue" type="submit" id="loginbutton" onclick="check(this.form)" name="commit" value="Login"><br>
<label id="userMessage" style="visibility:hidden;"></label>
</a>
</form>
</div>
</body>
</html>
Use type="button" in the input button used for submit form like this
<a class="submit"><input style="color:blue" type="button" id="loginbutton" onclick="check(this.form)" name="commit" value="Login"><br>
<label id="userMessage" style="visibility:hidden;"></label>
Ref : How to prevent page from reloading after form submit - JQuery
your page is reloaded since you are using type=submit i guess.

when a checkbox is checked how to display a different hidden element using javascript

I have a form on my site, which has a dropdown box set to display:none; in CSS. I am trying to reveal the dropdown (display: inline;) when a checkbox of another element is checked. What would be possible solution here?
When, #Give_to_a_specific_Project is checked, #choose_a_specific_project_from_dropdown should be set to CSS as display: inline;
Here is the HTML:
Codepen: http://codepen.io/mizan/pen/yNbqRa
<form method="POST" action="" class="sc-checkout-form" id="hello_donation_form" data-sc-id="1" data-parsley-validate="" novalidate="">
<div class="sc-form-group">
<label>
<input type="checkbox" id="Give_to_a_specific_Project" class="sc-cf-checkbox" name="sc_form_field[Give_to_a_specific_Project]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_1" data-parsley-multiple="sc_form_fieldGive_to_a_specific_Project" data-parsley-id="0210">Give To A Specific Project?</label>
<input type="hidden" id="Give_to_a_specific_Project_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[Give_to_a_specific_Project]" value="No">
<div id="sc_cf_checkbox_error_1">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldGive_to_a_specific_Project"></ul>
</div>
</div>
<div class="sc-form-group">
<select class="sc-form-control sc-cf-dropdown" id="choose_a_specific_project_from_dropdown" name="sc_form_field[choose_a_specific_project_from_dropdown]" data-parsley-id="8242">
<option value="HeartCrest Educational Center – Tema – Ghana" selected="" data-sc-price="HeartCrest Educational Center – Tema – Ghana">HeartCrest Education</option>
<option value="Hae Mona Children Home – Sebokeng – South Africa" data-sc-price="Hae Mona Children Home – Sebokeng – South Africa">Hae Mona Children Home</option>
<option value="Akuafo Farms – Ghana" data-sc-price="Akuafo Farms – Ghana">Akuafo Farms</option>
</select>
<ul class="parsley-errors-list" id="parsley-id-8242"></ul>
</div>
<div class="sc-form-group">
<label>
<input type="checkbox" id="recurring_monthly_gift" class="sc-cf-checkbox" name="sc_form_field[recurring_monthly_gift]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_2" data-parsley-multiple="sc_form_fieldrecurring_monthly_gift" data-parsley-id="4913">Make this a recurring monthly gift</label>
<input type="hidden" id="recurring_monthly_gift_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[recurring_monthly_gift]" value="No">
<div id="sc_cf_checkbox_error_2">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldrecurring_monthly_gift"></ul>
</div>
</div>
<div class="sc-form-group">
<label>
<input type="checkbox" id="project_update_by_email" class="sc-cf-checkbox" name="sc_form_field[project_update_by_email]" checked="" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_3" data-parsley-multiple="sc_form_fieldproject_update_by_email" data-parsley-id="7080">Receive Project Updates By Email</label>
<input type="hidden" id="project_update_by_email_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[project_update_by_email]" value="Yes">
<div id="sc_cf_checkbox_error_3">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldproject_update_by_email"></ul>
</div>
</div>
<button class="sc-payment-btn"><span>Give by Credit Card</span></button>
I had to clean up your code quite a bit. There were a number of things wrong:
jQuery isn't loaded in your CodePen project
#choose_a_specific_project_from_dropdown was misspelled
You were not instantiating $(document).ready() correctly
You were attempting to listen for .changed() which doesn't exist
Now we're listening for .click() event
You were not showing/hiding the dropdown correctly. You were using .next() but that isn't necessary since you are referencing it by an ID selector.
Working CodePen project: http://codepen.io/anon/pen/bdWxVE
JavaScript code:
$(document).ready(function() {
$('#Give_to_a_specific_Project').click(function( event ){
if ($(this).is(':checked')) {
$('#choose_a_specific_project_from_dropdown').show();
}
else {
$('#choose_a_specific_project_from_dropdown').hide();
}
});
});
Use the onchange event of the checkbox. onchange check if the box is checked and if it is then show the select box.
If I have understood your question correctly, you can achieve this with CSS alone, with no JavaScript or jQuery. Here's a demo. Click on the [+] button to reveal the text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Toggle Visibility</title>
<style>
input[type=checkbox] {
position: absolute;
clip:rect(0 0 0 0)
}
input[type=checkbox]~label span::after{
content: "+";
}
label {
position: absolute;
right: 0;
width: 1em;
height: 1em;
background-color: #fff;
border: 1px solid #000;
color: #000;
text-align: center;
}
/* Default State */
p#show-me {
background: #900;
width: 100%;
text-align: center;
overflow: hidden;
color: #fff;
box-sizing: border-box;
font-size: 1.35em;
margin:0 0 1.5em;
display: none;
}
/* Toggled State */
input[type=checkbox]:checked ~ label span::after{
content: "-";
}
input[type=checkbox]:checked ~ p#show-me{
display: inline;
}
</style>
</head>
<body>
<input type="checkbox" id="hide">
<label for="hide" onclick=""><span></span></label>
<p id="show-me">Click on the checkbox to hide this text.</p>
</body>
</html>

JS change to HTML blinks out

I've been trying to do a radio button checker with HTML and java script. When I click the 'check' button, it changes the inner-html to a paragraph. For some reason, the text only shows for about a half second then disappears.
JS file:
function runQuestionCheck() {
var question_one_answer = 1;
var question_two_answer = 1;
var question_three_answer = 1;
var question_one_explanation = "Text explaining why that's stupid!";
var question_two_explanation = " ";
var question_three_explanation = " ";
var question_one = document.getElementById("question_1").childNodes;
if (question_one[question_one_answer].isChecked) {
document.getElementById("q1_response").class = "correct";
document.getElementById("q1_response").innerHTML = "Correct!";
}
else
{
document.getElementById("q1_response").innerHTML = ("Sorry, that's incorrect." + question_one_explanation);
}
}
HTML:
<!DOCTYPE html>
<html>
<!-- Init CSS -->
<style>
html {
background-image: url("../Pictures/bg_france.png");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.center {
margin-left: auto;
margin-right: auto;
width: 20%;
}
.right {
position: absolute;
right: 1cm;
}
.left {
position: absolute;
left: 1cm;
}
.button_left {
position: absolute;
left: 1cm;
color: blue;
}
.button_right {
position: absolute;
right: 1cm;
color: blue;
}
.correct {
color: green;
}
.incorrect {
color: red;
}
</style>
<!-- Init head -->
<head>
<a href="home.html">
<div class="button_left">
Back to Home
</div>
</a>
<a href="sub_france.html">
<div class="button_right">
Highlight facts
</div>
</a>
<title>
France
</title>
<link rel="icon" type="image/png" href="../Pictures/beck_icon.png">
</head>
<!-- Init question script -->
<script type="text/javascript" src="../JavaScripts/questions_spain.js"></script>
<!-- Init body -->
<body>
<br>
<FONT FACE="arial">
<!-- Title -->
<h1>
America and France
</h1>
<!-- Body/Info -->
<p>
This is where the info would go.
</p>
<br>
<!-- Questions -->
<hr>
<h1>Comprehension Questions</h1>
<form id="question_1">
This is the first question!
<br>
<input type="radio" name="color" value="q1_one">Answer one<br>
<input type="radio" name="color" id="q1_two" value="green">Answer two<br>
<input type="radio" name="color" id="q1_three" value="blue">Answer three<br>
</form>
<p id="q1_response"></p>
<br>
<form id="question_2">
This is the second question!
<br>
<input type="radio" name="color" value="q2_one">Answer one<br>
<input type="radio" name="color" id="q2_two" value="green">Answer two<br>
<input type="radio" name="color" id="q2_three" value="blue">Answer three<br>
</form>
<p id="q2_response"></p>
<br>
<form id="question_3">
This is the third question!
<br>
<input type="radio" name="color" value="q3_one">Answer one<br>
<input type="radio" name="color" id="q3_two" value="green">Answer two<br>
<input type="radio" name="color" id="q3_three" value="blue">Answer three<br>
</form>
<br>
<form>
<button onclick="runQuestionCheck()">Check answers!</button>
</form>
<p id="q3_response"></p>
<br>
</FONT>
</body>
</html>
The reason you're seeing only a flash of text is because the text is being displayed, and then the page is immediately being refreshed. That's caused by the fact that your check button is inside a form. Since the form doesn't have an action or a method set, it defaults to submitting to the current page, via GET, which is basically the same as refreshing the page.
Looking at your code, you have a lot of forms that you probably don't need. You're not sending the data anywhere, you're just checking it locally in JavaScript. However, to remove all of them, your JavaScript code would need to be significantly overhauled, so to avoid that you can solve this problem either of these two ways:
Removing the form from your button
Right now it's not doing anything at all. Just get rid of it and you won't have a problem. Replace
<form>
<button onclick="runQuestionCheck()">Check answers!</button>
</form>
With
<button onclick="runQuestionCheck()">Check answers!</button>
Or, Add a type attribute to the button
The button defaults to being a submit button, which will submit whatever form it's in when it's clicked. That's what we want to avoid, so you can instead set it to be just a normal button, like this:
<form>
<button onclick="runQuestionCheck()" type="button">Check answers!</button>
</form>
If you want to keep the form, then this is your best option.
Your code has some other problems, too.
Your style should go in the head.
Your links (Back to Home and Highlight facts) should not be in the head, they should be in the body. Content never goes in the head.
Your script can't just be in the middle of nowhere. It has to go in either the head or the body. Nowadays it's generally recommended to put it in the body.
You shouldn't use FONT tags to style your text, you should use CSS. To put everything in Arial, you can put this in your style tag:
body {
font-family: arial;
}
Your JavaScript will encounter an error. The correct way to change an element's class in JavaScript is className. Replace this:
document.getElementById("q1_response").class = "correct";
With this:
document.getElementById("q1_response").className = "correct";

Drop down div when a button is pressed

I currently have a HTML page linked with javascript code which allows me to press a button that shows content in a hidden div. The functionality works fine, however when the button is pressed the hidden div displays above the button. Is there anyway it can drop down below the button as opposed to dropping up. Here is the code I am using:
HTML:
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox"></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
<p>6. Run around in the rain<input type="checkbox" ></p>
<p>7. Fly a kte<input type="checkbox" ></p>
<p>8. Catch a fish with a net<input type="checkbox" ></p>
<p>9. Eat an apple straight from a tree<input type="checkbox" ></p>
<p>10. Play conkers<input type="checkbox" ></p>
</div>
<button id="button1" title="Click to show/hide content" type="button1" onclick="readmore1()">Adventurer ▼</button>
<div id="spoiler1" style="display:none">spoiler text</div>
Javascript:
function readmore1(){
var spoiler1 = document.getElementById('spoiler1');
var btn = document.getElementById('button1');
if(spoiler1.style.display=='none') {
spoiler1.style.display = '';
btn.innerHTML = "Adventurer ▲";
} else {
spoiler1.style.display = 'none';
btn.innerHTML = "Adventurer ▼";
}
}
Any help would be much appreciated.
CSS:
#button1 {
display: inline-block;
font: normal 1.5em optima;
line-height: 10px;
margin-left: -10px;
margin-bottom:20px;
width: 250px;
height:60px;
border-radius:8px;
text-align: center;
vertical-align: central;
color: #fff;
border: none;
position: relative;
top: -5px;
left: 30px;
}
Hey mate I've looked at your code more in detail and here is a code example on here, I updated your Javascript to Jquery because its a more powerful language :)
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
$("#spoiler1").show();
});
$("#button").click(function(){
$("#spoiler1").hide();
});
});
</script>
</head>
<body>
<button id="button1" title="Click to show/hide content" type="button1">Adventurer ▼ </button>
<button id="button" title="Click to show/hide content" type="button">Hide</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree
<input type="checkbox">
</p>
<p>2. Roll down a really big hill
<input type="checkbox">
</p>
<p>3. Camp out in the wild
<input type="checkbox">
</p>
<p>4. Build a den
<input type="checkbox">
</p>
<p>5. Skim a stone
<input type="checkbox">
</p>
<p>6. Run around in the rain
<input type="checkbox">
</p>
<p>7. Fly a kte
<input type="checkbox">
</p>
<p>8. Catch a fish with a net
<input type="checkbox">
</p>
<p>9. Eat an apple straight from a tree
<input type="checkbox">
</p>
<p>10. Play conkers
<input type="checkbox">
</p>
</div>
</body>
</html>
Z-index should sort it in the CSS
an example of how to use it below, I hope this helps :)
Here is a code example, I would use 999999 :p thats just an example of how you would do it
http://www.w3schools.com/cssref/pr_pos_z-index.asp
#YourDiv {
Z-Index: 999999
}
#YourButton {
Z-Index:-999999
}
I usually use CSS for this sort of effects. All you need is "input[type='checkbox']" and label.
test.html
<link rel="stylesheet" type="text/css" href="test.css"/>
<input type="checkobx" id="toggleCheck"/>
<label for="toggleCheck">Label for button</label>
<div class="hiddenContent">
<p>Yours hidden stuff goes here</p>
</div>
test.css
#toggleCheck{ display: none;}
label[for='toggleCheck']{
padding: 5px 10px;
background: green;
border-radius: 4px;
box-shadow: 1px 1px 2px black;
}
.hiddenContent{
display: none;
}
#toggleCheck:checked + label{
/* Styles for button in opened state*/
box-shadow: 0px 0px 2px black;
}
#toggleCheck:checked + label + .hiddenContent{
display: block;
}
With this technique you separate your logic from your views. IMHO, using JS for simple things like that leads to dark side.

How to style "input file" with CSS3 / Javascript? [duplicate]

This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
I would like to style <input type="file" /> using CSS3.
Alternatively, I would like user to press on a div (that I will style) and this will open the Browse window.
Is that possible to do that using HTML, CSS3, and Javascript / jQuery only ?
I have this rough example that you might want to get some idea...
html​
<div id="file">Chose file</div>
<input type="file" name="file" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
CSS
#file {
display:none;
}​
jQuery
var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);
fileInput.change(function(){
$this = $(this);
$('#file').text($this.val());
})
$('#file').click(function(){
fileInput.click();
}).show();
demo
​​​​​​​​​​​​​​
After checking Reigels idea, and this one, I wrote this simple solution to the common problem of styling a type="file" input field (tested it on Firefox, Safari and Chrome).
<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;">
</div>
Then you can of course style the "file" div as you want.
And if you want to use a type="text" input instead of a div, simply change innerHTML for value:
<div style="position:relative;">
<input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file">
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;">
</div>
Here is my original answer using jQuery:
<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());">
</div>
I made a custom style for this as well. Check it out
JS Fiddle Demo - Custom Input type="file"
HTML
<input type="file" id="test">
<div class="button-group">
Browse
Save
Clear
</div>
<input type="text" id="testfile"></input>
CSS
body {
padding:100px;
}
input[type="file"] {
position:absolute;
display:none;
}
#testfile {
height: 26px;
text-decoration: none;
background-color: #eee;
border:1px solid #ccc;
border-radius:3px;
float:left;
margin-right:5px;
overflow:hidden;
text-overflow:ellipsis;
color:#aaa;
text-indent:5px;
}
#actionbtnBrowse, #actionbtnSave {
margin:0 !important;
width:60px;
}
JQuery
$("#browse").click(function () {
$("#test").click();
})
$("#save").click(function () {
alert('Run a save function');
})
$("#clear").click(function () {
$('#testfile').val('');
})
$('#test').change(function () {
$('#testfile').val($(this).val());
})
Also add to external resources tab:
https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css
Here is how to do it using HTML, CSS and Javascript (without any frameworks):
The idea is to have the <input type='file'> button hidden and use a dummy <div> that you style as a file upload button. On click of this <div>, we call the hidden <input type='file'>.
Demo:
// comments inline
document.getElementById("customButton").addEventListener("click", function(){
document.getElementById("fileUpload").click(); // trigger the click of actual file upload button
});
document.getElementById("fileUpload").addEventListener("change", function(){
var fullPath = document.getElementById('fileUpload').value;
var fileName = fullPath.split(/(\\|\/)/g).pop(); // fetch the file name
document.getElementById("fileName").innerHTML = fileName; // display the file name
}, false);
body{
font-family: Arial;
}
#fileUpload{
display: none; /* do not display the actual file upload button */
}
#customButton{ /* style the dummy upload button */
background: yellow;
border: 1px solid red;
border-radius: 5px;
padding: 5px;
display: inline-block;
cursor: pointer;
color: red;
}
<input type="file" id="fileUpload"> <!-- actual file upload button -->
<div id="customButton">Browse</div> <!-- dummy file upload button which can be used for styling ;) -->
<span id="fileName"></span> <!-- the file name of the selected file will be shown here -->
The fake div is not needed! No Js no extra html. Using only css is possible.
The best way is using the pseudo element :after or :before as an element overt the de input. Then style that pseudo element as you wish. I recomend you to do as a general style for all input files as follows:
input[type="file"]:before {
content: 'Browse';
background: #FFF;
width: 100%;
height: 35px;
display: block;
text-align: left;
position: relative;
margin: 0;
margin: 0 5px;
left: -6px;
border: 1px solid #E0E0E0;
top: -1px;
line-height: 35px;
color: #B6B6B6;
padding-left: 5px;
display: block;
}
--> DEMO
In addition of Reigel,
here is more simpler implementation. You can use this solution on multiple file input fields, too. Hope this helps some people ;-)
HTML (single input)
<input type="file" name="file" />
HTML (multiple input)
<!-- div is important to separate correctly or work with jQuery's .closest() -->
<div>
<input type="file" name="file[]" />
</div>
<div>
<input type="file" name="file[]" />
</div>
<div>
<input type="file" name="file[]" />
</div>
JavaScript
// make all input fields with type 'file' invisible
$(':file').css({
'visibility': 'hidden',
'display': 'none'
});
// add a textbox after *each* file input
$(':file').after('<input type="text" readonly="readonly" value="" class="fileChooserText" /> <input type="button" value="Choose file ..." class="fileChooserButton" />');
// add *click* event to *each* pseudo file button
// to link the click to the *closest* original file input
$('.fileChooserButton').click(function() {
$(this).parent().find(':file').click();
}).show();
// add *change* event to *each* file input
// to copy the name of the file in the read-only text input field
$(':file').change(function() {
$(this).parent().find('.fileChooserText').val($(this).val());
});
Here's an example that I'm using that utilizes jQuery, I've tested against Firefox 11, and Chrome 18, as well as IE9. So its pretty compatible with browsers in my book, though i only work with those three.
HTML
Here's a basic "Customizable" HTML structure.
<span>
File to Upload<br />
<label class="smallInput" style="float:left;">
<input type="file" name="file" class="smallInput" />
</label>
<input type="button" class="upload" value="Upload" style="float:left;margin-top:6px;margin-left:10px;" />
</span>
CSS
Here's a sample of my CSS
label.smallInput {
background:url(images/bg_s_input.gif) no-repeat;
width:168px;
}
JavaScript
This is the heavy lifter.
/* File upload magic form?? */
$("input.smallInput[type=file]").each(function(i){
var id = "__d_file_upload_"+i;
var d_wrap = $('<div/>').attr('id',id).css({'position':'relative','cursor':'text'});
$(this).wrap(d_wrap).bind('change blur focus keyup click',function(){
$("#"+id+" input[type=text]").val($(this).val());
}).css({'opacity':0,'zIndex':9999,'position':'absolute'}).removeClass('smallInput');
obj = $(this);
$("#"+id).append($("<input/>").addClass('smallInput').attr('type','text').css({'zIndex':9998,'position':'absolute'}).bind('click',function(e){obj.trigger('click');$(this).blur();}));
obj.closest('span').children('input.upload[type=button]').bind('click',function(e){
obj.trigger('click');
$(this).blur();
});
});
/* ************************ */
Explanation
The HTML is pretty straight forward, just a simple element, i include the button so it can be named independently from the rest, sure this could be included in the JavaScript, but simply put, I'm a bit on the lazy side. The code searches for all inputs with a class of smallInput that have the type of file this allows you to define default HTML and fallback form structure in case a browser decides to be a pain.
This method only uses JavaScript to ensure delivery, it does not alter any browser behaviors in regards to the file input.
You can modify the HTML and JavaScript to make it very robust, this code suffices my current project so i doubt I'll be making any changes to it.
Caveats
Different browsers treat the value of the file input differently, which in chrome results in c:\fakeroot\ on windows machines.
Uses anonymous functions, (for lack of a better word) which means if you have too many file inputs you can cause the browser to behave slowly on processing.
Ran into the same issue today, but it seems there's an easy way to have your own styles - hide the input, and style the associated label:
<div class="upload">
<label for="my-input"> Upload stuff </label>
<input type="file" id="my-input" name="files[]" />
</div>
CSS:
.upload input{
display: none;
}
.upload label{
background: DarkSlateBlue;
color: white;
padding: 5px 10px;
}
Works in latest Chrome, Firefox and IE 10. Didn't test others
While Reigel's answer conveys the idea, it doesn't really have any style attached to it. I came across this problem recently and despite the plethora of answers on Stack Overflow, none really seemed to fit the bill. In the end, I ended up customizing this so as to have a simple and an elegant solution.
I have also tested this on Firefox, IE (11, 10 & 9), Chrome and Opera, iPad and a few android devices.
Here's the JSFiddle link -> http://jsfiddle.net/umhva747/
$('input[type=file]').change(function(e) {
$in = $(this);
$in.next().html($in.val());
});
$('.uploadButton').click(function() {
var fileName = $("#fileUpload").val();
if (fileName) {
alert(fileName + " can be uploaded.");
}
else {
alert("Please select a file to upload");
}
});
body {
background-color:Black;
}
div.upload {
background-color:#fff;
border: 1px solid #ddd;
border-radius:5px;
display:inline-block;
height: 30px;
padding:3px 40px 3px 3px;
position:relative;
width: auto;
}
div.upload:hover {
opacity:0.95;
}
div.upload input[type="file"] {
display: input-block;
width: 100%;
height: 30px;
opacity: 0;
cursor:pointer;
position:absolute;
left:0;
}
.uploadButton {
background-color: #425F9C;
border: none;
border-radius: 3px;
color: #FFF;
cursor:pointer;
display: inline-block;
height: 30px;
margin-right:15px;
width: auto;
padding:0 20px;
box-sizing: content-box;
}
.fileName {
font-family: Arial;
font-size:14px;
}
.upload + .uploadButton {
height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="button" class="uploadButton" value="Browse" />
<input type="file" name="upload" accept="image/*" id="fileUpload" />
<span class="fileName">Select file..</span>
</div>
<input type="button" class="uploadButton" value="Upload File" />
</form>
Hope this helps!!!
Here is a solution with a text field where the user types in the (relative) pathname of the file copy on the server (if authorized) and a submit button to browse the local system for a file and send the form:
<form enctype="multipart/form-data" action="" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<p><input type="file" name="upload_file" id="upload_file" size="40"/></p>
<p><input type="text" id="upload_filename" name="upload_filename" size="30" maxlength="100" value="<?php echo htmlspecialchars($filename, ENT_COMPAT, 'UTF-8'); ?>"/>
<input type="submit" class="submit submit_upload" id="upload_upload" name="upload_upload" value="Upload"/></p>
</form>
The scripting part hides the file input, clicks it if the user clicks on the submit button, submits the form if the user has picked up a file. If the user tries to upload a file without entering a filename, the focus is first moved to the text field for the filename.
<script type="text/javascript">
var file=$('#upload_file');
var filename=$('#upload_filename');
var upload=$('#upload_upload');
file.hide().change(function() {if (file.val()) {upload.unbind('click').click();}});
upload.click(function(event) {event.preventDefault();if (!filename.val()) {filename.focus();} else {file.click();}});
</script>
Simply style the submit button for a perfect result:
.submit {padding:0;margin:0;border:none;vertical-align:middle;text-indent:-1000em;cursor:pointer;}
.submit_upload {width:100px;height:30px;background:transparent url(../images/theme/upload.png) no-repeat;}
This is my method if i got your point
HTML
<form action="upload.php">
<input type="file" id="FileInput" style="cursor: pointer; display: none"/>
<input type="submit" id="Up" style="display: none;" />
</form>
jQuery
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
When you retreive the value of an input field, browser will return a fake path (literally C:\fakepath[filename] in Chrome). So I would add the following to the Javascript solutions:
val=$('#file').val(); //File field value
val=val.replace('/','\\'); //Haven't tested it on Unix, but convert / to \ just in case
val=val.substring(val.lastIndexOf('\\')+1);
$('#textbox').val(val);
Ofc, it could be done in a single line.

Categories