submit form by ajax in Symfony2

Question

I have action what first need to render form by ajax and then need to update existing values. I already get rendered form with proper values, but when I click to submit form by ajax I cant prevent form submission, I have this script:

 $('#edit-comment').click(function (e) {
    e.preventDefault();
    console.log(1);
});

But submitting with still work ! What I am doing wrong. And I dont know how I need to handle submitted form in the edit action. Here is existing part of it:

 /**
 * @Route("/edit/comment", name="chat_edit", options={"expose"=true})
 */
public function editAction(Request $request)
{
    $comment_id = json_decode($request->getContent(), true)['commentId'];
    $comment = $this->get('comment.repository')->find($comment_id);
    $form = $this->createForm(new CommentType(), $comment);

    return $this->render("ChatCommentBundle:Comment:form.html.twig",
        array('form' => $form->createView())
    );
}

Link to gist with form type

Doesn't do much good to post server code for a client side problem. Did you wrap the event binding in document.ready? Is it the right selector? Does element exist at time code is run? Are there more than one of same ID in page? — charlietfl
– charlietfl, Commented Jan 28, 2015 at 13:53
@charlietfl, its wrapped in ready, selectir right, yes element exist.. — nowiko
– nowiko, Commented Jan 28, 2015 at 13:56
Create a demo that replicates this. As it stands right now we can't do anything to reproduce it — charlietfl
– charlietfl, Commented Jan 28, 2015 at 13:57

Community · Accepted Answer · 2017-05-23 12:17:11Z

3

Update:

The original answer (below) still applies, but given that the form is actually loaded using AJAX, you can't bind the event listeners in the $(document).ready callback. The best option for you is to use event delegation. This is done by attaching an event listener to a DOM element that does exist from the start, but have that listener pick up on events for elements that might be added later on. For example: the body element will always exist, so you can listen for a form submission there, whether or not that form exists doesn't matter:

$('body').on('submit', '#form-id', function(e)
{
    console.log('#form-id was submitted, do AJAX => submission stopped');
    return false;
    //or
    e.preventDefault();
    e.stopPropagation();
});

The why and how this works is very well explained here. It boils down to the fact that all events pass through all of the parent DOM elements of the target node, so you can attach listeners anywhere in the DOM, and handle the events before they reach their target.
I think this old answer of mine might explain a thing or 2, too. It doesn't use jQ, but it contains a simplified version of the code that jQ uses internally for delegation.

You're preventing the default effects of the click event on $('#edit-comment'), but that event still propagates through to the form. You might want to add e.stopPropagation(), too. Or simply return false; from the callback (which prevents the default and stops propagation).

However, a better way to prevent the form from being submitted is to use the submit event, and stop the submission there:

$('#form-id').on('submit', function(e)
{
    console.log('Do ajax call here');
    return false;
    //or
    e.preventDefault();
    e.stopPropagation();
});

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jan 28, 2015 at 14:01

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

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

4 Comments

Elias Van Ootegem Over a year ago

What's your form id, what is its selector? Do you see the output in your console? Add the rendered view to your question (or gist), because this code isn't copy-paste ready at all.

nowiko Over a year ago

the form in bootstrap modal window, so when document ready no form there, but when I click to edit button form returns by ajax, so how I think it will not working...

Elias Van Ootegem Over a year ago

@excluded_once: In that case, you're better of using event delegation, I'll update my answer

nowiko Over a year ago

yep, delegation help solve problem, thanks a lot, I need deep dive into JS, DOM and jQuery :)

Collectives™ on Stack Overflow

submit form by ajax in Symfony2

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related