jquery click button not working

Question

I have this form witch contains a hidden field and a button inside of a function which i want to trigger an ajax db remove but i can't seem to make it work.

        $this->_calendar .= '<td class="user_data" id="'. $data[0]->id .'" style="background-color: '. $color[0]->color .';">

        <div class="userbox" id="'.$data[0]->id.'">
            <form action="schedule.php?page=management&ajax=true" method="post">
                <input type="hidden" name="id" value="'. $data[0]->id .'">
                <input type="submit" name="remove_entry" value="x" class="ajax_bnt" style="vertical-align:bottom;overflow:visible; font-size:1em; display:inline;  margin:0; padding:0; border:0; border-bottom:1px solid blue; color:blue; cursor:pointer;">
            </form>
        </div>

        </td>';

And this is the js file

$(document).ready(
function () {

    $('.ajax_btn').click( function() {

        $.post("schedule.php?page=management&ajax=true", { id : $('#id').val() }, function (data) {
            $('#remove_feedback').html(data);
        }
    );

    });

});

The problem is that when i click the 'x' button it doesn't trigger the jquery code, its processed using the normal method.

Do you guys have any suggestions? I'm struggling to work my head around the js part but i've hit this roadblock.

score 0 · Accepted Answer · answered Mar 05 '14 at 23:42

0

Your submit button has the class ajax_bnt but your click event is bound to ajax_btn, for starters.

Throw an alert('hello') inside of your .click event to ensure it's being hit. Also, you need to prevent the submit from going through via .preventDefault(). e.g.,:

$('.ajax_btn').click( function(ev) {
    ev.preventDefault();
    alert("is this being called?");
    $.post("schedule.php?page=management&ajax=true", { id : $('#id').val() }, function (data) {
        $('#remove_feedback').html(data);
    }
);

answered Mar 05 '14 at 23:42

mpen

272,448
266
850
1,236

What's your thought on changing it to type="button" instead of using preventDefault()? – VtoCorleone Mar 05 '14 at 23:45
@VtoCorleone: I'm not certain if all browsers respond to `type="button"` the same way -- are you sure none of them will submit the form anyway? I thought I remembered some inconsistencies, but I haven't looked into it recently. Edit: [this answer](http://stackoverflow.com/a/290221/65387) says you're right. I think the issue is just with ` – mpen Mar 05 '14 at 23:57
changed the type to button but it still doesn't 'read' the javascript – user3255543 Mar 05 '14 at 23:59
@user3255543 You're responding to the wrong answer. I wasn't the one that suggested changing the button type, although it wouldn't hurt. Did you fix the class name issue? – mpen Mar 06 '14 at 00:00
yes, i identified that just after the post, duh, but it seems it's not the root cause of the issue, as for responding to the wrong answer, i apologize but i'm new to stackoverflow – user3255543 Mar 06 '14 at 00:01
@user3255543: If you've put an alert in there and it's not being hit, then your `click` event isn't being bound. Forget the PHP source code, press Ctrl+U to bring up the HTML source code on your page and make sure everything looks fine in there. Also check your Chrome Developer Tools (F12 in Chrome) for any JavaScript errors. – mpen Mar 06 '14 at 00:11
1

figured it out, seems it was a combination of lack of experience, a s$$t load of typo's and the missing preventDefault() thingy. Thanks – user3255543 Mar 06 '14 at 00:12

score 0 · Answer 2 · answered Mar 05 '14 at 23:42

0

You need to add return false; after the $.post(); in order to stop submitting the form.

answered Mar 05 '14 at 23:42

sunshinejr

4,834
2
22
32

`return false` is deprecated. jQuery recommends `event.prevenDefault()` now. – mpen Mar 05 '14 at 23:44
Hmm, where did you found this is deprecated? On the api docs it says we can do it using either of these. – sunshinejr Mar 05 '14 at 23:46
Open your developer console and [run this](http://jsfiddle.net/mnbayazit/3Vg2W/). jQuery warns: "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." – mpen Mar 06 '14 at 00:01
Ah...shoot. I might be mistaken. The warning only comes up Chrome; it might not be intentional at all. http://bugs.jquery.com/ticket/14320 – mpen Mar 06 '14 at 00:05

score 0 · Answer 3 · answered Mar 05 '14 at 23:42

It looks like you have a spelling error in your html. ajax_bnt should be ajax_btn:

<input type="submit" name="remove_entry" value="x" class="ajax_btn" style="vertical-align:bottom;overflow:visible; font-size:1em; display:inline;  margin:0; padding:0; border:0; border-bottom:1px solid blue; color:blue; cursor:pointer;">

score 0 · Answer 4 · answered Mar 05 '14 at 23:43

Change your input from type="submit" to type="button"

<input type="button" name="remove_entry" value="x" class="ajax_btn" style="vertical-align:bottom;overflow:visible; font-size:1em; display:inline;  margin:0; padding:0; border:0; border-bottom:1px solid blue; color:blue; cursor:pointer;">

score 0 · Answer 5 · answered Mar 06 '14 at 00:15

if you want to use ajax only submit, then change

<form action="schedule.php?page=management&ajax=true" method="post">

to

<form method="post">

or

<form action="javascript:void(0)" method="post">

and don't forget to fix your class name as it spell "ajax_bnt". also it will be better to change your input type="submit" to input type="button".

Hope it helps

jquery click button not working

5 Answers5