0

I need a HTML form that is able to show a drop-down list based on the response selected from the set of radio buttons above it.

For example, my drop-down list ("Food Preference") has two values: "Vegetarian" and "Non-Vegetarian". I will require this drop-down list to only appear if the user selects "Attending" instead of "Not Attending". (Note: Attending & Not Attending is the radio button above the drop-down list).

This is my current codes. Currently it can only capture responses after the submit button is clicked:

<html lang="en">
<head>
</head>
<body>
 %%[ var @rsvpresponse, @foodpreference, @submit
     set @submit = requestparameter('Submit')
     set @rsvpresponse = requestparameter('rsvpresponse') 
 ]%%
<form action="%%=v(@deflandingpage)=%%" method="post">
  <br>
  <label>RSVP:</label>
  <input type="radio" name="rsvpresponse" value="Attending"> Attending
  <br>
  <input type="radio" name="rsvpresponse" value="Not Attending"> Not Attending
  <br>
  <label> Food Preference </label>
  <select name="foodpreference">
  <option value="Vegetarian">Vegetarian</option>
  <option value="Non-Vegetarian">Non-Vegetarian</option>
  </select>
  <br>
  <input id="submitted" type="hidden" name="submitted" value="submitted" />
  <input type="hidden" name="submit" value="1" />
  <input type ="submit" value="Submit">
</form>
</body>
</html>

Does anyone knows how to modify my current script so that it can hide/show the dropdown list based on the user's rsvp selection above and before the submit button is clicked?

Improve this question

1 Answer 1

Reset to default
2

AMPScript is a server-side scripting language, so it's evaluated before the page is displayed.

If you want this type of functionality, you'll need to go the client-side JavaScript with AJAX route (like with jQuery) and have a separate CloudPage that returns the options for your page to display.

That process is not specific to SFMC, except for how the secondary page retrieves the data -- that would need to be coded in AMPScript or SSJS.

Here's a simple, runnable example of how the AJAX could work:

HTML:

<button type="button" class="btn">Load Cities</button>
<h4>Meetup Cities</h4>
<p class="cities"></p>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Client-side JavaScript:

$('.btn').click(function() {

  $('.cities').text('Loading...');

  $.ajax({
    type:"GET",
    url:"https://api.meetup.com/2/cities",
    dataType: 'jsonp',
    success: function(data) {
      var $el0 = $('.cities');
      $el0.empty();
      $el0.append($("<select></select>").attr("class","cityList"));
      var $el = $('.cityList');
      $el.append($("<option></option>").attr("value", '').text('Select City'));
      $.each(data.results, function(value, key) {
        $el.append($("<option></option>").attr("value", key.city).text(key.city + ", " + key.state));
      });   
    }
  });

});

To customize this, you'd replace the https://api.meetup.com/2/cities with the URL for your CloudPage. The CloudPage should return the JSON object for the data you're wanting to display on your page dynamically.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .