Post HTML5, Javascript & CSS3 queries here

[abhidev]

Hehe.. it's pretty simple though

 

[vickybat]

Ok another one
I am creating a drop down with some choices.. for eg. consider them as A, B, C and Other
And in front of drop down, there will be a text box, empty by default.
And what I need is when I select either of A/B/C, the same value should be copied into the text box BUT when I select Other, the text box should be empty so that user can enter data on his own.

I can do 1 task at one time but I'm not able to integrate both requirements. That is, Either I can copy the value OR I can make the box editable for all choices.

Here you go:

html

<select id = 'test' size = "1">
    <option value = "A"  selected="selected">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
    <option value = "other">OTHER</option>
</select>
<input type ="text" id = 'Name' value = "Select an option hoss!"/>

javascript

document.getElementById("test").onchange = populateText;

       function populateText() {
         var obj_sel = document.getElementById("test").value;
            
          if(obj_sel == "other")
            {
                 document.getElementById("Name").value = "";
            }
            else{
          document.getElementById("Name").value = obj_sel;
            }
    }

Check the implementation in JSFiddle

Edit fiddle - JSFiddle

@ abhidev

I did not know about JSFiddle. Its awesome.

Thanks for sharing man!

 

[abhidev]

So you want to disable the textbox for choices other than 'Other' ?

Yes jsfiidle is pretty quick way to run sample code

 

[Piyush]

Here you go:

html

<select id = 'test' size = "1">
    <option value = "A"  selected="selected">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
    <option value = "other">OTHER</option>
</select>
<input type ="text" id = 'Name' value = "Select an option hoss!"/>

javascript

document.getElementById("test").onchange = populateText;

       function populateText() {
         var obj_sel = document.getElementById("test").value;
            
          if(obj_sel == "other")
            {
                 document.getElementById("Name").value = "";
            }
            else{
          document.getElementById("Name").value = obj_sel;
            }
    }

Check the implementation in JSFiddle

Edit fiddle - JSFiddle

@ abhidev

I did not know about JSFiddle. Its awesome.

Thanks for sharing man!

So you want to disable the textbox for choices other than 'Other' ?

Yes jsfiidle is pretty quick way to run sample code

Yup and thanks it worked. Things going good so far.
Will come with some more doubts.

 

[Piyush]

Back with another query.

The form I'm working in should also contain a button to upload files to our system (i.e. the server). And the files been uploaded should be visible somewhere on a page (or small window) where I can view them any time. How to do this?

I researched a bit and found fileupload property in html. But how to view the uploaded files? Need help.

 

[abhidev]

Yes use the file upload property and to view files open the link in a new tab

 

[Piyush]

Re: Post HTML5, Javascript & CSS3 queries here

Yes use the file upload property and to view files open the link in a new tab

Ok I can upload files with that property. The files will be saved to a server and the listing can be shown on a separate page. But will it work that way that if I click on the file name, it will be opened just like that? I have no idea regarding that.

How about this??
*www.tutorialspoint.com/jsp/jsp_file_uploading.htm

 

[abhidev]

yes this is correct...once you handle the file upload and display the uploaded files list, these files can then be served and will be available to view.

 

[Piyush]

The form is working kinda ok. When I click on submit button to upload the file, the next page opens up showing this error/statement

uploaded filename: nullscript.txt

Whats happening?

 

[abhidev]

First check if the file has been uploaded to ur server

 

[Piyush]

Re: Post HTML5, Javascript & CSS3 queries here

First check if the file has been uploaded to ur server

nope...
the directory is empty
Also, in that code there was a statement for maxfilesize... just in case.
And those files were being moved to c:temp folder . Not there either.

Looks like I gotta check the code more deeply now...esp. around that getinitparameter area

Also.. in my previous post, its actually uploaded filename: null
that script.txt was the file name that was being uploaded

 

[abhidev]

You'll have to debug n check if the file is being uploaded properly

 

[Piyush]

upload

Check this and tell me whats wrong Abhidev

 

[abhidev]

Yeaa...will check once I reach office

 

[Piyush]

Re: Post HTML5, Javascript & CSS3 queries here

Yeaa...will check once I reach office

One thing noticed that the XML file had wrong version of apache listed in the code so I fixed that.

Now when I click on upload button, I'm still getting that null error.
So I ran the fileupload.jsp page on browser and came to know that i'm getting nullpointerexception error (I know its very vague...)

Update:
Its working now
Now I have to work on downloading the uploaded file.

 

[vickybat]

Re: Post HTML5, Javascript & CSS3 queries here

One thing noticed that the XML file had wrong version of apache listed in the code so I fixed that.

Now when I click on upload button, I'm still getting that null error.
So I ran the fileupload.jsp page on browser and came to know that i'm getting nullpointerexception error (I know its very vague...)

