Custom browse button to upload a fle - javascript

Hi I have currently custom 2 button called Browse and Import. I also have a input type as a text. My question is how i can browse and select a record and place in input type text
Please advise
<input type="button" id="btnBrowse" value="Browse" onclick="document.getElementById('fileID').click(); return false" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
<input type="submit" id="btnSubmit" value="Import" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

You can however customize nearly any other html element.
Here is a complete solution:
<input id="btn" type="file" style="display:none;" onchange="document.getElementById('file').value=this.value.substring(this.value.lastIndexOf('\\')+1);">
<input id="file" type="text" style="width:200px;">
<input type="button" onclick="document.getElementById('btn').click();" value="click me" />

Of course you can style a file input button. This has been covered over, and over, and over again on SO. For example, Labeling file upload button.

you can use
<input type="file"/>

Related

Automatically show form value on page load or submit using .innerHTML

I'm trying to find the simplest, non-expert-coder solution to displaying a search query.
I have a search form where onclick of the submit button it displays the form value underneath. This is the code:
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value" />
<div id="output"></div>
The page reloads on submit rather than going to another page.
Is there a simple way to manipulate my code do display the value in the output div automatically upon page load, rather than onclick?
So whatever was placed in the search box will automatically be displayed once the page loads after refresh or submit. If nothing was entered, then nothing will show.
There are many ways to achieve this, but this would do the job:
<input type="text" name="searchfield" id="searchfield" value="" />
<button onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value">Submit</button>
<div id="output"></div>
And using PHP,
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" />
<div id="output">
<?php
if($_GET['searchfield'])
echo $_GET['searchfield'];
?>
</div>

Removing/Clearing all selected files via the File Input button

I'm using the input element in HTML with the file type option, IE: <input type="file" /> with the option of allowing multiple files to be selected.
However, I'm wondering if there's a way to remove or clear all of the files that the user selected via the file type button though a click of a button.
Basically, here is what I have so far:
<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="" />
I have no idea how to implement that second button.
There is a trick: Redraw the HTML block! Source
<div id="container">
<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="clearSelection();" />
</div>
//Javascript
function clearSelection() {
document.getElementById("container").innerHTML = document.getElementById("container").innerHTML;
}

Multiple file upload doesn't work (do I need javascript here?)

Here is my html form:
<form id="formulir" method="post" enctype="multipart/form-data" action="config-template-ecomerce.php">
title-file<input name="title" type="text" id="title"/><br>
color-one<input name="color-one" type="text" id="color-one"/><br>
<img id="uploadPreview" style="width: 100px;" /><br>
image<input type="file" name="image[]" id="image" onchange="PreviewImage();" multiple="true" /><br>
submit<input type="submit" name="button" id="button" value="Submit" />
</form>
From the html form above, I want to select multiple file with one browse botton.
After I select one file with the browse botton, then the file of image will be changed if I select another file of image. What I want is the file is added not changed.
Do I need a script for this? I have tried this in three browsers: chrome, opera and mozila.
According to our discussion in chat, you want to generate upload button dynamically. I can give you an example:
Suppose you have one upload button in html like this:
<body>
<form>
<input type="file" name="upload1" id="upload1"/>
</form>
</body>
Then, you can add another upload button on Click event on previous button using jquery:
$(function(){
$('#upload1').on('click',function(){
var r= $('<input type="file" value="new button"/>');
$("form").append(r);
});
});
JSFIDDLE DEMO HERE

HTML5: Change button focus when using another input box

I am making an HTML5 page with multiple forms. Each input box has its own submit button to convert the temperature unit into another (Celsius to Kelvin, etc.). What tags or attributes do I need to make the submit button focus when its input box is focused or typed in by the user?
Javascript (made from coffeescript) is used in this file. There is no CSS.
You can use javascript for this
write onfocus="hilight(form_number);" on each input box.
and in your function you can hilight the button
<form name="form1">
<input type="text" onfocus="hilight(1)" />
<input type="submit" id="btn_1" class="button" />
</form>
<form name="form2">
<input type="text" onfocus="hilight(2)" />
<input type="submit" id="btn_2" class="button" />
</form>
<form name="form1">
<input type="text" onfocus="hilight(3)" />
<input type="submit" id="btn_3" class="button" />
</form>
<script>
function hilight(opt)
{
document.getElementById('btn_'+opt).style('','');//you can add any styles to button here
}
</script>
Have you tried using the onblur event of the input box to set the focus to the respective submit?

how to fill up numbers in a form field via a popup key pad(using Javascript/AJAX)

I have a small project, wherein I need to develop a keypad with all the digits+backspace+decimal (all as buttons). These digits when clicked should populate a form field (say a text box). This keypad should be located next to the form field as a link.
The keypad should be preferably Javascript/AJAX. Also the keypad routine should have a close button in order to minimize the popup keypad. (It's very much similar to a calendar control which we see in ticketing websites.)
To round up the keypad routine does nothing fancy but to just populate the form field, when the digits (buttons) are clicked.
I need help with coding the keyboard routine. How do I design the javascript? How to include the buttons (for the digits+decimal+backspace in the file)? How to code the part where when the buttons are clicked, then that value is showed in the form field?
Any help is greatly appreciated.
Thanks
Where's the problem?
No need to use ajax. Very quick and dirty example:
test here --> http://www.codebase.es/so/numpad.html
<html>
<head><title></title></head>
<body>
<script> function $(id) { return document.getElementById(id); } </script>
<input id="num" type="text" readonly="true"/>
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="$('num').value+=7;"/>
<input type="button" value="8" onclick="$('num').value+=8;"/>
<input type="button" value="9" onclick="$('num').value+=9;"/><br/>
<input type="button" value="4" onclick="$('num').value+=4;"/>
<input type="button" value="5" onclick="$('num').value+=5;"/>
<input type="button" value="6" onclick="$('num').value+=6;"/><br/>
<input type="button" value="1" onclick="$('num').value+=1;"/>
<input type="button" value="2" onclick="$('num').value+=2;"/>
<input type="button" value="3" onclick="$('num').value+=3;"/><br/>
<input type="button" value="X" onclick="$('keypad').style.display='none'"/>
<input type="button" value="0" onclick="$('num').value+=0;"/>
<input type="button" value="←" onclick="$('num').value=$('num').value.substr(0,$('num').value.length-1);"/>
</div>
</body>
</html>
Do not use "as is"... use css stylesheets, functions, etc.

Categories

Resources