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

[Harish Murikina]

Its working in demo

<?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>

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

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

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

  <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 ($$('.order_buttons .disabled_order_button').length == 0) { sayHello(); } else { alert('${gs.getMessage('Please wait - price being updated')}'); } 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>

  </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 ($$('.order_buttons .disabled_order_button').length == 0) { addToCart(); } else { alert('${gs.getMessage('Please wait - price being updated')}'); } 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 ($$('.order_buttons .disabled_order_button').length == 0) { orderEdit(); } else { alert('${gs.getMessage('Please wait - price being updated')}'); } 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 sayHello()

{

var ab = confirm("Shall we place this order");

if(ab)

{

alert('user confirmed');

orderNow();

}

else

{

alert('user cancelled');

return false;

}

alert('hellow world');

}

  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

                  var catalog_guid = gel("sysparm_catalog");

                  if (catalog_guid)

                          catalog_guid = catalog_guid.value

                  var catalog_view = gel("sysparm_catalog_view");

                  if (catalog_view)

                          catalog_view = catalog_view.value

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

  }

  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>

[Harish Murikina]

Click this link to login demo

ServiceNow

uname & pwd : admin

after login click this link

ServiceNow

[Kalaiarasan Pus]

you did a silly mistake there are 2 orderNow function in your script .. Add the confirm dialog code in the second orderNow function

[Harish Murikina · Accepted solution]

Copy paste this code and try it should work now.

<?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 ab = confirm("Shall we place this order");

              if(ab)

              {

                        alert('user confirmed');

    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

                  var catalog_guid = gel("sysparm_catalog");

                  if (catalog_guid)

                          catalog_guid = catalog_guid.value

                  var catalog_view = gel("sysparm_catalog_view");

                  if (catalog_view)

                          catalog_view = catalog_view.value

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

  }

  else

  {

  alert('user cancelled');

  return false;

  }

  }

      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>

[vimal909]

Thank you Harish . It is working now