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

Forum|Forum|6 years ago
March 27, 2020
3 replies
5015 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.

SanfordWhiteman

New Participant

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

G

Gunpreet_Kaur1Author

New Participant

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

SanfordWhitemanAccepted solution

New Participant

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 Manager

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

Darshil_Shah1

Community Manager

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

New Participant

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 Manager

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded