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

我发现人们只想提交一条数据，但是我找不到仅允许一个输入的帖子。如何根据单选按钮输入仅允许输入表单中的一个输入元素

我期待着只允许搜索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>

来源

2017-03-02 Paragon Jenko

重写您的问题？如果你想通过点击提交按钮发送一个字段，你需要单独的提交按钮或很多JS –

@SamirChahine我已经重写了它，对于混淆抱歉。 –

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

为每个搜索字段编写一个表单，并带有自己的submit + reset按钮，并使用单选按钮在一次显示一个表单。

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

来源

2017-03-02 07:22:38

可以拦截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(); 

    }); 
};

使用它：（？通过PHP或JS）

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

来源

2017-03-02 00:37:10 Jed

我不是一个PHP/HTML/JS的怪物，但ins't有可能做到这一点，当你选择一个选项时，只有相应的类别选择被启用，然后禁用其他输入？

例如假设您通过点击相关的无线电BTN选择IDSearch：
- 禁用<select name="monthSend"... >...</select>
- 禁用<input name="DateSend" .../>
- 只留下<input name="IDsend" .../>启用

来源

2017-03-02 00:48:09

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

回答

相关问题