Put request is updating Confluence form as well as target url page

[Daniel Baron]

I have a Put request in an HTML macro form that's intended to update the content of a target Confluence page (representing a skill type) with the form submitter's name and email. However when the form is submitted the target page AND the form page content get updated with the user name and email. Why is this happening and is there a way to prevent it?

<script>
function addNameToPage() {
 var users_name = document.getElementById("users_name").value;
 var email = document.getElementById("email").value;
 inputs = document.getElementsByTagName('select');
 for (i = 0; i < inputs.length; i++) {
  input = inputs[i];
  if (input.value >= 1 && input.value <= 5) {
    var skillString = "<p> " + users_name + " (" + input.value + ") - " + email + '</p>';
    var skillName = input.name;
  if (input.value.length > 1)
   	var skillString = "<p> " + users_name + " - " + email + '</p>';
    var skillName = input.name;
  $.get('/rest/api/content?spaceKey=EXPERTISE&title=' + skillName + '&expand=space,body.storage,version,container', function (data, status) {
    var pageData = data.results[0];
    var page_id = pageData.id;
    pageData.body.storage.value = skillString + pageData.body.storage.value;
    pageData.version.number += 1;

    $.ajax({
     type: "PUT",
     url: "/rest/api/content/" + page_id,
     data: JSON.stringify(pageData),
     contentType: "application/json; charset=utf-8",
     success: function (data) {
       $("p").prepend(skillString);
       alert("Success!");
     },
     error: function (data) {
       console.log(data);
     }
    });
   });
  }
 }
}
</script>
<form onSubmit="addNameToPage()" action="/rest/api/content" method="PUT">

[Stephen Deutsch · Accepted solution]

Hi Daniel,

If you remove the line

$("p").prepend(skillString);

Then it should update the page without writing anything to the form page. 

[Daniel Baron]

That's it, thanks. But why is that .prepend be updating the form page if it's inside the ajax PUT request specifying a different target url? 

[Stephen Deutsch]

Hi Daniel,

it's not actually inside the PUT request. The PUT request reads the data in the pageData variable and submits it to the given URL. Then the success function is run after the PUT request is complete with the response being put into the data variable. The jQuery function inside the success function runs on the page where the PUT request was submitted and doesn't have anything to do anymore with the PUT request itself.