Select Element inside Form not working in JQuery

Question

I have the following HTML form:

<div id="main">
  <form Id="search-form" action="/ViewRecord/AllRecord" method="post">
    <div>
        <fieldset>
            <legend>Search</legend>
           <p>
                <label for="username">Staff name</label>
                <input id="username" name="username" type="text" value="" />
                <label for="softype"> software type</label>

                <input type="submit" value="Search" />
            </p>
        </fieldset>
    </div>
  </form>
</div>

And I want to show an alert box when the username field is clicked. This is my JQuery code:

$(function() {
$("#username").click(function() {
        $.getJSON("ViewRecord/GetSoftwareChoice", {},
    function(data) {
        alert(data);
    });
    });
});

For certain reason the Click is never fired; anything I did wrong?

Answer 1

You might want the focus event instead, as click will only fire if you explicitly click on the element:

$(function() {
    $("#username").focus(function() {
        $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) {
            alert(data);
        });
    });
});

Other than that, you might want to look in Firebug to make sure the request is completing successfully. Or, even better, you could use the lower-level $.ajax call to see if the request is not completing:

$(function() {
    $("#username").focus(function() {
        $.ajax({
            url: 'ViewRecord/GetSoftwareChoice',
            dataType: 'json',
            type: 'GET',
            success: function(data) { alert(data); },
            error: function() { alert('something went wrong!'); }
        });
    });
});

Answer 2

Your code is correct and the event should be fired. Probably the problem is with AJAX call. Put an alert before the ajax call to make sure that this is indeed the problem.