In a nutshell,
Below is what I am trying to accomplish:
http://jsfiddle.net/n3r8conn/8/
but as shown I am having issues, it would work as follow:
User clicks on button once, the file gets selected from input and then display in the files_1 id, user clicks on button again, file gets selected, and then output into files_id2,
This part only shows the upload part, in other words, everything mention above beside displaying the image on screen.
Html COde:
<button id="uploadDevice" class="button button-block button-positive">
<i class="icon ion-android-mail"></i> <text id="textBtn1">From Device </text>
</button>
<input type="file" class="uploadDevice" id="files_1" name="image_file_arr[]" multiple>
<input type="file" class="uploadDevice" id="files_2" name="image_file_arr[]" multiple>
<input type="file" class="uploadDevice" id="files_3" name="image_file_arr[]" multiple>
JavaScript Code:
$('#uploadDevice').click(function(){
myGlobalCounter++;
$( '#files_' +myGlobalCounter ).val('Secret text ' + myGlobalCounter);
});
CSS code:
.uploadDevice{
visibility : hidden;
}
Update:
<ion-content>
<ion-slide-box id="uploadedPictures" on-slide-changed="slideHasChanged($index)">
<ion-slide>
<output id="profilePic1"></output>
</ion-slide>
<ion-slide>
<output id="profilePic2"></output>
</ion-slide>
<ion-slide>
<output id="profilePic3"></output>
</ion-slide>
</ion-slide-box>
<div class="row">
<div class="col col-50">
<button id="uploadFacebook" class="button button-block button-positive">
<i class="icon ion-social-facebook"></i> <text id="textBtn1"> From Facebook
</button>
</div>
<div class="col col-50"><a href="javascript:void(0)" id="buttonFile" href="">
<button id="uploadDevice" class="button button-block button-positive">
<i class="icon ion-android-mail"></i> <text id="textBtn1">From Device </text>
</button></a>
<input type="file" class="uploadDevice" id="files" name="image_file_arr[]" multiple>
</div>
</div>
<style>
.uploadDevice{
visibility : hidden;
}
</style>
<script>
$("#buttonFile").click(function(){
$("#files").trigger('click');
});
</script>
script
function handleFileSelect(evt) {
var $fileUpload = $("input#files[type='file']");
if (this.files.length > 4) {
alert("You can only upload a maximum of 5 files");
evt.preventDefault();
evt.stopPropagation();
return false;
}
var files = this.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
(function(i){
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
var span = document.createElement('span');
span.innerHTML = ['<img id="userPictures" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('profilePic' + (i + 1)).appendChild(span);
};
})(f);
reader.readAsDataURL(f);
})(i);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Here's another version of the 3rd answer.
This one just moves each FILE INPUT after you click on it, so you can see that the next FILE INPUT is now in place to be clicked.
Basically, instead of using z-index to rotate the just-clicked FILE INPUT to the bottom of the stack, I am moving it down the page so you can visually see what is happening.
jsFiddle Demo
Code:
var xx, global_cnt = 1;
$('#clicker').button(); //use jQueryUI to auto-style the button
$('div').click(function(){
xx = global_cnt * 60;
$('#real_uploader_' +global_cnt).css({'position':'absolute','top':xx+'px'});
global_cnt++;
if ( $('#real_uploader_' +global_cnt).length ){
$('#real_uploader_' +global_cnt).css('z-index','2');
}
});
Something like this?
jsFiddle Demo
HTML:
<input type="text" class="th" id="typeHidden_1" />
<input type="text" class="th" id="typeHidden_2" />
<input type="text" class="th" id="typeHidden_3" />
<input type="text" class="th" id="typeHidden_4" />
<input type="button" id="mybutt" value="Show Me" />
<input type="button" id="nutherbutt" value="Read Hidden Field" />
javasccript/jQuery:
var myGlobalCounter = 0;
$('#mybutt').click(function(){
myGlobalCounter++;
$( '#typeHidden_' +myGlobalCounter ).val('Secret text ' + myGlobalCounter);
});
$('#nutherbutt').click(function(){
for (n=1; n<= myGlobalCounter; n++){
var tmp = $('#typeHidden_' +n).val();
alert( tmp );
}
});
I apologize -- I did not read your answer carefully enough the first time.
The <input type="file" /> element is special. For security reasons, there is very little you can do with javascript to control a file input element. You cannot set the filename programmatically, and you cannot click the button programmatically.
However, there is a work-around that is frequently proposed:
HTML:
<div>
<button>Upload File</button>
<input type="file" id="upload_input" name="upload" />
</div>
CSS:
div{display:block;width:100px;height:20px;overflow:hidden;}
button{width:110px;height:30px;position:relative;top:-5px;left:-5px;}
input{font-size:50px;width:120px;opacity:0;filter:alpha(opacity:0); position:relative;top:-40px;left:-20px;background:yellow;}
non-working jsFiddle with code
References:
In JavaScript can I make a "click" event fire programmatically for a file input element?
Programmatically set the value of a type="file" input HTML element?
Let me try again.
I was having some difficulty understanding what you need. If I can get my head around that, then I'm pretty sure I can help.
Please check if this is what you need.
This code has 3 <input type="file" > elements. All 3 are "invisible" (using opacity, to they remain where they are on screen, they are just invisible).
The FILE inputs are also stacked on top of each other. At the start, input_1 is on top --- but it is invisible, so all you see is the BUTTON underneath it.
When "the button" (really, input_1) is clicked, three things happen:
(1) the OPEN dialog (Choose a file to upload) is displayed for input_1
(2) global_cnt is used to move input_1 to the back (using z-index)
(3) global_cnt is incremented, and then used again to move input_2 to the front
(4) global_cnt is now at the correct number to move input_2 to back when it is clicked
Each time the user clicks "the button" (really, they are clicking an invisible input type="file" element), a different input element is moved to the top. Therefore, by clicking the same "button", the user keeps uploading to a different file input.
Note: this works because when you click input_1, the div also gets the click event (through event bubbling).
jsFiddle Demo code
Code:
HTML:
<div>
<input type="button" id="clicker" value="Upload File" />
<input type="file" class="hidden_uploaders" id="real_uploader_1" name="upload_1" />
<input type="file" class="hidden_uploaders" id="real_uploader_2" name="upload_2" />
<input type="file" class="hidden_uploaders" id="real_uploader_3" name="upload_3" />
</div>
javascript/jQuery:
var global_cnt = 1;
$('#clicker').button(); //use jQueryUI to auto-style the button
$('div').click(function(){
if ( $('real_uploader_' +global_cnt).length ) $('real_uploader_' +global_cnt).css('z-index','-1');
global_cnt++;
if ( $('real_uploader_' +global_cnt).length ) $('real_uploader_' +global_cnt).css('z-index','2');
});
still working on this
Related
I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>
It works fine when I select / deselect a file via the Choose File button:
$("input[type='submit']").toggle(false);
$("input[type='file']").change(function() {
if ($(this).val() != "") {
$("#btn").toggle();
} else {
$("#btn").toggle();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fld" type="file" name="image" id="file">
<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" id="upload_picture" class="btn" />
<br>
<br>
<div id="remove_button">Remove</div>
Click on the Choose File button and select a file. The Upload / Edit picture button will appear. Now click on the Choose File button again but do not select a file and exit the small popup window. The Upload / Edit picture button will disappear.
In my case I want the input="file" value to be cleared and the Upload / Edit picture button to disappear if I clear the value by clicking on the <div id="remove_button">Remove</div>
Is there a way to do that?
JSFiddle
Add this code into your javascript
$("#btn").toggle(false);
$("#fld").change(function(){
if($(this).val() != "")
{
$("#btn").toggle();
}
else{
$("#btn").toggle();
}
});
$("#remove_button").click(function(){
$("#fld").val('');
document.getElementById("btn").style.visibility = "hidden";
})
and remove id tag from your html..it has two ids for the button
change it like
<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture"
class="btn" />
What you can do is to bind a click event listener to the #remove_button element (which I recommend that you should be using <button> instead of a <div>).
In the callback, you can simply set the value of the file input to an empty string, which effectively resets the field. Remember that you will need to use .trigger('change') to manually reinvoke the show/hide logic based on the file input value:
const $submit = $("input[type='submit']");
$submit.hide();
$("#fld").change(function() {
$submit.toggle(!!this.value);
});
$('#remove_button').click(function() {
$('#fld').val('').trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fld" type="file" name="image" id="file">
<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" id="upload_picture" class="btn" />
<br>
<br>
<button id="remove_button">Remove</button>
if we have this code
<form>
<input required oninvalid="this.setCustomValidity('error messege')" />
<input type="submit">
</form>
when we click the submit button, the balloon is shown that contains error messege text...
now if we want to trigger this balloon to show what can we do ?
for example we have this HTML code :
<input id="myTextBox" >
<input type="button" onclick="showBalloon()" >
<script>
function showBalloon(){
var elem = document.getElementById('myTextBox');
elem.setCustomValidity('error messege');
// my problem is HERE !!!
elem.whichFunctionShouldICallOrWhatToDo(); // this shows balloon of myTextBox
}
</script>
I think you've got the main functionality down, you just need an HTML element, and to modify the style to show or hide.
<div id='myTextBox' style="display: none;"></div>
// i'd set it in your javascript, but you get the idea
elem.innerHTML = 'error message';
elem.style.display = 'visible'; //show
I'm creating a gallery that allows the uploader to upload an image/multiple images at a time. As a default, one file input is displayed with a text input for the corresponding image description.
I also have another button which simulates the file input being clicked for aesthetical purposes. Upon clicking this button, the file browser triggers but the form in which the file inputs are placed seems to submit?
<button id="new-dialogue">add image</button>
<form action="action.php" method="post" enctype="multipart/form-data">
<div class="create-upload">
<!-- SECTION REPEATED WITH DIFFERENT IDS AS #NEW-DIALOGUE CLICKED -->
<div class="upload">
<input class="image-upload" type="file" id="input1" name="file[]"/>
<button class="btn-select" id="1">select file</button>
<input id="desc" type="text" name="desc[]"/>
</div>
<!-- SECTION -->
</div>
</form>
with JavaScript
$('document').ready(function() {
var i = 1;
$('#new-dialogue').click(function() {
i++
if(i >= 6) {
} else {
$('.create-upload').append('<div class="upload"><input class="image-upload" type="file" id="input' + i + '" name="file[]"/><button class="btn-select" id="file' + i + '">select file</button><input id="desc" type="text" name="desc[]"/></div>');
$('.image-upload').imgPreview();
}
});
$('.btn-select').click(function () {
var id = this.id;
$('input#input' + id).click();
});
});
Put type='button' to disable the button from acting as a submit type.
<button class="btn-select" id="file1" type='button'>select file</button>
The idea behind this small project of mine is to have an user enter an URL for an img, when the user hits a button the img should then be inserted into a new <div> within the page.
I tried looking for hours at stackoverflow but I honestly don't understand how I can use other answers to my own code. Most of the CSS and HTML code is already done, I just need help with the javascript part if its possible at all.
Here is what I have so far:
HTML code:
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed()" />
</form>
Javascript code:
<script type="text/javascript">
function GetFeed(imgForm) {
var imgSrc = document.getElementById("src").value;
}
</script>
Can anyone help me out? I dont know where to go from here.. at least give me some pointers how can i get the value from the txt box and add a new
<div><img src="user input from txt box should go here"/></div> for every time an unser inserts and new URL for an img?
I think according to your need how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div> you need this
HTML
<form>
<input type="text" id="txt">
<input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>
JS (goes inside your head tags)
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.src=url;
div.appendChild(img);
document.getElementById('images').appendChild(div);
return false;
}
Here is an example.
You should add an id attribute to your <input>:
<input type="text" name="inputbox1" id="box1" value="src" />
...then, adjust your code:
var imgSrc = document.getElementById('box1').value;
Once you have the source, you can get back an object for the img tag, and set its properties using the value from the text box. The img object's properties are defined by the Document Object Model:
http://www.w3schools.com/jsref/dom_obj_image.asp
Something like this will create a div with an image element that has a src equal to the text in the input box. It then appends the div to end of the page.
<html>
<head>
<script type="text/javascript">
function GetFeed(form){
var imgSrc = form.elements["inputbox1"].value;
var imgDiv = document.createElement('div');
imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
document.body.appendChild(imgDiv);
}
</script>
</head>
<body>
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
</form>
</body>
</html>
your codes better should be like this:
html Codes:
<div class="input-group col-md-5" style="margin: 0px auto;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-image">
Choose
</button>
</div>
<input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
<img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>
js Codes:
function getImg(){
var url = document.getElementById('image_label').value;
var img = document.getElementById('imgThumb');
img.src = url;
return true;
}