Display Content Based on Radio Button Selection (but only once form is submitted)

Question

First, I'm a complete novice to php...but I think it's the best method to accomplish my goal. I've researched many related topics here, but couldn't find quite what I was looking for.

This is what I'm trying to accomplish. I’d like to have unique content display directly on the page based on which radio button a user chooses in the form (see the form code below), but only after the form is submitted.

<div id="mc_embed_signup_bond_analysis">
<form action="//example.us8.list-manage.com/subscribe/post?u=12345678&amp;id=12345" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
        <div class="mc-field-group input-group">
        <strong>Why Do You Need a Bond?</strong>
            <ul>
                <li><input type="radio" value="For your license or permit." name="MMERGE2" id="mce-MMERGE2-0"><label for="mce-MMERGE2-0"> For your license or permit.</label></li>
                <li><input type="radio" value="For a specific construction job." name="MMERGE2" id="mce-MMERGE2-1"><label for="mce-MMERGE2-1"> For a specific construction job.</label></li>
                <li><input type="radio" value="A court is requiring one." name="MMERGE2" id="mce-MMERGE2-2"><label for="mce-MMERGE2-2"> A court is requiring one.</label></li>
                <li><input type="radio" value="To protect your business or clients." name="MMERGE2" id="mce-MMERGE2-3"><label for="mce-MMERGE2-3"> To protect your business or clients.</label></li>
                <li><input type="radio" value="To protect your business or clients." name="MMERGE2" id="mce-MMERGE2-4"><label for="mce-MMERGE2-4"> None of these options apply to me.</label></li>
            </ul>
        </div>
        <div class="mc-field-group">
            <label for="mce-EMAIL"><strong>Email Address:</strong>  <span class="asterisk">*</span></label>
            <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
        </div>
        <div class="mc-field-group">
            <label for="mce-FNAME"><strong>First Name:</strong>  <span class="asterisk">*</span></label>
            <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
        </div>
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
        </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;"><input type="text" name="b_123456789_123456" tabindex="-1" value=""></div>
        <div class="clear text-center"><input type="submit" value="Get Free Bond Analysis!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

I've seen a few jQuery solutions here, but they didn't seem to accomplish both displaying unique content based on the radio button selection AND only displaying it once the form is submitted. Any help or a nudge in the right direction is greatly appreciated, as I'm completely lost.

Thanks in advance!

Where on that page is the unique content going to be output to? Or is it a new page they are being taken to? — Bill Dukelow, Aug 06 '15 at 15:27
Ideally, I'd like to have it display on the same page with the form (perhaps directly below the form w/ an anchor that will pull users down to the content). — eweisbrot, Aug 06 '15 at 15:29
Are you familiar with AJAX POST requests? You could create an empty div to contain the unique text. You could then send the form via AJAX. In your PHP script you could have a switch statement that corresponds to the value of the checkbox input and returns the content based on which checkbox was selected. You could then return this to your AJAX success method and use the Javascript innerHTML property to write the returned data to the empty div. — Bill Dukelow, Aug 06 '15 at 15:39
Thanks for the response Bill. I'm not familiar with AJAX, and like a said I'm a complete novice when it comes to PHP. Do you know of any good resources to get me started with the method you described above? — eweisbrot, Aug 06 '15 at 15:41
You can find a response to a similar question regarding AJAX and PHP form posts here: http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php and on PHP switch statements http://www.w3schools.com/php/php_switch.asp — Bill Dukelow, Aug 06 '15 at 15:44
Thanks for the links Bill. Do you know if the AJAX will interfere with users being subscribed to our mailing list? The form being used is a MailChimp form. — eweisbrot, Aug 06 '15 at 15:50
You need to make a modification to the url the form is being posted to. See here: http://stackoverflow.com/questions/8425701/ajax-mailchimp-signup-form-integration - You can also handle the switch statement in the AJAX success method if you don't want PHP to handle it. You just need to get the value of the input and store it in a variable. If the return is a success then pass the variable as a param to the switch statement and get the corresponding text you want displayed. — Bill Dukelow, Aug 06 '15 at 15:53
Thanks for the obscuring tip :) Is there any way for me to handle this strictly with PHP? I think the AJAX may be a little too over my head for the time being. — eweisbrot, Aug 06 '15 at 16:01
No. The only way to make a POST (or PUT, PATCH etc.) request without a page refresh is with AJAX. When you post you are making a fresh HTTP request. To do this asynchronously you need AJAX. This what AJAX is for. — Bill Dukelow, Aug 06 '15 at 16:09

