CODEWITHSUNDEEP
javascriptphpjqueryajax
codnor
codnor

Reputation: 131

Repeat data on Ajax call

I have a page that I'm building that I want to be able to change account names on the fly using Ajax. Everything works smoothly on the name change submission, however, on the second one, I get duplicated data, even though the function is relative to $(this). Here is an example of my console. It ends up overwriting the first submission somehow, and sends the second inputted name in for both the current account, and the previous account.

enter image description here

index.html

<a id="edit-name" number-data="+155512345678" phone-sid="example"></a>

$(document).on("click", "#edit-name", function(){
 var num = $(this).attr("number-data");
 var sid = $(this).attr("phone-sid");

 $(this).parent().parent().append('<div class="input-wrapper"><div class="input-field"><label for="name-change">Name</label><input id="name-change" type="text" class=""></div><a id="send-name" class="btn">send</a></div>');


    $(document).on("click", "#send-name", function(){
    var val = $(this).prev().children("#name-change").val();

     $.ajax({
      type: "POST",
      url: 'manage-account.php',
      data: {trackingNumber: num, newName: val, phoneSID: sid},
      success: function(data){
        console.log(data);
    }
  });
 });
});

manage-account.php

$trackingNumber = mysqli_real_escape_string($link, $_POST['trackingNumber']);
$newName = mysqli_real_escape_string($link, $_POST['newName']);

echo "Tracking Number: ". $trackingNumber;
echo "Phone Name: ". $newName;

Upvotes: 0

Views: 161

Answers (1)

epascarello
epascarello

Reputation: 207501

Bind two events separately, use data attributes

var cnt = 0;
$(document).on("click", ".edit-name", function() {
  var anc = $(this);
  num = anc.data("number"),
    sid = anc.data("sid"),
    html = '<div class="input-wrapper">\
    <div class="input-field">\
    <label for="name-change' + cnt + '">Name</label>\
    <input id="name-change' + cnt + '" type="text" data-number="' + num + '" data-sid="' + sid + '">\
    </div>\
    <a class="send-name btn">send</a>\
    </div>';

  anc.closest(".out").append(html);

});

$(document).on("click", ".send-name", function() {
  var inp = $(this).prev().find("input");
  console.log(inp.val(), inp.data("number"), inp.data("sid"));
});
.btn { border: 1px solid black; pointer: cursor; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="out">
  <div>
    <a class="edit-name" data-number="+155512345678" data-sid="example">xxx</a>
  </div>
  <div>
    <a class="edit-name" data-number="+3123213" data-sid="eeee">xxx</a>
  </div>
  <div>
    <a class="edit-name" data-number="+123123" data-sid="dddd">xxx</a>
  </div>
</div>

and use data attributes.

Upvotes: 1

Related Questions