1. 技术文章
  2. Jquery function submit() is not working in ajax success function

Jquery function submit() is not working in ajax success function

由 时光总嘲笑我的痴心妄想 提交于 2019-12-14 02:35:41

问题


I have a form that I submit in POST in AJAX and if this form is valid I return a new form that I want to submit automatically in Jquery. I feel that my .submit() is totally ignored, I don't understand..

I tried to make console.log() before and after calling the submit() function, they show up nicely, it's very strange..

My main view (show.html.twig) :

{% block body %} 
            <div class="text-center">
                <img src="{{ asset('loader/loader.gif', 'image_site') }}" alt="Loader Just Pronos" id="spinner" class="mt-30">
            </div>

            <div id="userForm">
                {{ form_start(form, {'attr': {'class': 'contact-form user-form'}}) }}

                <div class="row mt-10" id="formError">
                    <div class="col-12">
                        {{ form_errors(form) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <div class="name-input">
                            {{ form_widget(form.nom) }}
                            {{ form_errors(form.nom) }}
                        </div>
                    </div>

                    <div class="col">
                        <div class="name-input">
                            {{ form_widget(form.prenom) }}
                            {{ form_errors(form.prenom) }}
                        </div>
                    </div>

                    <div class="col">
                        <div class="box-input">
                            {{ form_widget(form.pays) }}
                            {{ form_errors(form.pays) }}
                        </div>
                    </div>
                </div>

                <div class="row mt-10">
                    <div class="col">
                        <div class="box-input">
                            {{ form_widget(form.tel) }}
                            {{ form_errors(form.tel) }}
                        </div>
                    </div>

                    <div class="col">
                        <div class="email-input">
                            {{ form_widget(form.email) }}
                            {{ form_errors(form.email) }}
                        </div>
                    </div>
                </div>

                <div class="row mt-10">
                    <div class="col">
                        <p class="mt-15"><em>* Après avoir soumis ce formulaire, vous serez automatiquement redirigé sur la plateforme de paiement sécurisée Klik&Pay.</em></p>
                        <div class="input-submit">
                            {{ form_widget(form.submit) }}
                        </div>
                    </div>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </section>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            let registerForm = "{{ path('site_devenir_vip_ajax_payment_form') }}";

            $("#spinner")
                .hide();

            $(document)
                .on("submit", "form", function (e) {
                    e.preventDefault();

                    $.ajax({
                        url: registerForm,
                        type: "POST",
                        dataType: "json",
                        data: $(this)
                            .serialize(),
                        beforeSend: function () {
                            $("#spinner")
                                .show();
                        },
                        success: function (data, textStatus, xhr) {
                            if (xhr.status === 200 && textStatus === 'success') 
                            {
                                $("#userForm")
                                    .html(data.template);
                                console.log("here 1");
                                $("#paymentForm").submit();
                                console.log("here 2");
                            } else {
                                console.log(data);
                            }
                        },
                        complete: function () {
                            $("#spinner")
                                .hide();
                        },
                        error: function (jqXHR, status, error) {

                        },
                    });
                });
        });
    </script>
{% endblock %}

The second form (klik_and_pay_form.html.twig) :

{% form_theme formKlikAndPay 'site/form_theme/form_div_layout.html.twig' %}

{{ form_start(formKlikAndPay, {'attr': {'class': 'contact-form user-form', 'action': 'https://www.klikandpay.com/paiementtest/checkabon.pl', 'id': 'paymentForm', 'method': 'POST'}}) }}

<div class="row mt-10" id="formError">
    <div class="col-12">
        {{ form_errors(formKlikAndPay) }}
    </div>
</div>

<div class="row">
    <div class="col">
        <div class="name-input">
            {{ form_widget(formKlikAndPay.nom) }}
            {{ form_errors(formKlikAndPay.nom) }}
        </div>
    </div>

    <div class="col">
        <div class="name-input">
            {{ form_widget(formKlikAndPay.prenom) }}
            {{ form_errors(formKlikAndPay.prenom) }}
        </div>
    </div>

    <div class="col">
        <div class="box-input">
            {{ form_widget(formKlikAndPay.pays) }}
            {{ form_errors(formKlikAndPay.pays) }}
        </div>
    </div>
</div>

<div class="row mt-10">
    <div class="col">
        <div class="box-input">
            {{ form_widget(formKlikAndPay.tel) }}
            {{ form_errors(formKlikAndPay.tel) }}
        </div>
    </div>

    <div class="col">
        <div class="email-input">
            {{ form_widget(formKlikAndPay.email) }}
            {{ form_errors(formKlikAndPay.email) }}
        </div>
    </div>
</div>

{{ form_row(formKlikAndPay.accountId) }}
{{ form_row(formKlikAndPay.abonnementId) }}

<div class="row mt-10">
    <div class="col">
        <p class="mt-15"><em>* Après avoir soumis ce formulaire, vous serez automatiquement redirigé sur la plateforme de paiement sécurisée Klik&Pay.</em></p>
        <div class="input-submit">
            {{ form_widget(formKlikAndPay.submit) }}
        </div>
    </div>
</div>

{{ form_end(formKlikAndPay) }}

The controller :

