根据电台选择隐藏和显示字段

Posted

技术标签:

【中文标题】根据电台选择隐藏和显示字段【英文标题】:Hide and show fields based on radio choice 【发布时间】:2011-06-26 15:14:20 【问题描述】:

我有以下表格:

<fieldset id="upload-form">                     
                        <ul>
                            <li>
                                <div class="radio-list clearfix">
                                <ul>
                                    <li><label for="r1"><input type="radio" name="category" id="r1" value="34" checked="checked" /> Discussion</label></li>
                                    <li><label for="r2"><input type="radio" name="category" id="r2" value="35" /> Question</label></li>
                                    <li><label for="r3"><input type="radio" name="category" id="r3" value="36" /> Code</label></li>
                                    <li><label for="r4"><input type="radio" name="category" id="r4" value="37" /> Link</label></li>
                                </ul>
                                </div>
                            </li>
                            <li>
                                <label for="title">Title <span>required &amp; make it descriptive</span></label>
                                <input id="title" type="text" name="title" />
                            </li>
                            <li>
                                <label for="url">URL <span>don't forget the http://</span></label>
                                <input id="url" type="text" name="url" placeholder="http://" />
                            </li>
                            <li>
                                <label for="topic">Discussion topic</label>
                                <textarea id="topic" name="topic"></textarea>
                            </li>
                            <li>
                                <label for="question">Your question <span>help text</span></label>
                                <textarea id="question" name="question"></textarea>
                            </li>
                            <li>
                                <label for="description">Description <span>help text</span></label>
                                <textarea id="description" name="description"></textarea>
                            </li>
                            <li>
                                <label for="code">Code</label>
                                <textarea id="code" name="code"></textarea>
                            </li>
                            <li>
                                <label for="tags">Tags <span>separate multiple tags with commas</span></label>
                                <textarea id="tags" name="tags"></textarea>
                            </li>
                            <li>
                                <label class="public" for="public"><input id="public" type="checkbox" name="public" /> Make this post public? <span>( non-members will be able to view this post )</span></label>
                            </li>
                            <li class="clearfix">
                                <input class="submit" type="submit" name="" value="Post" />
                                <input class="cancel" type="button" value="Cancel" onclick="window.location.href='<?php bloginfo('url'); ?>/posts'" />
                            </li>
                        </ul>
                    </fieldset>

当用户选择表单顶部的一个单选按钮时会发生什么情况,它将隐藏或显示与该类别相关的某些字段。例如,对于 Link 类别,唯一使用的字段将是 Title、URL 和 Description。

我打算使用 jQuery 来隐藏和显示字段,但是服务器端代码呢?好像用户开始填写字段但随后决定更改类别我不希望他们发布错误的字段等。我将如何完成此操作?

我使用的是 WordPress,表单是使用 PHP 编码的。这是表单如何获取帖子信息并将其保存到数据库的一些示例代码。谢谢。

<?php

    /* Template Name: New Post */

    if(isset($_POST['new_post']) == '1')
    
        $post_title = $_POST['post_title'];
        $post_category = $_POST['cat'];
        $post_content = $_POST['post_content'];
        $post_timelimit = $_POST['timelimit'];

        $new_post = array(
              'ID' => '',
              'post_author' => $user->ID, 
              'post_content' => $post_content, 
              'post_title' => $post_title,
              'post_status' => 'publish',
              'tax_input' => array('timelimit' => $post_timelimit)
            );

            $post_id = wp_insert_post($new_post);
            // tags have to be added seperate? :/
            wp_set_post_tags($post_id, $_POST['post_tags']);

            // This will redirect you to the newly created post
            $post = get_post($post_id);
            wp_redirect($post->guid);
    

    get_header();

?>

【问题讨论】:

需要为表单更新 php,没有查看任何输入。 $_POST 应该与表单输入的名称匹配。 这是示例代码,我从未说过这是实际的表单代码! 【参考方案1】:

您必须使您的 PHP 以更改该表单的单选按钮的值为条件。

if (form is in state 1) 
   process state 1 form fields
 else if (form is in states 2 and 3 or 12) 
   etc...
 else 
   ...

如果表单可以处于的所有“状态”中的任何字段在表单的所有版本中都是通用的,则在条件块之外处理它们。

【讨论】:

那我如何用 PHP 检查状态呢?原始问题中显示了无线电的值(状态将是什么)。谢谢。 if ($_POST['category'] == 34) ... do category 34 stuff 。这绝对是底层 PHP 表单处理...

以上是关于根据电台选择隐藏和显示字段的主要内容,如果未能解决你的问题,请参考以下文章

根据单选按钮选择显示/隐藏输入字段

drupal:表单 API,根据输入动态隐藏或显示字段

ReactJs:根据选择值显示或隐藏输入字段

根据取货和交付按钮显示或隐藏 WooCommerce 结帐字段

根据另一个字段中的选择显示/隐藏 django 管理表单字段

RoR:加载编辑页面时根据用户选择显示/隐藏字段?