Question

UPDATE:
Looking at people’s suggestions, I’ve realized I should go without AJAX. I decided to change the load function and now put the jquery code inside it. However, it still does not work as no elements are being displayed as visible. Here is what the new code looks like.

<style>

.input_1 {display: none;}

.input_2 {display: none;}

.input_3 {display: none;}

</style>

<script type="text/javascript">

var numbers = $('#select_number').val();

function load(numbers) {    
if (numbers == 1) 
{$("input").hide();$(".input_1").show();} else 
if (numbers == 2) 
{$("input").hide();$(".input_1").show();$(".input_2").show();} else
if (numbers == 3) 
{$("input").hide();$(".input_1").show();$(".input_2").show();$(".input_3").show();}}

</script>

And here is what the select tag looks like now

<form id="form" action="" method="post">

<select id="select_number" onclick="load( numbers );" >

<option>1</option>
<option>2</option>
<option>3</option>

</select>

<input type="text" class="input_1"/>

<input type="text" class="input_2"/>

<input type="text" class="input_3"/>

</form>

Answer 1

Found out the solution. Add $(‘#select_number’).val() within the load function in the onclick attribute and it works. Thanks everyone for their help.