Question

我发现人们只想提交一条数据，但我找不到一条只允许输入一条的帖子。

我期待只允许搜索ID或月份或日期。我在这里尝试了一个单选按钮，但它仍然接受其他值并将它们发送到输出所有值的PHP文件。例如，如果选择月份2月，则输入ID 20，然后输出ID 20和2月份的全部。

如何只允许其中一个输入或仍然继续使用单选按钮？

这是我的HTML代码：

<form action="searchProjections.php" method="get" class="center">
        <input class="w3-radio" type="radio" name="SearchChoice" value="IDSearch" checked>
        <label class="w3-validate">Search for ID</label><br>
        <input class="w3-radio" type="radio" name="SearchChoice" value="MonthSearch">
        <label class="w3-validate">Search for Month</label><br>
        <input class="w3-radio" type="radio" name="SearchChoice" value="DateSearch">
        <label class="w3-validate">Search for Date</label><br>
        <label>ID</label>
        <input class="w3-input w3-border-0" type="text" name="IDsend" maxlength="2">
        <label>Month</label>
        <select name="monthSend" class="w3-select">
            <option value="" selected>Search Month</option>
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
            <option value="April">April</option>
            <option value="May">May</option>
            <option value="June">June</option>
            <option value="July">July</option>
            <option value="August">August</option>
            <option value="September">September</option>
            <option value="October">October</option>
            <option value="Novemebr">Novemeber</option>
            <option value="December">December</option>
        </select>
        <label>Date</label>
        <input class="w3-input w3-border-0" type="text" name="DateSend" placeholder="YYYY-MM-DD" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD" min="2017-02-01">
        <br>
        <input class="w3-button w3-hover-light-green w3-black w3-padding-large" type="submit"> 
        <input class="w3-button w3-hover-light-green w3-black w3-padding-large" type="reset">
    </form>

Answer 1

您可以截取js中的表单提交。

jQuery的：

$.fn.check_errors = function() {
    var _el = $(this);
    $(this).submit(function( event ) {
        // TEST YOUR INPUTS HERE

        if(){  // good to submit
            return;
        }

        // handle the error
        event.preventDefault();

    });
};

使用它：

$('#form_id').check_errors();

Answer 2

在这里，我提出了一个基于HTML + CSS的解决方案：

为每个搜索字段编码一个表单，使用自己的提交+重置按钮，并使用单选按钮一次只显示一个表单。

<!DOCTYPE html>
<html>
<head>
<title>Forms selector</title>
<style type="text/css">

#tabcontainer1 {
    clear: left;
    width: 40%;
    height: 7em;
    border: solid 1px;
    overflow: auto;
}

label.tabbutton {
    clear: left;
}

#tabcontainer1 .tab {
    display: none;
}
input#tabbutton1:checked ~ #tabcontainer1 #tab1,
input#tabbutton2:checked ~ #tabcontainer1 #tab2,
input#tabbutton3:checked ~ #tabcontainer1 #tab3 {
    display: block;
}
</style>
</head>

<body>
<h1>Forms selector</h1>

<input type="radio" name="tabbutton" id="tabbutton1" class="tabbutton" value="1" checked="checked"/><label for="tabbutton1" >search by id</label>
<input type="radio" name="tabbutton" id="tabbutton2" class="tabbutton" value="2"/><label for="tabbutton2" >search by month</label>
<input type="radio" name="tabbutton" id="tabbutton3" class="tabbutton" value="3"/><label for="tabbutton3" >search by date</label>

<div id="tabcontainer1">
    <div id="tab1" class="tab">
        <form>
            <h3>Search for id</h3>
            <label>ID</label>
            <input class="w3-input w3-border-0" type="text" name="IDsend" maxlength="2">
            <div>
                <input class="w3-button w3-hover-light-green w3-black w3-padding-large" type="submit">
                <input class="w3-button w3-hover-light-green w3-black w3-padding-large" type="reset">
            </div>
        </form>
    </div>
    <div id="tab2" class="tab">
        <form>
            <h3>Search for month</h3>
            <label>Month</label>
            <select name="monthSend" class="w3-select">
                <option value="" selected>Search Month</option>
                <option value="January">January</option>
                <option value="February">February</option>
                <option value="March">March</option>
                <option value="April">April</option>
                <option value="May">May</option>
                <option value="June">June</option>
                <option value="July">July</option>
                <option value="August">August</option>
                <option value="September">September</option>
                <option value="October">October</option>
                <option value="Novemebr">Novemeber</option>
                <option value="December">December</option>
            </select>
            <div>
                <input class="w3-button w3-hover-light-green w3-black w3-padding-large" type="submit">
                <input class="w3-button w3-hover-light-green w3-black w3-padding-large" type="reset">
            </div>
        </form>
    </div>
    <div id="tab3" class="tab">
        <form>
            <h3>Search for date</h3>
            <label>Date</label>
            <input class="w3-input w3-border-0" type="text" name="DateSend" placeholder="YYYY-MM-DD" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD" min="2017-02-01">
            <div>
                <input class="w3-button w3-hover-light-green w3-black w3-padding-large" type="submit">
                <input class="w3-button w3-hover-light-green w3-black w3-padding-large" type="reset">
            </div>
        </form>
    </div>
</div>
</body>
</html>

Answer 3

我不是php / html / js怪物，但是有可能（通过php？或js？）来做到这一点，这样当你选择一个选项时，只有相应的类别选择是启用，然后禁用其他输入？

例如，让我们通过点击相关的收音机btn来选择IDSearch：
- 禁用<select name="monthSend"... >...</select>
- 禁用<input name="DateSend" .../>
- 仅允许<input name="IDsend" .../>启用

如何仅根据单选按钮输入允许输入表单中的一个输入元素

3 个答案: