Add a confirmation pop-up after clicking on Submit button in Service Catalog?

[vimal909]

Hi,

I want to add a confirmation pop-up after clicking on the below Submit button in catalog item page.                          

Please let me know how can I achieve it?

Thanks,

Vimal

[Kalaiarasan Pus]

You added this in a onsubmit client script and it dint work? Can you share a screenshot?

[Victor Ruiz]

Are you creating it in a catalog client script?   I just tried both scripts and they work.

[vimal909]

Hi Kalaiarasan P, v1r4211

pop-up should be global i.e, for all catalog items, not for only one or two catalog items.

Thanks,

Vimal

[Harish Murikina]

If its for all catalog item yo uhave to modify oob ui page this is the ui page name "catalog_cart_default"

[vimal909]

Hi Harish,

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

    <g:set_if test="${sysparm_cartless}" var="jvar_cart_style" true="display:none" />

      <table style="float: right">

          <tr>

              <td id="cart" style="${jvar_cart_style}"></td>

          </tr>

      </table>

  <script>

          function alertPriceUpdate(elem) {

                if ($$(".order_buttons .disabled_order_button").length > 0) {

                        alert("${gs.getMessage('Please wait - price being updated')}");

                        return true;

                }

                return false;

          }

  </script>

  <input type="hidden" id="sysparm_id" value="${sysparm_id}"/>

  <table id="qty" style="display:none; width:100%" border="0">

              <g:sc_cart_main />

      <j:if test="${sysparm_cart_edit == null}">

              <j:if test="${sc_cat_item.no_order != true}">

                      <j:if test="${sysparm_no_checkout != true}">

                              <j:if test="${sc_cat_item.no_order_now != true}">

                                      <tr>

                                          <td colspan="2" class="order_buttons">

                                              <a class="request_catalog_button_with_icon" href="#" id="order_now" onclick="if (!alertPriceUpdate(this)) { orderNow(); } return false;" title="${gs.getMessage('Order Now')}">

                                              <table><tr><td>

                                                                                              <img src="images/button_cursor.gifx" />

                                                                                              </td><td class="text_cell">

                                              ${gs.getMessage('Order Now')}

                                                                                              </td></tr></table>

<script>

function orderNow() {

      var x;

      if (confirm("Press a button!") == true) {

              x = "You pressed OK!";

      } else {

              x = "You pressed Cancel!";

      }

      document.getElementById("order_now").innerHTML = x;

}

</script>

                                              </a>

                                          </td>

                                      </tr>

                              </j:if>                              

                      </j:if>              

                      <j:if test="${sc_cat_item.no_cart != true}">      

                      <tr>

                          <td colspan="2" class="order_buttons">

                              <a class="request_catalog_button_with_icon" id="add_to_cart_button" href="#" onclick="if (!alertPriceUpdate(this)) { addToCart(); } return false;" title="${gs.getMessage('Add to Cart')}">

                              <table><tr><td>

                              <img src="images/button_cart.gifx"/>

                                                              </td><td class="text_cell">

                              ${gs.getMessage('Add to Cart')}

                              </td></tr></table>

                              </a>

                          </td>

                      </tr>

                      </j:if>                              

              </j:if>                      

      </j:if>

      <j:if test="${sysparm_cart_edit != null}">

              <tr>

                  <td colspan="2" class="order_buttons">

                      <a class="request_catalog_button_with_icon" href="#" onclick="if (!alertPriceUpdate(this)) { orderEdit(); } return false;" title="${gs.getMessage('Update Cart')}">

                      <table><tr><td>

                      <img src="images/button_cart.gifx"/>

                                              </td><td class="text_cell">

                      ${gs.getMessage('Update Cart')}

                      </td></tr></table>

                      </a>

                  </td>

              </tr>              

      </j:if>                          

  </table>

  <script>

    var g_cart = null;

    function scCartOnRender() {      

        g_cart = new SCCart();

        <j:if test="${sc_cat_item.no_order != true}">

          g_cart.attachWindow('qty', 'cart', "${gs.getMessage('Order this Item')}");

        </j:if>

        <j:if test="${sc_cat_item.no_cart == true}">

                g_cart.setCartVisible(false);

        </j:if>

        g_cart.addCartContent();

                g_cart.editID = '${sysparm_cart_edit}';

        g_cart.getWithBackButton();

    }    

    addRenderEvent(scCartOnRender);      

      function addToCart() {

                  var m = g_form.catalogOnSubmit();

          if (!m)

              return;

                  var guid;

                  var item_guid = gel("sysparm_item_guid");

                  if (item_guid)

                          guid = item_guid.value

                  // To prevent duplicate key violations due to multiple rapid clicks

                  // clear the item_guid if not empty and continue with the addToCart

                  // else return until a new item_guid is returned from the server

                  if (guid == "")

                          return;

                  item_guid.value = "";

          // hide the attachment header and delete out attachment name spans

                  var attachmentList = gel("header_attachment_list");

                  if (attachmentList) {

                          var count = attachmentList.childNodes.length;

                          while (count > 1) {

                                  count--;

                                  var node = attachmentList.childNodes[count];

                                  rel(node);

                          }

                          var listLabel = gel("header_attachment_list_label");

                          listLabel.style.display = "none";

                          var spanNodes = $(listLabel).select("span");

                          if (spanNodes $[AMP]$[AMP] spanNodes.length   != 0)

                                  spanNodes[0].update("");

                  }

          g_cart.add(gel("sysparm_id").value, getQuantity(), guid);

      }

      function orderNow() {

          var m = g_form.catalogOnSubmit();

          if (!m)

              return;

          // Disable the Order Now button to prevent muliple item order

          // as a result of muliple clicks before navigating away

          gel("order_now").onclick = "";

                  var item_guid = gel("sysparm_item_guid");

                  if (item_guid)

                          item_guid = item_guid.value

          g_cart.order(gel("sysparm_id").value, getQuantity(), item_guid);

      }

      function calcPrice() {

          g_cart.recalcPrice(gel("sysparm_id").value, getQuantity());

      }

      function orderEdit(target) {

                  if (!target)

                          target = '${sysparm_cart_edit}';

                  var m = g_form.catalogOnSubmit();

          if (!m)

              return;

          g_cart.edit(target, getQuantity());

      }

      function proceedCheckout(target) {

          var m = g_form.catalogOnSubmit();

          if (!m)

              return;

          g_cart.orderUpdate(target, getQuantity());

      }

              function getQuantity() {

          var quantity = 1;

          var quan_widget = gel("quantity");

          if (quan_widget)

                quantity = quan_widget.value;

          return quantity;

      }

  </script>

</j:jelly>

its not working.