Bill Dukelow · Answer 1 · 2015-08-11T20:33:04.857

Here is a loose (and I stress loose) example of how such an Ajax/Mailchimp implementation without page refresh and with custom info box below the form based on the selected radio at time of submit.

First you will need to adjust the action url that the form is posting to in order to send the form JSON encoded:

<div id="form-wrap">
    <div id="mc_embed_signup_bond_analysis">
       <form action="//example.us8.list-manage.com/subscribe/post-json?u=12345678&amp;id=12345" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate main-form" target="_blank" novalidate>
          <div id="mc_embed_signup_scroll">
             <div class="mc-field-group input-group">
        <strong>Why Do You Need a Bond?</strong>
            <ul>
                <li><input type="radio" value="For your license or permit." name="MMERGE2" id="mce-MMERGE2-0"><label for="mce-MMERGE2-0"> For your license or permit.</label></li>
                <li><input type="radio" value="For a specific construction job." name="MMERGE2" id="mce-MMERGE2-1"><label for="mce-MMERGE2-1"> For a specific construction job.</label></li>
                <li><input type="radio" value="A court is requiring one." name="MMERGE2" id="mce-MMERGE2-2"><label for="mce-MMERGE2-2"> A court is requiring one.</label></li>
                <li><input type="radio" value="To protect your business or clients." name="MMERGE2" id="mce-MMERGE2-3"><label for="mce-MMERGE2-3"> To protect your business or clients.</label></li>
                <li><input type="radio" value="To protect your business or clients." name="MMERGE2" id="mce-MMERGE2-4"><label for="mce-MMERGE2-4"> None of these options apply to me.</label></li>
            </ul>
            </div>
            <div class="mc-field-group">
                <label for="mce-EMAIL"><strong>Email Address:</strong>  <span class="asterisk">*</span></label>
                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
            </div>
            <div class="mc-field-group">
                <label for="mce-FNAME"><strong>First Name:</strong>  <span class="asterisk">*</span></label>
                <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
            </div>
            <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
            </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;"><input type="text" name="b_123456789_123456" tabindex="-1" value=""></div>
            <div class="clear text-center"><input type="submit" value="Get Free Bond Analysis!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
            </div>
        </form>
    </div>
    <div id="info-section"></div>
</div>

You will then need to set some variable that will store the value and id of the radio button, listen for the submit and then pass those values to a switch function (to get the custom text you want based on the selection) and the AJAX post function (that will post your data).

//If you have more than one form you can set $form to the id of the target form
var $form = $('.main-form');
var $radiotext;
var $radioVal;
var $radioId;
$('form input[type="submit"]').on('click', function (e) {
    e.preventDefault();
    //set $radioVal as value of checked radio value
    $radioVal = $('input[name="MMERGE2"]:checked', '#mc-embedded-subscribe-form').val();
    //set $radioID as value of checked radio ID
    $radioID = $('input[name="MMERGE2"]:checked', '#mc-embedded-subscribe-form').attr('id');
    //pass the $radioID to the switch statement and set value of $radioText to returned result.
    $radioText = switchInfo($radioID);
    //pass the form to the register function
    register($form);
});

We then need to create those switch and Ajax functions:

//As noted above, the id is passed as param v. This is passed as the base comparison value for the switch statement. You then have the ID's of each radio as the case to compare to the switch parameter (the ID passed above)
function switchInfo(v){
switch (v) { 
    case 'mce-MMERGE2-0': 
        return 'Whatever your permit text is'
        break;
    case 'mce-MMERGE2-1': 
        return 'Whatever your construction text is'
        break;
    case 'mce-MMERGE2-2': 
        return 'Whatever your court order text is'
        break;      
    case 'mce-MMERGE2-3': 
        return 'Whatever your protect clients text is'
        break;
    case 'mce-MMERGE2-4': 
        return 'None of the options provided applied to you'
        break;
    default:
        return 'Not Specified'
}
}

//
function register($form) {
    $.ajax({
       type: $form.attr('method'),
       url: $form.attr('action'),
       data: $form.serialize(),
       cache       : false,
       dataType    : 'json',
       contentType: "application/json; charset=utf-8",
       error       : function(err) { alert("Could not connect to the registration server. Please try again later."); },
       success     : function(data) {
          if (data.result != "success") {
              alert('An Error occured and your form could not be processed');
          }else {
            //Insert a heading of the radio value and paragraph from the switch value to the #info-section
            $('#info-section').html('<h1>'+$radioVal+'<h1><p>'+$radioText+'<p>');
        }
    }
});
}