Piyush, what you've posted here is a JSP (Java Server Pages) request handler. The XML is nothing but a deployment descriptor. These are standard J2EE components.
You are actually asking Java in an html thread. Do you have J2EE knowledge? I figure that's why you are having problems in deciphering the issues.

Anyways, i'll help you. I tested the code in my machine, and it works just fine. That is, i'm able to upload files into the required directory, of my choice.
I assume you are using the apache tomcat webserver/J2EE container

Here's what you should do:

1.All those files you sent, should reside inside the server directory. You apache directory should contain sub directories like bin, webapps,etc.

2.Copy the files inside the webapps folder, and create another folder inside it, which will be the main application folder.Inside that, create another directory called "WEB-INF".

3.Now copy the "upload.jsp" and "file_upload.html" inside the main application folder (not WEB-INF) and copy the xml file (name that web.xml and not webapp.xml) inside the WEB-INF folder.

4.Now comes the important part. Your JSP file has "apache common" import statements, but the application is not able to find those libraries. The DiskFileItemFactory is a class that extends Object
and implements ServletFileUpload. Standard java terms. So you want to include those libraries inside the server's "lib" directory.

5.Download the Jar files here and here and extract them into the "lib" folder in server.

6.Open the web.xml and give proper path in the <context-param></context-param> i.e where exactly you want to save the uploaded file.

7. Restart the webserver and it should work now.

P.S - Remember, don't access the file_upload.html by just clicking on it. It will be static. After starting the webserver, access the html, through server URL eg. localhost:8080/xyz/abc/file_upload.html(directory path of file location). It will work.

 

[Piyush]

I did it the exact same way you suggested just above. I knew it was kinda weird asking servlets and JSPs on a scripting and web designing thread
But I though since I asked somewhat related queries on this thread, why not continuing it. Actually I was doubtful about the possibilitiy of replies in the java dedicated thread coz of inactivity there.

Actually what happened was when I loaded the Commons-IO and commons-FileUpload jar files, I also copied them in the Java Jre lib folder, thinking that it will be available for all the projects. And that was the big mistake because its been observe that if there are duplicate of jar files with same api (that is newer and older version), there is ought to be some class collisions and that why I was stuck. I learned this from a guy who said this:

You've duplicated older versioned appserver-specific libraries into webapp's /WEB-INF/lib, like servlet-api.jar, jsp-api.jar and so on.

I also forgot to give detailed error. The error I was getting was Org.Apache.Jasper.JasperException. So my bad again.
And regarding my J2EE knowledge, I used to code on java during 2nd/3rd yr of my college. After that I just stopped coding at all (coz of various reasons) and was checking new stuff like Python/Ruby/Joomla.... So it was hard on me to get right back on track just like that

 

[vickybat]

^^ Glad that you've solved the issue mate.

If you are developing end to end, you should know server side languages too. Read up on servlets, jsp's , sessions etc and these will seem easier than they look.

 

[Piyush]

^^ Glad that you've solved the issue mate.

If you are developing end to end, you should know server side languages too. Read up on servlets, jsp's , sessions etc and these will seem easier than they look.

Yup you are right. I should have at least 1 server side language on my tips.
One thing I want to ask you from your prog experience. When should I use servlets and JSPs. When I used to learn java coding, I used to come across this staement many times that "JSP is far better than Servlets these days". Why is this so??

 

[vickybat]

Yup you are right. I should have at least 1 server side language on my tips.
One thing I want to ask you from your prog experience. When should I use servlets and JSPs. When I used to learn java coding, I used to come across this staement many times that "JSP is far better than Servlets these days". Why is this so??

Well buddy you'll know that in detail when you start using servlets and jsp hands-on. Just know that in a servlet, you put html elements inside a java class, which can get very clumsy.
Jsp is just the opposite, i.e you use script tags <% %>, for embedding java.

Besides, a JSP page compiles into a servlet only, which is generated by the web container internally. In a MVC (Model, View & Controller )design pattern, the model is the business logic java class (POJO), View is the JSP and Controller is the servlet. The servlet handles requests from the client (web browser) and transfers them to the model for processing, gets the results and dispatches them to the JSP for output.

JSP can also handle requests, like what you've done. It behaves like a servlet that way.

JSP can be written without java too. You can use an EL(Expression language) script ( eg. ${xyz["abc"]} ) instead of those script java tags. This scriptless coding is ideal for web developers who don't know java. Its also used by java developers too, as its relatively very easy.

Nowadays, people use frameworks like Struts, hibernate(Data Layer), Spring(integration layer for wiring objects) instead of writing servlets themselves. That is more serious J2EE development and you don't need to learn these right away.

Understanding servlets and Jsp's will make your work a lot easier to understand and debug too.
I recommend you to start reading on these.