we have two radio buttons with same name. when we check radiobutton no.of imagefile boxes appear.
for example i have two radio buttons. if i check 1 radio button appear 5 image upload fields. now selects another radio button selects then appear only 10 image upload field. anybody help.

Recommended Answers

AM I correct in assuming you have:
2 radiobuttons - one to display 5 file upload fields and one to display 10 upload fields.

A quick and dirty solution would be to hide/show through javascript and css:

<input name="showups" type="radio" value="0" onclick="show_up(5);return false;" selected="selected" /><label for="show5">Show …
Jump to Post

All 3 Replies

Member Avatar

AM I correct in assuming you have:
2 radiobuttons - one to display 5 file upload fields and one to display 10 upload fields.

A quick and dirty solution would be to hide/show through javascript and css:

<input name="showups" type="radio" value="0" onclick="show_up(5);return false;" selected="selected" /><label for="show5">Show 5 upload fields</label>
<input name="showups" id="show10" type="radio" value="1" onclick="show_up(10);return false;" /><label for="show10">Show 10 upload fields</label>

<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<div id = "extras" class="show">
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
</div>

This gives an array of file elements (0 - 9).
In your head area:

<script>
function show_up(x){
  if(x > 5){
     document.getElementById('extras').className = 'show';
  }else{
     document.getElementById('extras').className = 'hide';
  }
}
</script>
<style>
  .hide{
     display:none;
  }
</style>

If you fill file widgets in range 5-9 and then hide the last 5, they will still try to upload the files - so you could write something a bit "cleverer" to deal with this. This is just an example - I wouldn't use this in a production site.

AM I correct in assuming you have:
2 radiobuttons - one to display 5 file upload fields and one to display 10 upload fields.

A quick and dirty solution would be to hide/show through javascript and css:

<input name="showups" type="radio" value="0" onclick="show_up(5);return false;" selected="selected" /><label for="show5">Show 5 upload fields</label>
<input name="showups" id="show10" type="radio" value="1" onclick="show_up(10);return false;" /><label for="show10">Show 10 upload fields</label>

<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<div id = "extras" class="show">
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
</div>

This gives an array of file elements (0 - 9).
In your head area:

<script>
function show_up(x){
  if(x > 5){
     document.getElementById('extras').className = 'show';
  }else{
     document.getElementById('extras').className = 'hide';
  }
}
</script>
<style>
  .hide{
     display:none;
  }
</style>

If you fill file widgets in range 5-9 and then hide the last 5, they will still try to upload the files - so you could write something a bit "cleverer" to deal with this. This is just an example - I wouldn't use this in a production site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function show_up(x){

  if(x > 5){
     document.getElementById('extra').style.display = 'table-cell';
	 document.getElementById('extras').style.display = 'none';
  }else{
     document.getElementById('extras').style.display = 'table-cell';
	 document.getElementById('extra').style.display = 'none';
  }
}
</script>
<style>
  .hide{
     display:none;
  }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form name="form" method="post">
<input name="showups" type="radio" value="0" onclick="show_up(5);return false;"/><label for="show5">Show 5 upload fields</label>
<input name="showups" id="show10" type="radio" value="1" onclick="show_up(10);return false;"/><label for="show10">Show 10 upload fields</label>
<div id = "extra" class="show" style="display:none">
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
</div>
<div id = "extras" class="show" style="display:none">
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
<input type="file" name="upload[]" />
</div>

</form>
</body>
</html>

see once its working. but radio button checking problem. what is the solution for this.

Member Avatar

Change this line to hide the extras by default:

<div id = "extras" class="hide">

Also you need a selected="selected" attribute inside the first radiobutton to ensure that the first one (5 file) is 'on'.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.