jquery show a div based on id

[wigglesby]

Hi all

 

I have a form, which has 40 input fields (20 pairs) - which are a file upload input and a text input field.

 

I'm hiding the last 20 of them using the following:

 

<div id="show"><input type="file" name="event[attached_file_11]" style="display:none" id="event_attached_file_11" /><input type="text" name="event[attached_file_desc_11]" value="" style="display:none" id="event_attached_file_desc_11" /></div>

<div id="show"><input type="file" name="event[attached_file_12]" style="display:none" id="event_attached_file_12" /><input type="text" name="event[attached_file_desc_12]" value="" style="display:none" id="event_attached_file_desc_12" /></div>

<div id="show"><input type="file" name="event[attached_file_13]" style="display:none" id="event_attached_file_13" /><input type="text" name="event[attached_file_desc_13]" value="" style="display:none" id="event_attached_file_desc_13" /></div>

<div id="show"><input type="file" name="event[attached_file_14]" style="display:none" id="event_attached_file_14" /><input type="text" name="event[attached_file_desc_14]" value="" style="display:none" id="event_attached_file_desc_14" /></div>

<div id="show"><input type="file" name="event[attached_file_15]" style="display:none" id="event_attached_file_15" /><input type="text" name="event[attached_file_desc_15]" value="" style="display:none" id="event_attached_file_desc_15" /></div>

<div id="show"><input type="file" name="event[attached_file_16]" style="display:none" id="event_attached_file_16" /><input type="text" name="event[attached_file_desc_16]" value="" style="display:none" id="event_attached_file_desc_16" /></div>

<div id="show"><input type="file" name="event[attached_file_17]" style="display:none" id="event_attached_file_17" /><input type="text" name="event[attached_file_desc_17]" value="" style="display:none" id="event_attached_file_desc_17" /></div>

<div id="show"><input type="file" name="event[attached_file_18]" style="display:none" id="event_attached_file_18" /><input type="text" name="event[attached_file_desc_18]" value="" style="display:none" id="event_attached_file_desc_18" /></div>

<div id="show"><input type="file" name="event[attached_file_19]" style="display:none" id="event_attached_file_19" /><input type="text" name="event[attached_file_desc_19]" value="" style="display:none" id="event_attached_file_desc_19" /></div>

<div id="show"><input type="file" name="event[attached_file_20]" style="display:none" id="event_attached_file_20" /><input type="text" name="event[attached_file_desc_20]" value="" style="display:none" id="event_attached_file_desc_20" /></div>

 

This at the moment hides all the <input> fields.

 

But as you can see, I've given each pair of <input> a div id.

 

I am also using the following jQuery, which on every click, loops through the inputs and shows 1 at a time.

 

$(document).ready(function () {
    		var inputs = $('input');
            var max = inputs.length;
            var index = 25;

            $('button').click(function (e) {
                input = $('input:eq(' + index + ')');

                if (input.get(0)) {
                    input.show();
                    index = index + 1;
                } else {
                    $(this).hide();
                }

                e.preventDefault();
            })
        })

 

But I'd like it to loop through and display only 1 show div at a time.

 

Is this possible?

 

Thanks

[trq]

Why not re-write your jQuery so as to create the new inputs as they are needed instead of showing already written ones?

[wigglesby]

Well I am using a PHP framework which is creating these inputs for me.

 

The HTML you saw was what it displays.

 

All I'd like to do, is to hide the 20 inputs that are optional, and have a <button> which a user can click and the <input>'s for the 11th attached_file to display, if clicked again, the 12th etc.

[wigglesby]

Anyone?

[JustLikeIcarus]

First its important to know that multiple elements can not have the same "id" attribute.  Change your id="show" to class="show" to correct that problem.  Once thats changed, remove the display:none from the input elements and just hide the whole div, then try this jquery:

 

$('button').click(function(e){
  $('.show:hidden:first').show();
});

[wigglesby]

Ok, I have used your code, so I now have:

 

<script type="text/javascript">
	$(document).ready(function () {
    	      $('button').click(function(e){
  $('.show:hidden:first').show();
});
        })
</script>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_11]" 0="" id="event_attached_file_11" /><input type="text" name="event[attached_file_desc_11]" value="" 0="" id="event_attached_file_desc_11" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_12]" 0="" id="event_attached_file_12" /><input type="text" name="event[attached_file_desc_12]" value="" 0="" id="event_attached_file_desc_12" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_13]" 0="" id="event_attached_file_13" /><input type="text" name="event[attached_file_desc_13]" value="" 0="" id="event_attached_file_desc_13" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_14]" 0="" id="event_attached_file_14" /><input type="text" name="event[attached_file_desc_14]" value="" 0="" id="event_attached_file_desc_14" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_15]" 0="" id="event_attached_file_15" /><input type="text" name="event[attached_file_desc_15]" value="" 0="" id="event_attached_file_desc_15" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_16]" 0="" id="event_attached_file_16" /><input type="text" name="event[attached_file_desc_16]" value="" 0="" id="event_attached_file_desc_16" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_17]" 0="" id="event_attached_file_17" /><input type="text" name="event[attached_file_desc_17]" value="" 0="" id="event_attached_file_desc_17" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_18]" 0="" id="event_attached_file_18" /><input type="text" name="event[attached_file_desc_18]" value="" 0="" id="event_attached_file_desc_18" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_19]" 0="" id="event_attached_file_19" /><input type="text" name="event[attached_file_desc_19]" value="" 0="" id="event_attached_file_desc_19" /></div>
<div class="show" style="display:none;"><input type="file" name="event[attached_file_20]" 0="" id="event_attached_file_20" /><input type="text" name="event[attached_file_desc_20]" value="" 0="" id="event_attached_file_desc_20" /></div>
 <button class="sub">Click to add/view more files</button>

 

But that doesnt seem to work. It adds the div, then It just tries to submit my page.

 

Thanks

 

[JustLikeIcarus]

Ok so im assuming you have a normal page submit button plus one for showing these elements right?  The submit function your getting is from the  button element being pressed. If your using input type="submit" for the submit button then just change that js to

$(document).ready(function () {
  $('button').click(function(e){
    $('.show:hidden:first').show();
    return false;
  });
});

That will keep button elements from submitting the page. You can also give the button an id and change the jquery selector to that id instead of button.

[wigglesby]

Worked perfectly!!

 

Thank you