How to Convert "Different" Multiple <Button> Functions to Generic Function with <Select>? - javascript

How do I make so that the load buttons java functions works from a box with just one button, instead of two separate buttons that call on two "different" JavaScript functions?
In other words clarify the question:
I have two different functions that I need to fire, but from a with one to fire the function I choose in the selection box.
Remember: That the warnings and confirmation should still work, so there for I can not us one and the same load function for both options, because of the different warnings and confirmation.
NOTE: If it is possible without using jquery only with JavaScript that would be great, but if there is a solution with jquery then that will is good too as long as it works.
Here are my JavaScript codes:
function loadFileAsTextUNLIMITED()
{
valid = true;
if(document.fileTextBox.fileLoadName.value == "")
{
alert ("Please attach a file to upload")
valid = false;
}
{
if (confirm("Are you sure you want upload unknown file? Remember that if you uploaded a file that is not a text or a web page source code file, it may hang up your computer or it may destroy the file when you try to save it. So if you chose to upload it this way, you are doing it on your own risk.") )
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
} else {
window.alert("Good, it is advised you use the normal Load Text button and this button only if you have too. ")
}
}
}
function loadFileAsText()
{
valid = true;
if(document.fileTextBox.fileLoadName.value == "")
{
alert ("Please attach a file to upload")
valid = false;
}
{
var fup = document.getElementById('fileToLoad');
var fileName = fup.value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
if(ext == "TXT" || ext == "txt" || ext == "HTML" || ext == "html" || ext == "HTM" || ext == "htm" || ext == "JS" || ext == "js" || ext == "CSS" || ext == "css" || ext == "PHP" || ext == "php" || ext == "DOWNLOAD" || ext == "download")
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
else
{
alert("Upload a text or a web page file with source codes");
fup.focus();
return false;
}
}
}
Here are those parts of my HTML codes for it:
<input type="file" id="fileToLoad" name="fileLoadName">
<input type="button" onclick="loadFileAsText();showFileSize();" value=" Load Text / Source Code Files ">
<br>
<input type="button" onclick="loadFileAsTextUNLIMITED();showFileSize();" value=" On your own risk Load Any File Type">
<br>
<textarea id="inputTextToSave" name="inputTextToSave" rows="10" cols="70" placeholder="Type your text here:"></textarea>

To get the value of a select (not sure if it's a radio button, dropdown select or what - off the top of my head i forget the syntax to grab that value, but it's easy to google) check out this post: Get selected value in dropdown list using JavaScript?
Once you have the value you will just write a submit (button click) function that looks something like this:
function uploadDocument() {
var selectValue = //get the select value and store it here
valid = true;
if(document.fileTextBox.fileLoadName.value == ""){
alert ("Please attach a file to upload")
valid = false;
return;
}
if(selectValue === 'unlimited'){
loadFileAsTextUNLIMITED()
} else {
loadFileAsText()
}
}
Hopefully that is a little closer to what you are trying to accomplish

Related

If statement with 2 conditionals not working javascirpt html

So I wanted to make a kind of admin login in js so I put two conditionals in the if and else if. I also used arrays to minimize the line of code needed. But it is always running the else block no matter what. I tried putting === instead of == but still not working.
Here's the Edit EDIT js code:
var avatar = document.getElementById('pfic');
var admin = ['jonh.josh#gmail.com', 'Jonh Josh', '123456'];
var admin2 = ['sam.jackson#gmail.com', 'Sam Jackson', 'abcdefg'];
var access = "no";
var user = document.getElementById('email_input').value;
var code = document.getElementById('password_input').value;
document.querySelector('button').onclick = function () {
if (user == admin[0] && code == admin[2]) {
avatar.setAttribute('src', 'images/ganiavatar.png');
access = "yes";
} else if (user == admin2[0] && code == admin2[2]) {
avatar.setAttribute('src', 'images/kanatavatar.png');
access = "yes";
} else {
alert("Please make sure you entered the correct creditionals");
access = "no";
}
And here is the part of html code:
<image scr="images/defult_profile.jpg" alt="defult profile picture" id="pfic">
<input class="input1 input" id="email_input" placeholder=" Phone# / Email"></input>
<input class="input2 input" id="password_input" type="password" placeholder=" Password"></input>
You're reading the values for user and code when the page loads, not when the button is clicked. Therefore they'll always be empty strings.
var user = document.getElementById('email_input').value;
var code = document.getElementById('password_input').value;
To fix the issue, move the above lines inside the button click event handler.
document.querySelector('button').onclick = function () {
var user = document.getElementById('email_input').value;
var code = document.getElementById('password_input').value;
if (user == admin[0] && code == admin[2]) {
avatar.setAttribute('src', 'images/ganiavatar.png');
access = "yes";
} else if (user == admin2[0] && code == admin2[2]) {
avatar.setAttribute('src', 'images/kanatavatar.png');
access = "yes";
} else {
alert("Please make sure you entered the correct creditionals");
access = "no";
}
}
And if you're not already aware, implementing authentication on the client-side will provide zero protection and is easily bypassed, since the source code is publicly accessible.

How to remove file upload control value in java script in java

I have file upload control for validating only(.xlsx|.xls) two extensions taking java script here. When i select valid extension it shows selected file name it's fine again. When i click browse button value is not clear. The value is clear when i select if invalid extension after raising the alert message click ok then only file upload control value is removing.
what i need when i select first valid file name after click again browse button value should be clear.
when i run this code in Mozilla fire fox it shows what i selected value. But in chrome it not showing invalid extension names.
My code:
<script>
var extension = [".xlsx", ".xls"];
function Validate(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < extension.length; j++) {
var sCurExtension = extension[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, invalid File, allowed extensions are: " + extension.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}
</script>
Use this It's work.
<script type="text/javascript">
//<![CDATA[
function resetFileInput()
{
var parent = document.getElementById('fileInputContainer'),
newFileInput = document.createElement('input');
parent.removeChild(document.getElementById('file'));
newFileInput.setAttribute('type', 'file');
newFileInput.setAttribute('id', 'file');
parent.appendChild(newFileInput);
}
//]]>

getting image name from an input field with JavaScript

please help me out on this little problem. I want to get the name of the image (with NO path and file extension) from an input field before that the form is submitted!
in other words, I want to check if this two name are the same, then proceed, if not, then return false;
My JavaScript code:
var pic = document.getElementById("photo1").value;
if (gyuru == null || gyuru == "" || gyuru == " ")
{
alert("Gyűrűszám nélkül nem lehet adatot lementeni!");
x.focus();
x.style.borderColor="#C30";
return false;
}else if (gyuru != pic){
alert("A kép neve nem egyezik meg a gyűrűszámal!");
return false;
}
And the image input form data:
<input type="file" id="photo1" name="photo1"/>
To get the filename without extension:
pic = pic.split('/').pop().split('\\').pop().replace(/[.][^.]+$/, "");

Pdf.js: how to get input radio values?

I use pdf.js library to generate html5 page from pdf but some capabilities not working. I try to get value for input radio but still abortively:(
For example, in core.js script there are a few lines of code that take type of field:
var fieldType = getInheritableProperty(annotation, 'FT');
if (!isName(fieldType))
break;
item.fieldType = fieldType.name;
How I can get feild value?
I found the solution that work form me!
Add this code around line 260 of core.js file:
function setRadioButton(annotation, item) {
var ap = annotation.get('AP');
var nVal = ap.get('N');
var i = 0;
nVal.forEach(function(key, value){
i++;
if(i == 1 || i == 2) {
if(key != 'Off')
item.value = key;
}
});
}
And this code around line 370 of core.js file:
if (item.fieldType == 'Btn') {
if (item.flags & 32768) {
setRadioButton(annotation, item);
}
}
Also, if you want to get values from select input, you can use this code:
if(item.fieldType == 'Ch') {
item.value = annotation.get('Opt') || []; //return array of values
}

How to have jQuery restrict file types on upload?

I would like to have jQuery limit a file upload field to only jpg/jpeg, png, and gif. I am doing backend checking with PHP already. I am running my submit button through a JavaScript function already so I really just need to know how to check for the file types before submit or alert.
You can get the value of a file field just the same as any other field. You can't alter it, however.
So to superficially check if a file has the right extension, you could do something like this:
var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
alert('invalid extension!');
}
No plugin necessary for just this task. Cobbled this together from a couple other scripts:
$('INPUT[type="file"]').change(function () {
var ext = this.value.match(/\.(.+)$/)[1];
switch (ext) {
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
$('#uploadButton').attr('disabled', false);
break;
default:
alert('This is not an allowed file type.');
this.value = '';
}
});
The trick here is to set the upload button to disabled unless and until a valid file type is selected.
You could use the validation plugin for jQuery:
http://docs.jquery.com/Plugins/Validation
It happens to have an accept() rule that does exactly what you need:
http://docs.jquery.com/Plugins/Validation/Methods/accept#extension
Note that controlling file extension is not bullet proof since it is in no way related to the mimetype of the file. So you could have a .png that's a word document and a .doc that's a perfectly valid png image. So don't forget to make more controls server-side ;)
For the front-end it is pretty convenient to put 'accept' attribute if you are using a file field.
Example:
<input id="file" type="file" name="file" size="30"
accept="image/jpg,image/png,image/jpeg,image/gif"
/>
A couple of important notes:
The accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6.
It will show text for file extension differently in the file browser dialog from different browsers.
Don't want to check rather on MIME than on whatever extention the user is lying?
If so then it's less than one line:
<input type="file" id="userfile" accept="image/*|video/*" required />
for my case i used the following codes :
if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {
alert('You must select an image file only');
}
I try to write working code example, I test it and everything works.
Hare is code:
HTML:
<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, #Model.MaxSize.ToString(),#Html.Raw(Json.Encode(Model.FileExtensionsList)))" />
Javascript:
//function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
var val = $(element).val(); //get file value
var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention
if ($.inArray(ext, extentionsArray) == -1) {
alert('false extension!');
}
var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
if (fileSize > maxSize) {
alert("Large file");// if Maxsize from Model > real file size alert this
}
}
If you're dealing with multiple (html 5) file uploads, I took the top suggested comment and modified it a little:
var files = $('#file1')[0].files;
var len = $('#file1').get(0).files.length;
for (var i = 0; i < len; i++) {
f = files[i];
var ext = f.name.split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
alert('invalid extension!');
}
}
This code works fine, but the only issue is if the file format is other than specified options, it shows an alert message but it displays the file name while it should be neglecting it.
$('#ff2').change(
function () {
var fileExtension = ['jpeg', 'jpg', 'pdf'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
return false; }
});
This example allows to upload PNG image only.
HTML
<input type="file" class="form-control" id="FileUpload1" accept="image/png" />
JS
$('#FileUpload1').change(
function () {
var fileExtension = ['png'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.png' format is allowed.");
this.value = ''; // Clean field
return false;
}
});
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
//your validation
});
</script>
$("input[name='btnsubmit']").attr('disabled', true);
$('input[name="filphoto"]').change(function () {
var ext = this.value.match(/\.(.+)$/)[1];
switch (ext)
{
case 'jpg':
case 'jpeg':
case 'png':
case 'bmp':
$("input[name='btnsubmit']").attr('disabled', false);
break;
default:
alert('This is not an allowed file type.');
$("input[name='btnsubmit']").attr('disabled', true);
this.value = '';
function validateFileExtensions(){
var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
var fileErrors = new Array();
$( "input:file").each(function(){
var file = $(this).value;
var ext = file.split('.').pop();
if( $.inArray( ext, validFileExtensions ) == -1) {
fileErrors.push(file);
}
});
if( fileErrors.length > 0 ){
var errorContainer = $("#validation-errors");
for(var i=0; i < fileErrors.length; i++){
errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
}
return false;
}
return true;
}
Here is a simple code for javascript validation, and after it validates it will clean the input file.
<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>
function validate(file) {
var ext = file.split(".");
ext = ext[ext.length-1].toLowerCase();
var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];
if (arrayExtensions.lastIndexOf(ext) == -1) {
alert("Wrong extension type.");
$("#image").val("");
}
}

Categories