如何根據單選按鈕輸入僅允許輸入表單中的一個輸入元素

我發現人們只想提交一條數據，但是我找不到僅允許一個輸入的帖子。如何根據單選按鈕輸入僅允許輸入表單中的一個輸入元素

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

如何根據單選按鈕輸入僅允許輸入表單中的一個輸入元素

回答

相關問題