I am using simple ajax uploader
https://github.com/LPology/Simple-Ajax-Uploader
https://www.lpology.com/code/ajaxuploader/docs.php
my file upload button
<div class="form-group">
<input type="button" id="upload-btn1" class="btn btn-success clearfix" value="Choose file">
</div>
I am trying to use onChange callback function of SimpleAjax Uploader
onChange( filename, extension, uploadBtn )
This Function is called when user selects a file.
The function gets passed three arguments:
a string containing the filename
a string containing the file extension
a reference to the button which triggered the upload
I am facing problem with 3rd parameter of onChange function uploadBtn which is button reference it can be different digits, so I wonder how can I use this reference to change my upload button text when file is selected!
Thanks.
This is actually a bug in simple ajax uploader.
For more info please see issue #115
I don't know the "SimpleAjax Uploader" library, but typical jQuery callbacks return a DOM element, rather than a wrapped set. Therefore, you should be able to change the displayed text of the button by converting it to a jQuery wrapped set and using the val() method. In the sample below, uploadBtn is a DOM element. The anchor tag's click handler wraps it and uses val() to change the text after each click.
var uploadBtn = document.getElementById('uploadBtn');
$('a').click(function() {
var d = new Date();
$(uploadBtn).val("Changed at " + d);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="uploadBtn" type="button" value="Default text" />
<br/>
Change the text of the button
In your case, you'd have an onchange callback like:
function onchange( filename, extension, uploadBtn ) {
$(uploadBtn).val("New text goes here");
}
Related
So I have a input type="file" in my html and a change EventListener which works properly. I now added a remove button which basically works like this:
function removeFile(){
document.getElementById("fileinput").value = "";
}
Simply setting the value of the file input to an empty string. But this does not trigger the event listener. How can I make this work?
Thanks,
Johannes
run ok
function removeFile(){
document.getElementById("fileinput").value = "";
}
document.querySelector('#btn1').addEventListener('click', function(){
removeFile()
})
<input type="file" name="" id="fileinput">
<button onclick="removeFile()">removeFile</button>
<button id="btn1">removeFile</button>
Just started working in Dreamweaver recently. I was wondering if when you are working with external javascript files, do you have to pass in html elements or can the js file see their id? For example;
<body>
<script src="client.js"></script>
<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>
And then in the client.js file
function getValue() {
"use strict";
document.getElementById(submit).value = document.getElementById(otherelement).value;
}
This isn't working in the first place and I understand that there are other errors, but mainly - can the client.js file see and use getElementById(submit) and getElementById(otherelement)?
I would suggest shying away from using inline JavaScript elements, and doing things differently. I'd suggest using addEventListener() to bind events from JavaScript.
So, remove the onclick attribute, and just do:
<input type="submit" name="submit" id="submit" value="Submit">
We will be adding the event in JavaScript. For this to work, the script needs to be ran after the page (DOM) is loaded. You can use window.onload = function(){} to do this or you can load the script at the end of the page (before </body>).
Anyway, in your JavaScript, you want to use:
document.getElementById("submit").addEventListener('click', function(event){
// NOTE: You are clicking a submit button. After this function runs,
// then the form will be submitted. If you want to *stop* that, you can
// use the following:
// event.preventDefault();
// In here `this` will be the element that was clicked, the submit button
this.value = document.getElementById('otherelement').value;
});
document.getElementById( id ) takes id param as string
Use
document.getElementById("otherelement");
document.getElementById("submit");
also remove the </td> as there is no <tr> in your code
If you don't use quotes to wrap your strings, javascript will try to find variables named submit or otherelement. Try adding quotes like that :
function getValue() {
"use strict";
document.getElementById("submit").value = document.getElementById("otherelement").value;
}
If you have an HTML element with an id attribute, The JS engine automatically converts it to a variable..
e.g.
<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>
equals to the var submit in your JS code (considering you load your JS file when the DOM is fully rendered).
In every HTML page an element id is unique and that's why it is converted to a variable and wll not be overwritten until you decide so.
I was wondering if when you are working with external javascript
files, do you have to pass in html elements or can the js file see
their id
Yes you can see the ID:
function whoAmI(e) {
document.getElementById('output').textContent = e.target.id;
}
<button id='Hiii' onclick='whoAmI(event)'>Check ID</button>
<p id='output'></p>
I have a simple HTML button in my webpage having its HTML shown below:
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<input type="button" value="Finish" class="finish">
</div>
When I applied the onclick="checkValidity();" on my button it was not working but when I tried it with the container div of the input button it starts working.
I am unable to understand why it was not working while I called this function in button? Can anyone have any idea on it.
Interesting thing is that is working in another webpage on the input button too... !
First of all, checkValidity is a keyword. Stop using it. Change it to CheckIfValid or something like that.
Simple example in the jsfiddle. Check here
chck = function (obj)
{
alert('hi: ' + obj.id);
return true;
}
checkValidity is an event for input objects and returns true if the input has valid data. So, there is no scope for js event here.
It works on div because DIV is not an input element.
Let me know if you have any issues.
You have to surround that input tag inside a form tag.
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<form>
<input type="button" value="Finish" class="finish">
</form>
</div>
I am using the dropbox chooser (https://www.dropbox.com/developers/dropins/chooser/js) as part of a form. Once the user has selected a file, I would like to display that file name next to the chooser button.
It would also be nice to include a 'remove' link to clear the selection.
i assume that this will be done using javascript/jquery. Any help would be greatly appreciated.
EDIT: An earlier answer used e.files[0].link.split('/').pop(), but there's a field for this already! It's called name. Updated below.
The file name is one of the things returned, so you can just do this:
var url = e.files[0].link;
var name = e.files[0].name;
As to how to display it on the page, I would suggest adding a span somewhere and setting its text. Try this code, which does that and a couple other nice things (like handle the submit button's disabled state and resetting the Chooser button to its "unused" state):
<form>
<input id="chooser" type="dropbox-chooser" name="selected-file" data-link-type="direct" style="visibility: hidden;"/>
<p id="chosen" style="display:none">Chosen file: <span id="filename"></span> (<a id="remove" href="#">remove</a>)</p>
<input type="submit" id="submit" disabled />
</form>
<script>
$(function () {
$('#chooser').on('DbxChooserSuccess', function (e) {
var url = e.originalEvent.files[0].link;
var filename = e.originalEvent.files[0].name;
$('#chosen').show();
$('#filename').text(filename);
$('#submit').prop('disabled', false);
});
$('#remove').click(function (e) {
e.preventDefault();
$('#chosen').hide();
$('.dropbox-chooser').removeClass('dropbox-chooser-used');
$('#submit').prop('disabled', true);
});
});
</script>
EDIT
I should point out that the dropbox-chooser-used class is just something I noticed. Since it's not documented, that may change in a future version of the library. The rest should be fine.
I was wondering if its possible to use Javascript to change the function/method that an HTML element calls.
Example:
<input type="button" id="some_id" name="some_name" value="A Button" onclick="someFunction()" />
I now want to use Javascript to change the method/function called on the onclick event to another function has displayed below.
<input type="button" id="some_id" name="some_name" value="A Button" onclick="anotherFunction()" />
I tried using innerHTML, and when I checked the generated HTML, it actually changed the value of the onclick event in the button, but when I click the button, the method is not called.
You can assign a function object directly to the onclick field of the element. For example,
var inp = document.getElementById( 'some_id' );
inp.onclick = anotherFunction;
Using jQuery you could do:
$('#some_id').unbind('click');
$('#some_id').click(function () {
anotherFunction();
});