Form with Ajax and PHP

Navigation
1

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 on this button I will capture the contents of each column and fill out a form in the modal.

If I edit this form or not, it will be sent to a php script to update the data of a given user - all via ajax. In the ajax function, when I return 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 the notification is: Notify .

I have two problems.

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

  • I'm getting values as parameter = value & parameter2 = value2 & parameter3 = value3, but besides sending the form, I want to send a numeric value but I can not get the values in the php script ... So: 

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

    • My html-table:

    the formation of the table 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:

    In 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 that contains ajax. 

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

    My javascript-ajax: The function that contains the entire ajax bid is called when that button I mentioned 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 noticed: When I click on the button and open the modal and click Send (which is the modal submit button), I can see the request made in Network / XHR. Without closing the modal and clicking submit again, one more edit-user.php is added to the history with status 200.

    But if I close the modal, and click the button to open the modal again and click send, two requests are sent and two edit-user.php + the previous ones appears in the history! Now if I close again, and open the modal and click submit, the previous ones appear and + 4 edit-user.php ... As if every time I open the modal window from the button it accumulated the requests and sent everything again!

        
    asked by anonymous 30.08.2016 / 21:03

    2 answers

    1

    Come on ....

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

    dados['userId'] = id;

    Now from the other item, place your complete code in jsfiddle and pass the link to parse better ...

        
    30.08.2016 / 21:42
    0

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

    The type of the button is submit, 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 (preferably double) in your HTML5 code. And make sure it is well formatted. All right, it's 2017, and the HTML5 specification says 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() will NEVER get the value of a button. You could save effort and include <input type="hidden" [...]> instead of adding a button with the aria-* property.

    It would look better this way, as I see it:

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

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

        
    06.08.2017 / 05:06
    SQL Server 2012 - Generate query from one table to another involving 3 (three) tables at once How to find a "li" tag with a "dorm" text from a tag list in python3?