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.
muralibobby2015
17
Posting Pro
Recommended Answers
Jump to PostAM 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 …
All 3 Replies
diafol
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.
muralibobby2015
17
Posting Pro
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.
diafol
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 meeting, networking, learning, and sharing knowledge.