Select Element inside Form not working in JQuery

Go To StackoverFlow.com

-1

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?

2009-06-16 08:45
by Graviton
the form tag is closed - Haim Evgi 2009-06-16 08:47
Have you tried putting the alert outside the $.getJSON? The $.getJSON propably fails so you don't see your alert - jeroen.verhoest 2009-06-16 08:48
@haim, yes,form tag is closed. I edited the questio - Graviton 2009-06-16 08:50
another thing why not use $(document).ready(function(){} - Haim Evgi 2009-06-16 08:51
haim: $(function() { ... }); is shorthand for $(document).ready(function() { ... }) - Paolo Bergantino 2009-06-16 08:52
thank, now i know : - Haim Evgi 2009-06-16 08:58


1

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.

2009-06-16 08:51
by kgiannakakis


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!'); }
        });
    });
});    
2009-06-16 08:48
by Paolo Bergantino