As I said, this is a completely untried and untested method. I don't recall ever sending a post to Mailchimp via ajax. This is just a base on how you would achieve what you would like to achieve. There are a ton of resources online regarding AJAX and there really isn't that steep of a learning curve. A couple of tuts and what you are trying to achieve would make sense to you.

Thanks for all of your help Bill. I used the code you provided (which I understand is untested) but some errors immediately occurred within Chrome developer tools which I believe are preventing it functioning at all. Would it help if I posted the URL to the code on our dev server? — eweisbrot, Aug 06 '15 at 18:53
You need to put the above JS after you've brought in JQuery (just before the closing body tag). Most of your JS is in divs which is not good practice. Dump all the JS between — Bill Dukelow, Aug 06 '15 at 20:05
That is to say all of your JQuery dependent JS. JQuery Syntax means nothing to the browser if it hasn't referenced the JQuery file yet. — Bill Dukelow, Aug 06 '15 at 20:16
Alright...I moved the script you provided below the reference to the JQuery file. I still see the same error. Am I misunderstanding? Thanks for your patience. — eweisbrot, Aug 06 '15 at 20:26
Apologies, I was returning with an = symbol as I had initially used the switch to declare the value of the $radioText variable. Replace the switch function you have with the edited one above. — Bill Dukelow, Aug 06 '15 at 20:33
No problem! I made the edit, but when I try to submit the form it provides a "Could not connect to the registration server. Please try again later." error. I found a related article (see below) and tried the recommendations, but they didn't fix the issue. Also, even though I set $form to the id of the target form, the form in the footer is being affected (which I don't want). Any thoughts? [link]http://stackoverflow.com/questions/8425701/ajax-mailchimp-signup-form-integration — eweisbrot, Aug 07 '15 at 14:53
You didn't put the hash before the form id to signify that the selector it's looking for is an id. You need to have it like var $form = $('#mc_embed_signup_bond_analysis'); — Bill Dukelow, Aug 07 '15 at 20:11
I believe I fixed that issue...thanks! Any idea what's causing the "Could not connect to the registration server. Please try again later." error. Like I said, I tried following the suggestions here [link]http://stackoverflow.com/questions/8425701/ajax-mailchimp-signup-form-integration but they didn't work. — eweisbrot, Aug 07 '15 at 20:14
I just looked at the form again there. You are targeting its container and not the form itself. You need to change $form = $('#mc_embed_signup_bond_analysis'); to var $form = $('#mc-embedded-subscribe-form'); this is the correct form ID that I can see when inspecting the form element. — Bill Dukelow, Aug 07 '15 at 21:02
You will also need to change the forms method='post' to method='get'. Open up chrome dev tools before submitting the form and click on network. Then submit the form. The request should appear in red here if it is failing. Click on it that and tell me the status code at the end of the general section. — Bill Dukelow, Aug 07 '15 at 21:07
Hey Bill. I made the edits you suggested, but still no luck. I don't see any errors in Chrome developer tools. Also, changing the id to what you suggested affects the list in the footer, which is not ideal. Any thoughts? This is a tough one! — eweisbrot, Aug 10 '15 at 13:05
Update: I added "&c=?" to the end of the form URL, and it seems to generate the dynamic content on the page. However, the form in the footer is also being targeted, and it doesn't seem my email is being added to our MailChimp list. Any thoughts? — eweisbrot, Aug 10 '15 at 13:38
My last issue if the form in the footer being affected by the new functionality. Do you know how I could workaround this? — eweisbrot, Aug 10 '15 at 16:03
Sure. Both forms have the same ID (bad practice) and as such are both getting targeted by the ajax script. To fix this you need to change the class on the main form from 'class="validate"' to 'class="validate main-form"' and then change the following line in the ajax script from $form = $('#mc-embedded-subscribe-form'); to $form = $('.main-form'); - This will target only the main form as only the main form has a class of .main-form. — Bill Dukelow, Aug 11 '15 at 00:42
Also, don't forget to tick the above as the right answer if it solved the issue you had. — Bill Dukelow, Aug 11 '15 at 00:46

Display Content Based on Radio Button Selection (but only once form is submitted)

1 Answers1