Concluído

JavaScript: conditionally display form elements + HTML5 drag & drop upload box

There's four parts to this, all relatively small tasks.

Please note the deadline for this work is 12:00 midday UK time on Thursday 11th July. I will choose a freelancer within three hours of this being posted, by 17:30 UK time today.

The webpage (it's one single page) that you will be working on can be found here:

[login to view URL]

I will be able to send the existing files as a zip file.

TASK 1) SELECT MENU:

There's a select drop-down menu in my form. I need this to be a two-stage process, so when the user chooses an option in the *first* drop-down menu, then a *second* drop-down menu appears, according to what was chosen in the first step.

So, for example, the first drop-down menu has options 1, 2, 3, 4, 5, etc. Then if the user chooses option "2", it'll then display drop-down menu #2 underneath. Or if the user chooses option "3", it'll then display a different drop-down menu #3 underneath.

I just need you to put example options into place, then I will create the menus myself with the real values. You need to design this so it's expandable, so I can add new options to the first drop-down menu, and then create extra second-level menus as appropriate.

The drop-down menus use a select input field, with a list of options, but please note they use the Materialise library for styling ([login to view URL]).

I want the new drop-down menu to animate into the screen in a nice way, e.g. push down the content.

TASK 2) DISPLAY A MESSAGE DEPENDING ON WHAT SELECT MENU OPTION IS CHOSEN:

When a select (drop-down menu) option is chosen, a div container needs to display beneath.

Please set this up so that I can expand this and create divs for any select option chosen. For example, I'll have a div for every menu option, e.g. 1, 2, 3, 4, 5, etc.

When select menu value "2" is chosen in the drop-down menu, it'll display div class="2" and the other divs need to be hidden.

If the user chooses value "3" in the drop-down menu, then div class="3" needs to be displayed and the other divs hidden, etc.

Don't worry about the div formatting or content, as I'll do this myself.

When the divs display, I want them to animate into the screen in a nice way, e.g. push down the content.

TASK 3) FILE UPLOAD PREVIEW

There's two file upload boxes for pictures.

When a user uses the file upload box, this is supposed to show a preview of the image. I'm currently using some simple coding for this.

The bottom one works ok.

I need help fixing the JavaScript so that the top one works too, as at the moment the top upload box outputs the image preview into the bottom one!

TASK 4) DRAG AND DROP FILE UPLOADING

I need a "drag and drop" file upload feature adding to the two file upload boxes mentioned above in Task 3.

Something like this would work well:

[login to view URL]

But it can be a different system, so I'm happy for you to find the best solution for this. If the drag-and-drop system is not compatible with a certain web browser (e.g. Internet Explorer), then please ensure the drag-and-drop system is hidden from those web browsers.

It must allow the image preview to still work (in Task 3).

See the coding already created:

[login to view URL]

Other background info:

The webpage is built using the Materialize framework ([login to view URL]) and jQuery 2.1.1.

Important:

This work must be completed by 12:00 UK time on Thursday 11th July.

Important:

Please clearly tell me and indicate where you have added or changed code in my files, so I can add this to my other pages that I am working ok.

Habilidades: Javascript, HTML5, CSS, jQuery / Prototype, HTML

Veja mais: javascript auto display form, javascript display form result, javascript display form value, javascript drag drop text box, javascript hide show form elements drop, display form elements radio button select, javascript place pictures order drag drop, javascript display form results, javascript hide show form elements, display javascript popup contact form finished, javascript radio button show hide form elements, drag drop upload client javascript, conditionally show html form elements using asp, javascript add form elements, javascript drag drop upload, javascript form calculates total cost multiple form elements, dynamic form elements javascript mysql 2009, javascript multiply form elements, html5 drag and drop multiple elements

Acerca do Empregador:
( 5 comentários ) WESTCLIFF-ON-SEA, United Kingdom

ID do Projeto: #20285626

Concedido a:

CrazyWebGuru

Hi. I have read your proposal. I can finish your timeline. I experience 6 + years code skill , in particular I like drap and drop section and expert this one. my code skill is Jquery , bootstrap4 , javascrip , HTML , Mais

£135 GBP em 1 dia
(71 Comentários)
6.5

44 freelancers estão ofertando em média £138 para esse trabalho

riteshjain009

//I CAN DO IT AS PER YOUR NEED**// I ensure it will be done within timeline. More then 7+ years of experience in Development . Also kindly check our profile we have done over 400 project here on freelancer so very m Mais

£180 GBP em 1 dia
(352 Comentários)
8.0
CakephpJobs1

HI i am expert javascript and front end engg I can provide you best solution you are looking for with above descriptions YOu can find more details about me on profile page too thanks

