I'm trying to code a custom upload button. I've hidden the regular one and then put a div with image background over the top.
It works great but I want to fill the (disabled) input field below with the file name once the user selects a file but it's not working.
JavaScript:
document.getElementById("upload_button").onchange = function () {
document.getElementById("upload_file").value = this.value;
};
HTML:
<div id="Form_FileInput_Container"><input type="file" id="upload_button" /></div>
<input class="Form_Input" id="upload_file" placeholder="Choose File" disabled="disabled" />
CSS:
#Form_FileInput_Container { position: relative; width: 100px; height: 100px; background: #e5e5e5 url('path/to/upload/image/forms_upload.png') no-repeat; border: 1px solid #cccccc; }
#Form_FileInput_Container input { filter: alpha(opacity=0); opacity: 0; width: 100px; height: 100px; }
Any help is most appreciated :)
Make sure you attach your JavaScript after the elements exist.
<input id="foo" type="file" />
<input id="bar" type="text" placeholder="Choose File" disabled />
// after elements exist
var foo = document.getElementById('foo'),
bar = document.getElementById('bar');
foo.addEventListener('change', function () {
var slash = this.value.lastIndexOf('\\');
bar.value = this.value.slice(slash + 1);
});
DEMO
HTML:
<input type="file" id="upload_button" onchange="cutomButton()" />
JS:
function customButton() {
var z=document.getElementById("upload_button").value;
document.getElementById("upload_file").value = z;
alert(document.getElementById("upload_file").value);
}
Related
After entering value in the text box and pressing submit button, how to resize the textbox according to value inside. So the text center alignment displays properly(Using plain javascript or css).
<!DOCTYPE html>
<body>
<div class="block">
☀
<input type="text" id="inputValue" placeholder="Change City"></input>
<button type="submit" id="submit">Submit</button>
</div>
<style>
.block{
border: 2px solid;
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#inputValue{
border: none;
}
#submit{
display: none;
}
</style>
<script>
var inputValue = document.querySelector("#inputValue");
var submit = document.querySelector("#submit");
inputValue.addEventListener("click",function(){
submit.style.display = "block";
});
submit.addEventListener("click",function(){
submit.style.display = "none";
});
</script>
</body>
</html>
I will give a example to you. Ge the idea from here
<input class="txt" id="inputBox" type="text"><br>
<button onClick=test()>test</button>
function test(){
var getClass = document.querySelector( ".txt" );
var getValue = document.getElementById("inputBox").value.length
getClass.style.width = ((getValue + 1) * 8) + 'px';
}
As well as this is another way to do this , this will be better for you.
click here
function test(){
var getClass = document.querySelector( ".txt" );
var getValue = document.getElementById("inputBox").value.length
getClass.style.width = ((getValue + 1) * 8) + 'px';
}
<input class="txt" id="inputBox" type="text"><br>
<button onClick=test()>
test
</button>
The sun-icon is decorative and would therefore be suited to being in a CSS pseudo element rather than part of the main HTML.
It is not possible to add a pseudo before element to an input element, but we can give it a label and add the sun-icon in its before pseudo element.
label::before {
content: '\2600';
/* Unicode value for the HTML characer '☀';*/
}
We can also use this when the user clicks on submit. The text the user has input can become the label text - this will mean the user can select it if wanted, and can also click on it again to go back to edit it and submit (it is not clear from the question if this is what is required, but it seems logical to restore the input element on click).
let inputValue = document.querySelector("#inputValue");
let submit = document.querySelector("#submit");
let label = document.querySelector("#label");
inputValue.addEventListener("click", function() {
submit.style.display = "block";
inputValue.style.display = "inline-block";
label.innerHTML = '';
});
submit.addEventListener("click", function() {
submit.style.display = "none";
label.innerHTML = inputValue.value;
inputValue.style.display = 'none';
});
.block {
border: 2px solid;
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
label::before {
content: '\2600';
/* Unicode value for the HTML characer '☀';*/
}
#inputValue {
border: none;
}
#submit {
display: none;
}
<div class="block">
<label for="inputValue" id="label"></label>
<input type="text" id="inputValue" placeholder="Change City" />
<button type="submit" id="submit">Submit</button>
</div>
I am currently creating a meme generator app where the user can submit an image, as well as top and bottom text. I want to make it so that after form submission, the text is added onto the image and styled using CSS. I have already tried adding a class to the elements and adding css to it but that does not work. Here is my code:
JS
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
//create the divs for the memes
let newDiv = document.createElement('div');
form.appendChild(newDiv);
topTxt.classList.add('top')
bottomTxt.classList.add('bottom')
memePic.src = img.value;
newDiv.append(memePic, topTxt.value, bottomTxt.value);
//set the textbox inputs equal to nothing
img.value = '';
topTxt.value = '';
bottomTxt.value= '';
})
CSS
div {
width: 30%;
height: 300px;
margin: 10px;
display: inline-block;
}
img {
width: 100%;
height: 100%;
margin: 10px;
display: inline-block;
}
.top{
color: blue;
}
#bottom-txt {
color: red;
}
HTML
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<script src="meme.js"></script>
</body>
</html>
You just need to fix up some of logic how the elements are being appended after form is submitted.
For that you need to div after your form which will hold you results and then order your element to be displayed. I have also added a line hr to have separator between each results displayed.
You can style your element the way you would like them to be - i have added some basic CSS to show some styling and an actual img url for demo purpose only.
Live Working Demo:
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
let results = document.querySelector('.meme-results');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
var hrLine = document.createElement('hr');
//create the divs for the memes
let newDiv = document.createElement('div');
let topText = document.createElement('span');
let bttomText = document.createElement('span');
//Top text
topText.classList.add('top')
topText.textContent = topTxt.value
//Img
memePic.src = img.value;
results.appendChild(topText);
results.append(memePic);
//bottom text
bttomText.classList.add('bottom')
bttomText.textContent = bottomTxt.value
results.append(bttomText);
results.append(hrLine);
//set the textbox inputs equal to nothing
//img.value = '';
topTxt.value = '';
bottomTxt.value = '';
})
.meme-results {
width: 30%;
height: 300px;
margin: 10px;
display: block;
}
img {
width: 100%;
height: 100%;
display: block;
}
.top, #top-txt {
color: blue;
}
.bottom, #bottom-txt {
color: red;
}
<html>
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url" value="https://via.placeholder.com/150"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<div class="meme-results"></div>
<script src="meme.js"></script>
</body>
</html>
I have some code that works perfectly for grabbing and clicking a custom upload file button. The thing is I want it to duplicate this form 2 more times to have the user use 3 upload buttons in my overall form. So the user will be able to upload three files. My question is, how do I change my vanilla JavaScript so that instead of grabbing the one element, it grabs multiple elements? Do I use getElementsByClassName? And if I do how do I iterate through each form element individually to upload the file?
Upload form 1:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
Upload form 2:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
upload form 3:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");
customBtn.addEventListener("click", function() {
realFileBtn.click();
});
realFileBtn.addEventListener("change", function() {
if (realFileBtn.value) {
customTxt.innerHTML = realFileBtn.value.match(
/[\/\\]([\w\d\s\.\-\(\)]+)$/
)[1];
} else {
customTxt.innerHTML = "No file chosen, yet.";
}
});
CSS
#custom-button {
padding: 10px;
color: white;
background-color: #009578;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
#custom-button:hover {
background-color: #00b28f;
}
#custom-text {
margin-left: 10px;
font-family: sans-serif;
color: #aaa;
}
As suggested by #Taplar, you'll need to change IDs to classes and then somehow link the elements (I used data-file-input-id).
One of the possible solutions could be:
HTML:
<input type="file" class="real-file" id="first" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="first" >CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="first">No file chosen, yet.</span>
<input type="file" class="real-file" id="second" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="second">CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="second">No file chosen, yet.</span>
<input type="file" class="real-file" id="third" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="third">CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="third">No file chosen, yet.</span>
JS:
// Grab only buttons with data-file-input-id attribute
const buttons = document.querySelectorAll("button[data-file-input-id]");
const fileInputs = document.querySelectorAll("input[type=file]");
Array.from(buttons).forEach(function (button) {
button.addEventListener("click", function () {
const correspondingInputId = button.getAttribute("data-file-input-id");
document.getElementById(correspondingInputId).click();
});
});
Array.from(fileInputs).forEach(function (fileInput) {
fileInput.addEventListener("change", function () {
const fileInputId = fileInput.id;
const correspondingTextField = document.querySelector(
'span[data-file-input-id="' + fileInputId + '"]'
);
if (fileInput.value) {
correspondingTextField.innerHTML = fileInput.value.match(
/[\/\\]([\w\d\s\.\-\(\)]+)$/
)[1];
} else {
correspondingTextField.innerHTML = "No file chosen, yet.";
}
});
});
CSS:
.custom-button {
padding: 10px;
color: white;
background-color: #009578;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
.custom-button:hover {
background-color: #00b28f;
}
.custom-text {
margin-left: 10px;
font-family: sans-serif;
color: #aaa;
}
I have simple div with one element:
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
When I click on #drop-zone I want to trigger input manually. I'm trying like this:
jQuery('#drop-zone:not(input)').click(function() {
jQuery(this).find('input[type="file"]').trigger('click')
})
The main problem is that I'm getting an endless loop of clicks as my manual click trigger listener on parent element.
Make sure that the element clicked was the drop-zone by checking the id of the target. When jQuery emulates an event it will pass the same this reference but will not pass the event, so just check if the event is set.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone" && event.originalEvent) {
$("#drop-zone>input").trigger("click");
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
You could also just trigger the event manually.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone") {
$("#drop-zone>input")[0].click();
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
Maybe this is what you want:
var x_m = 0;
var y_m = 0;
$('#drop-zone').click(function(event) {
var mtarget = document.elementFromPoint(x_m, y_m);
if (mtarget.id === "drop-zone") {
var input = $(this).find('input[type="file"]');
var h = false;
if ($(input).is(":visible")) {
input.hide();
} else {
input.show();
h = true;
}
console.log("You clicking, the #drop-zone, input.visible =>", h);
} else {
console.log("You clicking the input.");
}
})
$('body').mousemove(function(evt){
x_m = evt.pageX;
y_m = evt.pageY;
});
#drop-zone {
height: 40px;
width: 250px;
background-color: #8b5fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none; background: green;" multiple="multiple">
</div>
I have a following <div> structure:
<div class="color-class" data-color="red">
<div class="inside-color">Red</div>
</div>
<div class="color-class" data-color="green">
<div class="inside-color">Green</div>
</div>
<div class="color-class" data-color="blue">
<div class="inside-color">Blue</div>
</div>
So, when people click on any color class then the page is redirected with corresponding color in the url with the following:
var color=urlObj.searchParams.get("color");
$(".color-class").on("click",function(){
if( $(this).find(".inside-color").hasClass("selected")){
location.href=location.href.replace(/&?color=([^&]$|[^&]*)/i, "");
}
else {
var se_val=$(this).data("color");
$(this).find(".inside-color").addClass("selected");
if ( !color ){
if(url.indexOf("?") >= 0){
url =url+"&color="+se_val;
}
else {
url =url+"?color="+se_val;
}
window.location.href=url;
return;
}
if ( color){
urlObj.searchParams.set("color", color+","+se_val);
window.location.href=urlObj;
return;
}
}
});
So using this code i can redirect so after my redirection i get url like example.com/?color=red
Then I have to add class name called selected to the corresponding inside-color.
So I write the following code:
if ( color ){
$(".color-class[data-color='"+color+"']").find(".inside-color").addClass("selected");
}
But if my url is http://www.example.com/?color=red%2Cgreen how i can add selected class to both… ie add selected class to both red and green,
If my url is http://www.example.com/?color=red%2Cgreen and some one again click on green color then how can i remove green from the url and add selected to red color only.
Any Help will be appreciated.
Consider if this was a form, you might have something like:
<form action="example.com" method="get">
<input type="checkbox" class="inside-color" name="inside-color[]" value="red" /><label>Red</label>
<input type="checkbox" class="inside-color" name="inside-color[]" value="green" /><label>Green</label>
<input type="checkbox" class="inside-color" name="inside-color[]" value="blue" /><label>Blue</label>
<button type="submit">Go</button>
</form>
This will create an encoded URL like:
example.com?inside-color%5B%5D=red&inside-color%5B%5D=green
This is the method for passing an Array via GET. one option would be to pass the details in this method and parse it. Doing this will result in a small array and you can then iterate the array set selected on each of the specific colors.
In your example, you are passing a single string in one variable, and using a delimiter. Sp you'd need to first get the string and then split it. Again, this will result in an array that can be iterated.
if the user unchecked one of the options, removing selected, you could then remove that element from the array.
My suggestions:
function setSelections(c) {
$.each(c, function(k, v) {
if (v) {
$(".color-class[data-color=" + k + "]").addClass("selected");
}
});
}
$(function() {
var colors = {
red: 0,
green: 0,
blue: 0
};
$(".color-class").click(function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
colors[$(this).attr("data-color")] = 0;
} else {
$(this).addClass("selected");
colors[$(this).attr("data-color")] = 1;
}
});
$("#save-selection").click(function(e) {
e.preventDefault();
var url = "http://example.com/?" + $.param(colors);
console.log("URL: " + url);
})
});
.color-class {
width: 40px;
height: 40px;
border: 2px solid #ccc;
border-radius: 4px;
margin: 2px;
}
.color-class:hover {
border-color: #a0a0a0;
}
.color-class.selected {
border-color: #202020;
}
.color-class .inside-color {
border-radius: 3px;
width: 100%;
height: 70%;
color: white;
font-size: 75%;
text-align: center;
padding-top: 30%;
}
.color-class .inside-color.red {
background: red;
}
.color-class .inside-color.green {
background: green;
}
.color-class .inside-color.blue {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-class" data-color="red">
<div class="inside-color red">Red</div>
</div>
<div class="color-class" data-color="green">
<div class="inside-color green">Green</div>
</div>
<div class="color-class" data-color="blue">
<div class="inside-color blue">Blue</div>
</div>
<button id="save-selection">Save</button>
The console shows: URL: http://example.com/?red=1&green=1&blue=0 This will be easier to parse back into an object that can be used with setSelections() function.
Hope that helps.
ok try something like this i am just posting some part of your code
var color=urlObj.searchParams.get("color");
if ( color ){
var splitColors = color.split('%2C');
for(var i=0;i<splitColors.length;++i)
{
$(".color-class[data-color='"+splitColors[i]+"']").find(".inside-color").toggleClass("selected");
}
}