/**
     * @Route("/{id<\d+>?1}/{slug}", methods={"GET", "POST"}, name="show")
     * @Security("is_granted('IS_AUTHENTICATED_ANONYMOUSLY')")
     */
    public function show(Request $request, Offre $offre, $slug): Response
    {
        if ($offre->getSlug() !== $slug) {
            return $this->redirectToRoute('site_devenir_vip_show', [
                'id'   => $offre->getId(),
                'slug' => $offre->getSlug(),
            ], Response::HTTP_MOVED_PERMANENTLY);
        }

        $utilisateur = new User();

        $form = $this->createForm(UserPaiementType::class, $utilisateur);
        $form->handleRequest($request);

        $session = new Session(new NativeSessionStorage(), new AttributeBag());
        $session->set('offre', $offre->getId());

        return $this->render('site/pages/devenir_vip/show.html.twig', [
            'form'  => $form->createView(),
            'offre' => $offre,
        ]);
    }

    /**
     * @Route("/load-payment-form", name="ajax_payment_form", condition="request.isXmlHttpRequest()", methods={"GET", "POST"})
     */
    public function ajaxKlikAndPayForm(Request $request): Response
    {
        $utilisateur = new User();

        $form = $this->createForm(UserPaiementType::class, $utilisateur);
        $form->handleRequest($request);

        if ($form->isSubmitted() === true) {
            if ($form->isValid() === true) {
                if ($request->getSession() === null) {
                    return new Response('Une erreur s\'est produite pendant la récupération de l\'offre.');
                }

                $offreSession = $request->getSession()->get('offre');
                $offre        = $this->entityManager->getRepository(Offre::class)->find($offreSession);

                $klikAndPayPaiement = new KlikAndPayPaiement();
                $klikAndPayPaiement->setPrenom($utilisateur->getPrenom());
                $klikAndPayPaiement->setNom($utilisateur->getNom());
                $klikAndPayPaiement->setPays($utilisateur->getPays());
                $klikAndPayPaiement->setEmail($utilisateur->getEmail());
                $klikAndPayPaiement->setTel($utilisateur->getTel());
                $klikAndPayPaiement->setAccountId($this->getParameter('app.klik_and_pay.account_id'));
                $klikAndPayPaiement->setAbonnementId($offre->getIdKlik());

                $formKlikAndPay = $this->createForm(KlikAndPayPaiementType::class, $klikAndPayPaiement);
                $formKlikAndPay->handleRequest($request);

                $response = [
                    'template' => $this->renderView('site/layout/partials/ajax/klik_and_pay_form.html.twig', [
                        'formKlikAndPay' => $formKlikAndPay->createView(),
                    ]),
                ];

                return new JsonResponse($response, JsonResponse::HTTP_OK);
            }

            return new Response('Le formulaire comporte des erreurs.');
        }

        $offreSession = $request->getSession()->get('offre');
        $offre        = $this->entityManager->getRepository(Offre::class)->find($offreSession);

        $klikAndPayPaiement = new KlikAndPayPaiement();
        $klikAndPayPaiement->setPrenom($utilisateur->getPrenom());
        $klikAndPayPaiement->setNom($utilisateur->getNom());
        $klikAndPayPaiement->setPays($utilisateur->getPays());
        $klikAndPayPaiement->setEmail($utilisateur->getEmail());
        $klikAndPayPaiement->setTel($utilisateur->getTel());
        $klikAndPayPaiement->setAccountId($this->getParameter('app.klik_and_pay.account_id'));
        $klikAndPayPaiement->setAbonnementId($offre->getIdKlik());

        $formKlikAndPay = $this->createForm(KlikAndPayPaiementType::class, $klikAndPayPaiement);
        $formKlikAndPay->handleRequest($request);

        return $this->render('site/layout/partials/ajax/klik_and_pay_form.html.twig', [
            'formKlikAndPay' => $formKlikAndPay->createView(),
        ]);
    }

Do you know why the jquery function submit() doesn't work ?

UPDATE :

I tried this :

$("#paymentForm").trigger("submit");
$("#paymentForm")[0].trigger("submit");
$("#paymentForm").submit();
$("#paymentForm")[0].submit();

let submitPayment = $('button[name="submit"]');
$(submitPayment).trigger('click');

And I added this in the form_start :

'method': 'POST'

回答1:


You have prevented the default in the jQuery submit handler

You could use the native submit by changing :

$("#paymentForm").submit();

To

$("#paymentForm")[0].submit();

The native submit event will not be listened to by the jQuery submit listener




回答2:


Ok try to use somthing like this:

let submitPayment = $('button[name="klik_and_paypaiement_form[submit]"]'); //see in the html the good name of your button
$(submitPayment).trigger('click');



回答3:


I try this in my project and it's works fine:

/** In your form type add block prefix */
/**
 * {@inheritdoc}
 */
public function getBlockPrefix()
{
    return 'your_bundle_name_klik_and_pay_paiement_form';
}

<div id="userForm">
</div>

<script>

$('form[name="your_bundle_name_user_paiement_form"]').submit(function(e){
e.preventDefault();
//....
success: function (data, textStatus, xhr) {
    if (xhr.status === 200 && textStatus === 'success') 
    {
        $("#userForm")
            .html(data.template);
        console.log("here 1");
        $('form[name="your_bundle_name_klik_and_pay_paiement_form"]').submit();
        console.log("here 2");
    } else {
        console.log(data);
    }
},

})

$('form[name="your_bundle_name_klik_and_pay_paiement_form"]').submit(function(e){
e.preventDefault();
//....
success: function (data, textStatus, xhr) {
    if (xhr.status === 200 && textStatus === 'success') 
    {
        alert('form submitted');
    } else {
        console.log(data);
    }
},

})



来源：https://stackoverflow.com/questions/54606896/jquery-function-submit-is-not-working-in-ajax-success-function

标签
javascript
jquery
ajax
symfony
twig
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!