如何根据单选按钮输入仅允许输入表单中的一个输入元素
问题描述:
我发现人们只想提交一条数据,但是我找不到仅允许一个输入的帖子。如何根据单选按钮输入仅允许输入表单中的一个输入元素
我期待着只允许搜索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>
答
在这里我提出一个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>
答
可以拦截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();
答
我不是一个PHP/HTML/JS的怪物,但ins't有可能做到这一点,当你选择一个选项时,只有相应的类别选择被启用,然后禁用其他输入?
例如假设您通过点击相关的无线电BTN选择IDSearch:
- 禁用<select name="monthSend"... >...</select>
- 禁用<input name="DateSend" .../>
- 只留下<input name="IDsend" .../>
启用
重写您的问题?如果你想通过点击提交按钮发送一个字段,你需要单独的提交按钮或很多JS –
@SamirChahine我已经重写了它,对于混淆抱歉。 –