Talha Aslam Talha Aslam - 3 months ago 18
HTML Question

Javascript show a input type file on anchor click

My code is as follows:

<div class="fifty">
<label>Credit report</label>
<input type="hidden" id="credtireport-link" name="credtireport-link" value="<?php echo $creditreport; ?>">

<input type="file" name="creditreport" id="creditreport" <?php if($creditreport!=""){?> style="display:none" <?php } ?> >
<?php if($creditreport!="") { ?>
<a href="#" onclick="showfile();">Edit File</a>
<?php } ?>
</div>
<div class="fifty">
<label>Employer’s ref</label>
<input type="hidden" id="employerref-link" name="employerref-link" value="<?php echo $employeer_ref_url; ?>">

<input type="file" name="employerref" id="employerref" <?php if($employeer_ref_url!=""){?> style="display:none" <?php } ?>>
<?php if($employeer_ref_url=="") { ?>
<a href="#" onclick="showfile();">Edit File</a>
<?php } ?>
</div>


Please help me out, i want to write a function in javascript which is called on edit file anchor click and will show the respective input type file.

Explanation:

If some one clicked on anchor of credit report then it should show only

I hope you understand

My Javascript code:

function showfile()
{
var id=$(this).parent().find('input[type="file"]').toggle();
return false;
}


Thanks in advance.

Answer

html

<a href="#" onclick="showfile(this);">Edit File</a>

javascript

function showfile(el) {
  var id = $(el).prev(":file").toggle();
  return false;
}

plnkr http://plnkr.co/edit/MjZkZvFjlqj4a8HffYaF?p=preview