Example 1:

(This updates the contents inside a <div>)

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script>
var recipient_name = "<?php echo $name; ?>";
var recipient_email = "<?php echo $email; ?>";
var staff_name = "<?php echo $staff_name; ?>";
   $.ajax({
     url:"https://staff.adamstarpntool.com/test/flyer_layout_updates.php",
     type: "POST",
     async: true,
     cache: false,
     data:{recipient_name:recipient_name,recipient_email:recipient_email,staff_name:staff_name},
     success: function(data) {
     //alert(data);
     document.getElementById("lockstatus").innerHTML = data;
     }
   });
</script>

     <div id="lockstatus">
     Initial Code goes here but is replaced by ajax output
     </div>

---

Example 2

(This updates the valid of the field)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button style="float:right; border:1px solid black;" onclick="return false;" id="update_product_name_woo"><img src="https://www.adamstarpntool.com/images/refresh-icon-woo.png" align="right" width="60" title="Click this to replace Sku Name with Woocommerce Name"></button>

<script>
   var update_product_name_woo = document.getElementById ("update_product_name_woo");
   if (update_product_name_woo) {
      update_product_name_woo.addEventListener ("click", function() {
         var sku = "<?php echo $edit_sku; ?>";
         var month = "<?php echo $month; ?>";
         $.ajax({
            url:"https://staff.adamstarpntool.com/test/Flyer_Builder/update_product_name_sku_to_woo.php",
            type: "POST",
            async: true,
            cache: false,
            data:{sku:sku,month:month},
            success: function(data) {
               //alert(data);
               //document.getElementById("updated_product_name").innerHTML = data; //use this to replace text inside a div
               $("#updated_product_name").attr("value", data) //use this to replace value inside a text field
            }
         });
      }, false);
   }
</script>

<input type="text" id="updated_product_name" name="new_product_name" value="<?php echo $product_name; ?>">

---

Example 3

Function executes on button click

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<button style="border:1px solid black;" onclick="buttonClick(); return false;">Fire Ajax Code with embedded Spruce API</button>

<script>

function buttonClick() {
 var recipient_name = "<?php echo $name; ?>";
 var recipient_email = "<?php echo $email; ?>";
 var staff_name = "<?php echo $staff_name; ?>";
  $.ajax({
    url:"https://www.adamstarpntool.com/Useful_Scripts/Orders/Ajax_Add_Spruce_Order/ajax_create_order.php",
    type: "POST",
    async: true,
    cache: false,
    data:{recipient_name:recipient_name,recipient_email:recipient_email,staff_name:staff_name},
    success: function(data) {
     //alert(data);
     document.getElementById("lockstatus").innerHTML = data;
    }
  });
}
</script>

<div id="lockstatus">
 <p>Initial text goes here and is replaced when Ajax fires.</p>
</div>

Example 4

Check exists Ajax Progress

   <button onclick="return false;" id="update_check">Check Progress</button>

   <script type="text/javascript">

     var update_check = document.getElementById ("update_check");
     if (update_check) {

       update_check.addEventListener ("click", function() {

         $.ajax({
           url: "https://www.adamstarpntool.com/Useful_Scripts/Products/Vendor_Map_Pricing/ajax_copy_update_check.php",
           type: "POST",
           data: {},
           success: function(data,status) {
           //alert("Request Sent: " + status + "\n\n" + data);
           document.getElementById("update_status").innerHTML = data;
         }
       });
     }, false);
    }

   </script>

   <p id="update_status">Transferring SKUs into the polished table now…click Check Progress to see if you’re ready for the next step.</p>