Form with Ajax and PHP

Question

hello. I have a form inside a modal - which is opened by clicking a button that is generated as a column of a table. By clicking this button I capture the contents of each column and fill a form inside the modal.

Whether or not I edit this form, it will be sent to a php script to update the data of a particular user - all via ajax. In the ajax function, when returning Success, I am comparing if the result is equal to 'abc' then, and if it is, I call the Notify function - which generates a small notification.

The plugin for notification is: Notify.

I’m in two trouble.

1. By clicking 'Send' inside the modal-form the data is successfully sent to the php script. However, if I close the modal, open again, fill in the form and click submit, the notification appears twice. If I do this a third time, the notification will appear three times and so on.

2. I am receiving the values as parameter=value&parameter 2=value2&parameter3=Valor3, but in addition to submitting the form, I want to send a numerical value, but I am not able to capture the values in the php script... Thus:

     var dados = $('form[name=ajax_form]').serialize();
     var arry = {userId: id, formData: dados}
   

My table-html:

table formation within a while...

<td>
<button class="edit-user" data-toogle="modal" data-target="#modal-warning" data-id = <?php echo resultadoQuery['id']; ?>data-email = <?php echo $linhaAssociativa["email"];?> data-nome = "<?php echo $linhaAssociativa["nome"];?>" data-username = <?php echo $linhaAssociativa["login"];?>>
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</td>

My modal-html:

formation of a common modal-bootstrap... and within the modal-body a common form with 3 inputs: name, email and username... At the end of the form a button to submit to the script containing ajax.

<button type="submit" class="btn btn-primary"name="enviar">Enviar</button>

My javascript-ajax is: The function containing the whole ajax throw is called when that button I quoted at the beginning (regarding each line).

$(document).on('click', '.edit-user', function(){
 var $this = $(this);
 var usuario = $this.attr('data-username');
 var email = $this.attr('data-email');
 var nome = $this.attr('data-nome');

What I could notice: By clicking on the button and opening the modal and clicking on Submit (which is the modal’s Ubmit button) I can see in Network/XHR the request made straight. Without I close the modal and click submit again, an Edit-user.php is added to the history with 200 status.

But if I close the modal, and I click on the button to open the modal again and click on send, two requests are sent and two Edit-user.php + previous ones appear in the history! Now if I close again, and open the modal and click submit, appears the previous and + 4 Edit-user.php... As if every time I open the modal window from the button it accumulates the requests and sends them all over again!

Answer 1

Come on....

The question of not passing the data try to include a value already in the serialize, if the variable is "data" do the following:

dados['userId'] = id;

Now from the other item, put your full code in jsfiddle and pass the link to analyze it better...

Answer 2

I agree with @Vitorbraga and add a few more things.

The type of the button is Ubmit, which means that clicking the button will send the form to which it is linked to the page described in action. However, you are using Javascript/Jquery to do the same thing. This is:

<button type="submit" ...>

and then:

[...]

$("#botao").on("click", function() {
    //Envia o formulário novamente
});

[...]

This can only result in one thing: the form being sent to the back-end twice.

Another thing: put quotation marks (preference doubles) on your HTML5 code. And make sure it is well formatted. All right, it’s 2017 and the HTML5 specification says that quotes are optional for attributes that are not separated by space, but older browsers may have a problem with that.

Another thing is that serialize() It will NEVER pick up the value of a button. You could save effort and include a <input type="hidden" [...]> instead of adding a button with the property aria-*.

It would look better this way, in my view:

<input type="hidden" name="userId" value="<?= $resultadoQuery['id'] ?>">

Notice that I used <?= /** Valor a ser impresso **/ ?>, which means <?php echo $valorASerImpresso; ?>.