SOLVED

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

Go to solution
Highlighted

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

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! 

1 ACCEPTED SOLUTION

Accepted Solutions
Level 10 - Community Moderator

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

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

8 REPLIES 8
Highlighted

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

 

 

 

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

 

Best,
Darshil
Highlighted
Level 10 - Community Moderator

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

  • 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
Highlighted

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

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.

 

Best,
Darshil
Highlighted
Level 10 - Community Moderator

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

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

Level 10 - Community Moderator

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

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

Highlighted

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

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

 

 

Best,
Darshil
Highlighted
Level 10 - Community Moderator

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

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

Highlighted

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

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