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

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);
}
//]]>

Related

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

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

javascript skips validation form

I have html running javascript after form,
form name="mortgage" method="post" action=" "onsubmit="return completeFormValidation();">
And javascript code for validation,
function completeFormValidation() {
location();
} // End of completeFormValidation
function location(){
var numradio = document.mortgage.propLocation.length;
var selected="";
for(var i=0; i < numradio; i++){
if(document.mortgage.propLocation[i].checked == true){
selected += "Selected radio item " + i;
}
}
if(selected == ""){
document.getElementById("reserved").innerHTML = "<p> none radio selected </P>";
return false;
}
}
The code works perfectly fine in dream weaver but in browsers doesn't seem to work instead it will submit even if radio buttons aren't selected. Please help me out thanks.
because you are not returning the "FALSE/TRUE" value from completeFormValidation function.. And Change the name of the function Location is reserved by JavaScript.
check the jsfiddle
function completeFormValidation() {
return my_location();
}
its always better to return the value from location true OR false
you can modify your my_location() as below
function my_location(){
var numradio = document.mortgage.propLocation.length;
var selected="";
for(var i=0; i < numradio; i++){
if(document.mortgage.propLocation[i].checked == true){
selected += "Selected radio item " + i;
}
}
if(selected == ""){
document.getElementById("reserved").innerHTML = "<p> none radio selected </P>";
return false;
}
else{
return true;
}
}
try to replace
function completeFormValidation() {
location();
} // End of completeFormValidation
by
function completeFormValidation() {
return location();
} // End of completeFormValidation
Rename your location function. location is a native property of the window object and can not be redefined.

I cant get this script to work in IE, what am I doing wrong

I am wanting to use this script , but am finding it wont work in internet explorer. I t will work in all other tested browsers.
Thanks
<form name = "myform">
<b>To find if we service your area,<br> Please enter your postcode</b><br> <input type = "text" name = "zip" size = "4" maxlength = "4" onchange = "checkZip()">
</form>
<script type = "text/javascript">
function checkZip() {
var z = document.myform.zip;
var zv = z.value;
if (!/^\d{4}$/.test(zv)) {
alert ("Please enter a valid Postcode");
document.myform.zip.value = "";
myfield = z; // note myfield must be a global variable
setTimeout('myfield.focus(); myfield.select();' , 10); // to fix bug in Firefox
return false;
}
var codes = [4000,4005,4006,4007,4008,4009,4010,4011,4012,4013,4014,4030,4051,4059,4064,
4065,4066,4075,4101,4102,4103,4104,4105,4106,4107,4108,4109,4110,4111,4112,
4113,4114,4115,4116,4117,4119,4120,4121,4122,4123,4127,4128,4151,4152,4153,
4154,4155,4156,4157,4158,4159,4160,4161,4163,4164,4169,4170,4171,4172,4173,
4174,4178,4179];
// add as many zip codes as you like, separated by commas (no comma at the end)
var found = false;
for (var i=0; i<codes.length; i++) {
if (zv == codes[i]) {
found = true;
break;
}
}
if (!found) {
alert ("The Post Code " + zv + " is not in our database, Please call 1300 736 979 to check and see if we can help you.");
document.myform.zip.value = "";
return false;
}
else {
alert ("Yes, that Post Code is covered by our business");
}
}
</script>

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
}

Javascript Form submit is not working , issue only in internet explorer

I have form field and that form field gets submitted to the next page with the following javascript code.., the code is working fine in firefox but the form not getting submited in internet explorer.
function addarray(formId)
{
var ara = tmm.length;
//alert(ara);
for(var sds=0; sds < tmm.length; sds++)
{
var sss = tmm[sds];;
ara = ara+"*#*#*"+sss;
//alert(ara);
if(sss <= 0)
{
alert("\n\n\nYou should have atleast one submenu \n for each main menu \n\n");
return false;
}
}
var ddf = document.blcname.getElementsByTagName("input");
var i = 0;
while(i < ddf.length)
{
var dddd = ddf[i].type;
var vla = ddf[i].value;
//alert(i+"----"+vla+"-----"+dddd);
if(dddd=="text"){
if(vla == "")
{
//alert("Please fill all the required fields....");
return false;
}
}
i=i+1;
}
var setform = document.getElementById('arav');
setform.value = ara;
var formObj = document.getElementById(formId);
formObj.action = "get-code.php";
formObj.submit();
//document.blcname.submit();
}
thanks in advance
Try alternate ways of getting to this form. Give the form HTML id and a name attribute
Also watch out if you're using frames and the form is inside of a frame.
eg.
document.forms[0].submit() //if its the first form in the document
document.forms[1].submit() //if its the second form in the document
document.formName.submit() //using the name attribute.

Categories