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

Forum|Forum|6 years ago
March 27, 2020
3 replies
5040 views

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!

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by SanfordWhiteman

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

Community Advisor and Adobe Champion

<%@ 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

Level 10

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

Community Advisor and Adobe Champion

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.

SanfordWhitemanAccepted solution

Level 10

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

Community Advisor and Adobe Champion

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

SanfordWhiteman

Level 10

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

G

Gunpreet_Kaur1Author

Level 3

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded