Ajax请求在CSS弹出窗口中形成

Question

from France ... and sorry for my english language ...

I code in symfony 3. I have an entity "book" can have, according to the "type" attribute selected, one or more attributes (client, student, organizer and / or speaker) each mapped as an entity "user". In my "book" form, I can select for each of the attributes related to "user" my users registered in the bdd. I want to add a "user" by opening a popup css, loading my user form and saving it with ajax. In case of success, I recharge my list with ajax to use on my form "booking.

 function nouveauOrganisateur() { $.ajax({ url : Routing.generate('user_new'), success: function(html) { $('#NewOrganisateur').append( $(html).find('form') ); $('div#NewOrganisateur form button').replaceWith( $( '<button onclick="EnregistrerClient(event)">Enregistrer</button>' ) ); } }); } function EnregistrerClient( event ) { console.log(event.target.nodeName); var $form = $( event.target ).closest( 'form'); $.ajax({ url : Routing.generate('user_new'), type: 'post', success: function(html) { console.log(html); } }) } 

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div id="UserOrganisateur" class="label"> <strong>{{ form_label(form.Stage.organisateurs, "Organisateurs ") }}</strong> {{ form_errors(form.Stage.organisateurs) }} {{ form_widget(form.Stage.organisateurs) }} <button onclick="nouveauOrganisateur()">Ajouter un Nouveau client</button> <div id="NewOrganisateur"> {{ form_errors(form.Stage.NewOrganisateur) }} {{ form_widget(form.Stage.NewOrganisateur, {'value' : false}) }} </div> </div> 

When I validate my form "user", my page is reloaded but it is not what I want. And my user is not registered !? I started in javascript. Can you help me?

---

From my form, I have a "select" for the type. When the "type" is selected, thanks to FormEvents and a js script I load the rest of the form. For example, if my "type" is "training", I load the embedded entity Training form. My "training" entity contains the "organizer" attributes and "speaker", 2 multiple select which options are the "user" stored in the BDD. In this form, I add a button to record a new "user". This button displays the registration form to use in which I replaced the submission boutton by Ajax action button . I just want to register my new user and recharge my list of selects ("organizer" and "speaker"), but when I click on this last boutton my page comes from where to select the "type".

---

Whith some change, I can registred my new user

 function nouveauOrganisateur() { $.ajax({ url : Routing.generate('user_new'), success: function(html) { console.log(html); $('#NewOrganisateur').append( $(html).find('form') ); $('form[name=user] button').replaceWith( $( '<button>Enregistrer</button>' ) ); $('form[name=user] button').on("click", function(){ $.ajax({ url : Routing.generate('user_new'), type: 'post', data: $('form[name=user]').serialize(), success: function(html) { console.log(html); } }); }); } }); } 

But my page is always reloaded ???

Answer 1

I think you are trying to stop the page from reloading or changing when the user clicks the button. There may be two solutions to this:

1.) The <button> html tag defaults to type="submit" which submits the form. You can avoid this by adding type="button"

or

2.) In the javascript function EnregistrerClient add a line at the top of the function event.preventdefault(); this will stop the form from submitting.