Re: Pop-up alert on form, on selecting a field value

Gunpreet_Kaur1 · ‎03-27-2020

Is there a way to render a pop-up alert to the user, when user selects a particular value from the drop-down field on the form before submitting?

Thank you!

SanfordWhiteman · ‎03-27-2020

MktoForms2.whenReady(function(form){
   
   var interestingSelectionsByField = [
     {
       name : "Country",
       values : ["US"]
     }
   ];
   var interestingSelectionsMsg = "You made an interesting selection.";
   
   /* --- NO NEED TO TOUCH BELOW THIS LINE! --- */
   
   var formEl = form.getFormElem()[0];

   MktoForms2.whenRendered(function(form){
      interestingSelectionsByField
         .map(function(fieldDesc){
           return formEl.querySelector("[name='" + fieldDesc.name + "']");           
         })
         .forEach(function(fieldEl){
            fieldEl.addEventListener("change", alertOnInterestingSelection);
         });
   });
   
   function alertOnInterestingSelection(e){
      var currentFormValues = form.getValues(),
          currentFieldName = this.name;
      
      var currentInterestingSelections = interestingSelectionsByField
        .filter(function(fieldDesc){
           return currentFieldName == fieldDesc.name ;
        })[0];
      
      var isInterestingSelection = currentInterestingSelections.values
        .some(function(value){
          return currentFormValues[currentFieldName] == value;
        });
            
      if(isInterestingSelection){
         window.alert(interestingSelectionsMsg);
      }
   }
   
});

No framework dependencies, supports multiple fields & interesting values, handles Visibility Rules.

N.B. It's not awesome to have to use DOM events here instead of Forms API events, but there's no choice.

View solution in original post

Darshil_Shah1 · ‎03-27-2020

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//app-sjxx.marketo.com/js/forms2/js/forms2.min.js"></script>

</head>
<body>
<form id="mktoForm_<formid>">
</form>
<script>
MktoForms2.loadForm("//app-aaxx.marketo.com", "XXX-XXX-XXX", <formid>, function (form){

	  $('#Country').change(function(){ //Get the ID of the Select field from console
		    if($('#Country').val()=="USA") //change the condition for showing the popup 
	//Note that USA is the stored value and not the display value in select
		        {
		          window.alert("You selected USA"); // Insert the alert message here
		        }
		    });
});
</script>
</body>
</html>

Let me know if you face any issues/want any clarification with the code.

SanfordWhiteman · ‎03-27-2020

You must constrain the selector to the current form
You're re-adding the event listener on every rendered event, this will create unwanted behavior and a memory leak
You need not include (nor even use) jQuery, that's unnecessary overhead

Darshil_Shah1 · ‎03-27-2020

Thanks alot @SanfordWhiteman Edited code so that script is constained to the current form, also removed whenRendered function. 🙂 Regarding the jquery I found it simpler (code becomes smaller :P) that way, @Gunpreet_Kaur1 let us know if you wish to remove the jquery.

SanfordWhiteman · ‎03-27-2020

Stiil not correct, the selector is global to the document.

You also must use whenRendered because there's no guarantee the field is viewable immediately on first ready.

Brevity is never to be prized over correctness...

SanfordWhiteman · ‎03-27-2020

MktoForms2.whenReady(function(form){
   
   var interestingSelectionsByField = [
     {
       name : "Country",
       values : ["US"]
     }
   ];
   var interestingSelectionsMsg = "You made an interesting selection.";
   
   /* --- NO NEED TO TOUCH BELOW THIS LINE! --- */
   
   var formEl = form.getFormElem()[0];

   MktoForms2.whenRendered(function(form){
      interestingSelectionsByField
         .map(function(fieldDesc){
           return formEl.querySelector("[name='" + fieldDesc.name + "']");           
         })
         .forEach(function(fieldEl){
            fieldEl.addEventListener("change", alertOnInterestingSelection);
         });
   });
   
   function alertOnInterestingSelection(e){
      var currentFormValues = form.getValues(),
          currentFieldName = this.name;
      
      var currentInterestingSelections = interestingSelectionsByField
        .filter(function(fieldDesc){
           return currentFieldName == fieldDesc.name ;
        })[0];
      
      var isInterestingSelection = currentInterestingSelections.values
        .some(function(value){
          return currentFormValues[currentFieldName] == value;
        });
            
      if(isInterestingSelection){
         window.alert(interestingSelectionsMsg);
      }
   }
   
});

No framework dependencies, supports multiple fields & interesting values, handles Visibility Rules.

N.B. It's not awesome to have to use DOM events here instead of Forms API events, but there's no choice.

Darshil_Shah1 · ‎03-27-2020

Sure Got it, Thanks alot @SanfordWhiteman. Lots of learning! 😉

SanfordWhiteman · ‎03-31-2020

@Gunpreet_Kaur1 please return to your thread and mark my code as the Solution, thx.

Gunpreet_Kaur1 · ‎03-31-2020

Thanks. I'll forward this to our web developer.