£100 GBP in 7 dias
(84 Comentários)
7.1
KashirinA

Hello, this looks like everything we could help you with. I specialize in: PHP & PHP frameworks such as Laravel, CI, Yii and CakePHP, API development, HTML5, CSS, JavaScript, Bootstrap, MySQL, etc. http://seeknatural Mais

£135 GBP in 2 dias
(128 Comentários)
7.4
suju8811

Hello, I read your job description very carefully and bid here. I am a senior javascript and jQuery expert. And I already checked your requirement and understood what you want. I can use javascript plugin perfectly. An Mais

£90 GBP in 7 dias
(31 Comentários)
6.9
vishwanath89

Hey Can meet the deadline. Have done a lot of similar jobs working with conditional forms Thanks Vish

£222 GBP in 3 dias
(74 Comentários)
6.8
markninja

Hi, I will facilitate conditionally display form elements + HTML5 drag & drop upload box ASAP. I am available to start your project right away. HTML5: [login to view URL] [login to view URL] ~ Howeve Mais

£135 GBP em 1 dia
(108 Comentários)
7.1
hoisticdeveloper

Greetings, Hi, I am Hassaan Shuja. I have 6 years of experience in the Web Development Department and Designing. I have reviewed the description and understand it very well. I want to start the project right now, just Mais

£200 GBP em 1 dia
(28 Comentários)
6.5
harrysart

⭐Dear Client.⭐ I have read your description with great interest. I have experiences with many project. Also i am able to finish the task in time. Please check my portfolio if you want to know my skill and experience. Mais

£150 GBP in 7 dias
(143 Comentários)
6.6
brightstar928

⭐Hi⭐ I read your job description carefully. You can check my past reviews here. I have developed a lot of websites. I will do my best for your project until you are satisfied. If you hire me, I will finish your job AS Mais

£135 GBP in 7 dias
(52 Comentários)
6.4
wuyong2020

Hello, Hope you will be doing well!! I am a web expert and can complete these 4 task within 12:00, 11th July. I have rich experience and your job perfect fits to my skills. I am available now and can start when you ne Mais

£135 GBP in 7 dias
(9 Comentários)
6.0
fastestJohn

Hello! I read your project carefully. I am very interested in your project. I have a wealth of experience in web development. And all the projects were developed with high quality and high speed at all times and compl Mais

£100 GBP em 1 dia
(46 Comentários)
6.0
jinxing4

Dear Sir. I am interesting in your project. I'm senior Laravel, PHP, SQL, Javascript developer. I am sure, I will do my best to work with you on your project to present the best possible outcome for you. I will also do Mais

£135 GBP in 3 dias
(123 Comentários)
6.1
avinashjain09

Hello, I have read and understood all four points and I can do them and I can complete them in your mentioned time. I have experience working on materialize and jquery and have expertise in this section. I am available Mais

£160 GBP em 1 dia
(90 Comentários)
6.4
WebExpert555

Hi Dear. My name is Ruyun. After reading your description carefully and I am convinced that I would be a perfect fit for this role. I am a senior Web developer with high skills in Laravel/Ci/Django/Symfony/Yii/Cakephp Mais

£135 GBP in 7 dias
(24 Comentários)
6.1
AndreiVldmrvch

Hello client.⭐⭐⭐⭐⭐ I read carefully your proposal. I am a professional web and full stack developer. * No Upfront-Amount needed to Begin your Project * Ready to Start as Immediate, Unlimited Revisions & Proper Testing Mais

£200 GBP in 4 dias
(28 Comentários)
5.7
AndrejStastny

Hi, I have carefully read your description and understood what you want. I am a skilled web developer having experiences such as file upload & preview, drag&drop and etc. So I am sure that I can perfectly complete all Mais

£250 GBP in 3 dias
(39 Comentários)
6.2
vashishtrupinder

Hi AM READY TO START NOW. I read through the job details carefully and I am absolutely sure that we can do the project very well. I am an expert programmer/coder working in the field of Web designing and Development Mais

£250 GBP em 1 dia
(49 Comentários)
5.7
HadiDar786

Hi, I have read your project description and willing to do this for you in your required time spam with 100% Satisfaction. Kindly message me so we can discuss in detail over chat......

£100 GBP in 4 dias
(81 Comentários)
5.8
RichWeb

Hi, The requirements seem to be quite straightforward. Sure, can be done till tomorrow. Thanks, Tigran

£120 GBP em 1 dia
(17 Comentários)
5.6
manjeet2017

Hello Just to introduce my self ,I have more than 5+ years of experience in design & development. And as a policy we will provide 3 month maintenance "free of cost" for the project done by us. Now coming on this pro Mais

£99 GBP in 5 dias
(75 Comentários)
5.5