1

Suppose I have a form which has some file fields:

 <form action="" method="post" enctype="multipart/form-data" id="form"> <h3>Ask </h3> <p></p> <div> <p><label for="id_title">Topic</label>:<p> <p><input id="id_title" type="text" name="title" maxlength="300" /><p> </div> <div> <p><label for="id_pic">Picture</label>:<p> <p><input type="file" name="pic" id="id_pic" /><p> <p><button type="button">Add more pictures</button></p> </div> <div> <p><label for="id_pic_1">Picture 1</label>:<p> <p><input type="file" name="pic_1" id="id_pic_1" /><p> </div> <div> <p><label for="id_pic_2">Picture 2</label>:<p> <p><input type="file" name="pic_2" id="id_pic_2" /><p> </div> <div> <p><label for="id_pic_3">Picture 3</label>:<p> <p><input type="file" name="pic_3" id="id_pic_3" /><p> </div> <div> <p><label for="id_pic_4">Picture 4</label>:<p> <p><input type="file" name="pic_4" id="id_pic_4" /><p> </div> <div> <p><label for="id_description">Details</label>:<p> <p><textarea id="id_description" rows="10" cols="40" name="description"></textarea><p> </div> <button type="submit">Submit</button> </form>

Initially, I would like to hide pic_1, pic_2, pic_3 and pic_4 until user click the button under pic. I think javascript can do that but I am new to javascript.

Can anyone give me some direction?

Thanks.

Improve this question
1
  • 1
    Look into jQuery, it makes JavaScript operations like this much easier. Commented Mar 4, 2013 at 2:24

2 Answers 2

Reset to default
1

Short answer

Give your "Add more pictures" button an ID called add-more. Then, add this code to your page right before the </body>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function() { // Hide the additional photo uploads var $additionals = $("#id_pic_1, #id_pic_2, #id_pic_3, #id_pic_4"); $additionals.hide(); // Show more photo uploaders when we click $("#add-more").on("click", function() { $additionals.show(); }); }); </script>

Long answer

jQuery is a JavaScript library that makes these things much easier to deal with. It's so ubiquitous and helpful that some people (myself included, when I was learning) thought that jQuery was JavaScript.

Include a link to it on your page to get jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Before we do anything else, let's give the button an ID so that we can reference it later. Let's call our button add-more.

<button type="button" id="add-more">Add more pictures</button>

Now, let's add some of our own JavaScript to the page. You should probably put this in a separate file, but you can get away with putting the following stuff in <script> tags after the jQuery stuff:

$(document).ready(function() { // This code is inside of the "document ready" stuff because it // will execute AFTER all of the HTML stuff has been loaded. // First, let's find all of the additional things we want to hide // initially. We COULD do this with CSS but then browsers without // JavaScript couldn't upload more photos. var $additionals = $("#id_pic_1, #id_pic_2, #id_pic_3, #id_pic_4"); // Okay, so now we have all of those in a variable called $additionals. // Variables don't have to start with a $, but because jQuery uses that, // I like to prefix my jQuery-selected elements with a dollar sign. // Let's hide them now! $additionals.hide(); // When we click the button with the ID "add-more", show the other stuff. $("#add-more").on("click", function() { $additionals.show(); }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Use CSS to hide the images

.hide-me { display: none; }

Now include jQuery between the like this:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Now between script tags (preferably at the end of your page):

<script> $(document).on('ready', function () { $(.hide-me').show(); }); <script>

This just tells jQuery once the page is loaded you want to show the images with the class .hide-me

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.