基于单选按钮选择显示内容（但仅提交一次表单）

时间：2015-08-06 15:19:10

标签： php jquery html forms

首先，我是php的完全新手......但我认为这是实现目标的最佳方法。我在这里研究了许多相关的主题，但找不到我想要的东西。

这就是我想要完成的事情。我希望根据用户在表单中选择的单选按钮（请参阅下面的表单代码）直接在页面上显示唯一内容，但仅在提交表单后才显示。 

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

我在这里看到了一些jQuery解决方案，但是他们似乎没有完成基于单选按钮选择显示唯一内容并且只在提交表单后才显示它。非常感谢任何正确方向的帮助或推动，因为我完全迷失了。

提前致谢！

1 个答案:

答案 0 :(得分：0)

这是一个松散的（我压力松散）示例，说明如何在没有页面刷新的情况下实现这样的Ajax / Mailchimp实现以及在提交时基于所选无线电的表单下方的自定义信息框。

首先，您需要调整表单发布到的操作URL，以便发送JSON编码的表单：

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

然后，您需要设置一些变量来存储单选按钮的值和id，监听提交，然后将这些值传递给switch函数（根据选择获取所需的自定义文本）和AJAX后期功能（将发布您的数据）。

//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);
});

然后我们需要创建那些switch和Ajax函数：

//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>');
        }
    }
});
}

正如我所说，这是一种完全未经过试验和未经测试的方法。我不记得曾经通过ajax向Mailchimp发送帖子。这只是您如何实现您想要实现的目标的基础。关于AJAX的在线资源很多，实际上学习曲线并不是那么陡峭。一些关键和你想要达到的目标对你来说是有意义的。

相关问题
最新问题