Using jQuery event handlers - jQuery newbie

Question

I'm in the process of learning jQuery and feel that I must be missing something. I have a super simple form set up as below:

<form name="testform" id="testform" method="post">
    <select type="select" id="searchid">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    <input type="text" id="searchtext" value="$_POST['value']">
</form>

I'd like to use jQuery to automatically submit the form when #searchid is changed. I understand how to do this with basic JavaScript, but I need jQuery for other things and need to learn how these things work. The below jQuery snippet seems to me like it should work, but it's not working. Any ideas why?

$( "#searchid" ).change( function() {
    $( "#testform" ).submit();
})

Thanks for pointing that out. I added them and it still doesn't work. :( — R Mac
– R Mac, Commented Jun 1, 2014 at 20:29
I'd suggest starting where we all started out, by reading the documentation, and jQuery now has it's own learning center. An hour of reading and trying some of the examples, and you should be able to make that code work. — adeneo
– adeneo, Commented Jun 1, 2014 at 20:32
Your inputs have no name, what are you trying to post? Probably what you get server side isn't really what you're waiting for. BTW what do you mean with "it doesn't work"? What do you get? What do you expect? — Adriano Repetti
– Adriano Repetti, Commented Jun 1, 2014 at 20:37

PeterKA · Accepted Answer · 2014-06-01 21:00:18Z

2

This is how you can submit the form:

$(function() {
    $( "#searchid" ).change( function() {
        $( "#testform" )[0].submit();
        //or this.form.submit();
    });
});

Quite close indeed. To make sure that your server-side will receive proper data, your inputs should have names.

EDIT

The code has been updated to include DOM ready. It's easy to assume that DOM ready is so fundamental and that it may not be an issue. However, it's never safe to make any assumptions.

Please note that when creating demos on js fiddle, you may not be required to use DOM ready if the drop down under jQuery version selector says 'onLoad' or 'onDomReady' ... .. as your code will be wrapped in the appropriate event handler by js fiddle anyway.

edited Jun 1, 2014 at 21:00

answered Jun 1, 2014 at 20:42

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

R Mac Over a year ago

It doesn't work unless I wrap it in the ready handler. It seems strange to me that the examples I'm seeing don't require that.

PeterKA Over a year ago

DOM ready is a given, and your comment just came when I thought of including DOM ready. See the updated version. Where is the example? On JS Fiddle?

R Mac Over a year ago

I was using the information from the "Learn jQuery" site referenced above well before asking this question. learn.jquery.com/events/handling-events Knowing that these handlers require DOM ready is good, but it would have taken me ages to find that information without this question. :/

Felix Kling Over a year ago

@RMac: Seems like you skipped the introduction: learn.jquery.com/about-jquery/how-jquery-works

R Mac Over a year ago

I didn't skip that. I just didn't understand it. I've been using event handlers in the HTML like onchange before and am new to all this. I didn't make the connection reading that that the HTML onchange handler is loaded when the DOM is ready anyway. It was an oversight on my part.

Collectives™ on Stack Overflow

Using jQuery event handlers - jQuery newbie

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related