I had created the dropdown list with fields Labs,Paharmacy,Gym,Food.When I select the Lab from dropdown list it has generate the new field as "name". When I select the pharmacy field it has to show the upload button field.Please suggest me how to do this.
我创建了下拉列表，其中包含Labs，Paharmacy，Gym，Food等字段。当我从下拉列表中选择Lab时，它会生成新字段作为“name”。当我选择药房字段时，它必须显示上传按钮字段。请建议我如何做到这一点。
My form
我的表格
<form action="<?php echo $this->getFormAction(); ?>" id="quickservice" method="post">
<div class="fieldset">
<ul class="form-list">
<li>
<label for="Servicetype" class="required"><em>*</em><?php echo $this->__('Service Type') ?></label>
<div class="input-box">
<select name="servicetype" class="input-text required-entry validate-select" style="width: 150px;" />
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="Lab"><?php echo $this->__('Lab')?></option>
<option value="Hospital"><?php echo $this->__('Hospital')?></option>
<option value="Food"><?php echo $this->__('Food')?></option>
<option value="Gym"><?php echo $this->__('Gym')?></option>
<option value="Physio"><?php echo $this->__('Physio')?></option>
<option value="Nurse"><?php echo $this->__('Nurse')?></option>
</select>
</div>
</li>
</ul>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Submit') ?>" name="send" id="send2"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
</div>
</form>
1 个解决方案
#1
1
If you want to show/hide some particular field on selecting an option and you don't want the page to refresh, you should use JavaScript code so for example if you want to show the upload field on selecting "Lab" value you could do it like this:
如果要在选择选项时显示/隐藏某个特定字段而您不希望页面刷新，则应使用JavaScript代码，例如，如果要在选择“Lab”值时显示上载字段，则可以执行此操作它是这样的：
<!doctype html>
<head>
<script>
function showHidden(elem){
if(elem.value == 'Lab')
document.getElementById('fileToUpload').style.display = "block";
else
document.getElementById('fileToUpload').style.display = "none";
}
</script>
</head>
<body>
<form action="<?php echo $this->getFormAction(); ?>" id="quickservice" method="post" enctype="multipart/form-data">
<div class="fieldset">
<ul class="form-list">
<li>
<label for="Servicetype" class="required"><em>*</em><?php echo $this->__('Service Type') ?></label>
<div class="input-box">
<select id='servicetype' onchange="showHidden(this)" name="servicetype" class="input-text required-entry validate-select" style="width: 150px;" />
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="Lab" id='lab'><?php echo $this->__('Lab')?></option>
<option value="Hospital"><?php echo $this->__('Hospital')?></option>
<option value="Food"><?php echo $this->__('Food')?></option>
<option value="Gym"><?php echo $this->__('Gym')?></option>
<option value="Physio"><?php echo $this->__('Physio')?></option>
<option value="Nurse"><?php echo $this->__('Nurse')?></option>
</select>
</div>
</li>
</ul>
<div id="fileToUpload" style='display: none;'>
<input type="file" name="fileToUpload" />
</div>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Submit') ?>" name="send" id="send2"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
</div>
</form>
</body>
and if you want to show/hide more fields, you can use the same logic!
如果你想显示/隐藏更多字段，你可以使用相同的逻辑！
<!doctype html>
<head>
<script>
function showHidden(elem){
if(elem.value == 'Lab')
{
document.getElementById('fileToUpload').style.display = "block";
document.getElementById('city_name').style.display = "none";
}
else if(elem.value == 'Hospital')
{
document.getElementById('city_name').style.display = "block";
document.getElementById('fileToUpload').style.display = "none";
}
else
{
document.getElementById('fileToUpload').style.display = "none";
document.getElementById('city_name').style.display = "none";
}
}
</script>
</head>
<body>
<form action="<?php echo $this->getFormAction(); ?>" id="quickservice" method="post" enctype="multipart/form-data">
<div class="fieldset">
<ul class="form-list">
<li>
<label for="Servicetype" class="required"><em>*</em><?php echo $this->__('Service Type') ?></label>
<div class="input-box">
<select id='servicetype' onchange="showHidden(this)" name="servicetype" class="input-text required-entry validate-select" style="width: 150px;" />
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="Lab" id='lab'><?php echo $this->__('Lab')?></option>
<option value="Hospital"><?php echo $this->__('Hospital')?></option>
<option value="Food"><?php echo $this->__('Food')?></option>
<option value="Gym"><?php echo $this->__('Gym')?></option>
<option value="Physio"><?php echo $this->__('Physio')?></option>
<option value="Nurse"><?php echo $this->__('Nurse')?></option>
</select>
</div>
</li>
</ul>
<div id="fileToUpload" style='display: none;'>
<input type="file" name="fileToUpload" />
</div>
<div id="city_name" style='display: none;'>
<input type="text" name="city" />
<input type="text" name="name" />
</div>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Submit') ?>" name="send" id="send2"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
</div>
</form>
</body>
#1
1
If you want to show/hide some particular field on selecting an option and you don't want the page to refresh, you should use JavaScript code so for example if you want to show the upload field on selecting "Lab" value you could do it like this:
如果要在选择选项时显示/隐藏某个特定字段而您不希望页面刷新，则应使用JavaScript代码，例如，如果要在选择“Lab”值时显示上载字段，则可以执行此操作它是这样的：
<!doctype html>
<head>
<script>
function showHidden(elem){
if(elem.value == 'Lab')
document.getElementById('fileToUpload').style.display = "block";
else
document.getElementById('fileToUpload').style.display = "none";
}
</script>
</head>
<body>
<form action="<?php echo $this->getFormAction(); ?>" id="quickservice" method="post" enctype="multipart/form-data">
<div class="fieldset">
<ul class="form-list">
<li>
<label for="Servicetype" class="required"><em>*</em><?php echo $this->__('Service Type') ?></label>
<div class="input-box">
<select id='servicetype' onchange="showHidden(this)" name="servicetype" class="input-text required-entry validate-select" style="width: 150px;" />
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="Lab" id='lab'><?php echo $this->__('Lab')?></option>
<option value="Hospital"><?php echo $this->__('Hospital')?></option>
<option value="Food"><?php echo $this->__('Food')?></option>
<option value="Gym"><?php echo $this->__('Gym')?></option>
<option value="Physio"><?php echo $this->__('Physio')?></option>
<option value="Nurse"><?php echo $this->__('Nurse')?></option>
</select>
</div>
</li>
</ul>
<div id="fileToUpload" style='display: none;'>
<input type="file" name="fileToUpload" />
</div>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Submit') ?>" name="send" id="send2"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
</div>
</form>
</body>
and if you want to show/hide more fields, you can use the same logic!
如果你想显示/隐藏更多字段，你可以使用相同的逻辑！
<!doctype html>
<head>
<script>
function showHidden(elem){
if(elem.value == 'Lab')
{
document.getElementById('fileToUpload').style.display = "block";
document.getElementById('city_name').style.display = "none";
}
else if(elem.value == 'Hospital')
{
document.getElementById('city_name').style.display = "block";
document.getElementById('fileToUpload').style.display = "none";
}
else
{
document.getElementById('fileToUpload').style.display = "none";
document.getElementById('city_name').style.display = "none";
}
}
</script>
</head>
<body>
<form action="<?php echo $this->getFormAction(); ?>" id="quickservice" method="post" enctype="multipart/form-data">
<div class="fieldset">
<ul class="form-list">
<li>
<label for="Servicetype" class="required"><em>*</em><?php echo $this->__('Service Type') ?></label>
<div class="input-box">
<select id='servicetype' onchange="showHidden(this)" name="servicetype" class="input-text required-entry validate-select" style="width: 150px;" />
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="Lab" id='lab'><?php echo $this->__('Lab')?></option>
<option value="Hospital"><?php echo $this->__('Hospital')?></option>
<option value="Food"><?php echo $this->__('Food')?></option>
<option value="Gym"><?php echo $this->__('Gym')?></option>
<option value="Physio"><?php echo $this->__('Physio')?></option>
<option value="Nurse"><?php echo $this->__('Nurse')?></option>
</select>
</div>
</li>
</ul>
<div id="fileToUpload" style='display: none;'>
<input type="file" name="fileToUpload" />
</div>
<div id="city_name" style='display: none;'>
<input type="text" name="city" />
<input type="text" name="name" />
</div>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Submit') ?>" name="send" id="send2"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
</div>
</form>
</body>