show multi file upload based on dropdown select

▲
-1
▼

I am trying to run this code but I don't know why error comes with jquery when I select any item in the list here is the code

<form name="myform">
    <table>
        <td> // green underline in this line of the <td>
            <select name="one" onchange=" 
if(this.options[this.selectedIndex].value == '1')
{
    document.myform['b'].style.visibility = 'visible'
}
else if (this.options[this.selectedIndex].value == '2')
{
    document.myform['b'].style.visibility = 'visible',
    document.myform['m'].style.visibility = 'visible'
}
else if (this.options[this.selectedIndex].value == '3') 
{
    document.myform['b'].style.visibility = 'visible',
    document.myform['m'].style.visibility = 'visible',
    document.myform['p'].style.visibility = 'visible'
}
else
{
    document.myform['b'].style.visibility = 'hidden',
    document.myform['m'].style.visibility = 'hidden',
    document.myform['p'].style.visibility = 'hidden'
} ;">
                <option value="" selected="selected">Select...</option>
                <option value="1">Bachelore Degree</option>
                <option value="2">Master Degree</option>
                <option value="3">PhD</option>
            </select>
            <input type="file" id ="b" style="visibility:hidden;" />
            <input type="file" id ="m" style="visibility:hidden;" />
            <input type="file" id ="p" style="visibility:hidden;" />
        </td>
    </table>
</form>​
@section Scripts {

@Scripts.Render("~/Content/bootstrap-multiselect.css")
@Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
@Scripts.Render("~/Scripts/bootstrap.js")
@Scripts.Render("~/Scripts/bootstrap-multiselect.jsl")
}

if I select 1 or 2 or 3 from drop down list then I get this error message

0x800a138f - JavaScript runtime error: Unable to get property 'b' of undefined or null reference

the idea behind the code is if the user selected his qualification as bachelor degree holder only one file he has to upload and when he select master then 2 files to upload and for phd 3 files certificates

c#
model-view-controller
asked on Stack Overflow Apr 1, 2018 by Ebrahim • edited Apr 2, 2018 by James Z

1 Answer

▲
0
▼

I have tried your html/js code and didn't see the errors as you mentioned.

However I have slightly restructured your code by placing the 'onchange' js code in a seperate method as it adds clarity. Hope it helps.

<html>
<script type="text/javascript">
function qualificationSelected(selectedIndex){
    document.getElementById('b').style.visibility = (selectedIndex >= 1) ? 'visible' : 'hidden';
    document.getElementById('m').style.visibility = (selectedIndex >= 2) ? 'visible' : 'hidden';
    document.getElementById('p').style.visibility = (selectedIndex == 3) ? 'visible' : 'hidden';
}
</script>
<body>
<form name="myform">
    <table>
        <tr>
        <td> 
            <select name="one" onchange="qualificationSelected(this.selectedIndex)">
                <option value="" selected="selected">Select...</option>
                <option value="1">Bachelore Degree</option>
                <option value="2">Master Degree</option>
                <option value="3">PhD</option>
            </select>
            <input type="file" id ="b" style="visibility:hidden;" />
            <input type="file" id ="m" style="visibility:hidden;" />
            <input type="file" id ="p" style="visibility:hidden;" />
        </td>
    </tr>
    </table>
</form>​

</body>
</html>
answered on Stack Overflow Apr 1, 2018 by Senthil Kumar Mohan

User contributions licensed under CC BY-SA 3.0