英文:
Bootstrap HTML - Tabs as Radio Buttons Forms
问题
我有一个正在编辑的Bootstrap模板。我正在处理一个表单页面，但似乎无法获取选定的单选按钮，实际上它是一个标签列表，要将其POST到PHP。
<div class="from-step-content">
<ul class="nav nav-tabs nav-tabs-bordered" role="tablist" name="selected-item">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#item-one">
<div class="nav-tabs-icon">
<img src="images/1.png" alt="icon">
<img src="images/1-color.png" alt="icon">
</div>
<span>Item One</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#item-two">
<div class="nav-tabs-icon">
<img src="images/2.png" alt="icon">
<img src="images/2-color.png" alt="icon">
</div>
<span>Item Two</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#item-three">
<div class="nav-tabs-icon">
<img src="images/3.png" alt="icon">
<img src="images/3-color.png" alt="icon">
</div>
<span>Item Three</span>
</a>
</li>
</ul>
</div>
这是将使用POST方法提交到PHP脚本的方式，但我无法弄清楚如何获取实际选择了哪个项目。有什么想法吗？谢谢！
英文:
I have a bootstrap template that I am currently editing. I'm dealing with a form page, but I cannot seem to get the selected Radio Button, that is actually a tablist to POST to PHP
<div class="from-step-content">
<ul class="nav nav-tabs nav-tabs-bordered" role="tablist" name="selected-item">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#item-one">
<div class="nav-tabs-icon">
<img src="images/1.png" alt="icon">
<img src="images/1-color.png" alt="icon">
</div>
<span>Item One</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#item-two">
<div class="nav-tabs-icon">
<img src="images/2.png" alt="icon">
<img src="images/2-color.png" alt="icon">
</div>
<span>Item Two</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#item-three">
<div class="nav-tabs-icon">
<img src="images/3.png" alt="icon">
<img src="images/3-color.png" alt="icon">
</div>
<span>Item Three</span>
</a>
</li>
</ui>
</div>
This is to use method of POST into a PHP script, however I cannot figure out how I actually get which item has indeed been selected. Any ideas? Thanks
答案1
得分: 0
你应该使用JavaScript来处理不可见的单选框输入，因为你无法将HTML DOM发送到PHP，所以需要在表单中进行操作。
因此，为了快速帮助你：
<form action="post.php" method="post">
<div class="from-step-content">
<ul class="nav nav-tabs nav-tabs-bordered" role="tablist" name="selected-item">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#item-one">
<input type="radio" name="item" value="1" style="display:none;"/>
<div class="nav-tabs-icon">
<img src="images/1.png" alt="icon">
<img src="images/1-color.png" alt="icon">
</div>
<span>Item One</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#item-two">
<input type="radio" name="item" value="1" style="display:none;"/>
<div class="nav-tabs-icon">
<img src="images/2.png" alt="icon">
<img src="images/2-color.png" alt="icon">
</div>
<span>Item Two</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#item-three">
<input type="radio" name="item" value="1" style="display:none;"/>
<div class="nav-tabs-icon">
<img src="images/3.png" alt="icon">
<img src="images/3-color.png" alt="icon">
</div>
<span>Item Three</span>
</a>
</li>
</ul>
</div>
<button>Submit</button>
</form>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('input[type="radio"]').prop("checked", false);
$(e.target).find('input[type="radio"]').prop("checked", true);
})
});
</script>
这是你提供的HTML代码的翻译部分。
英文:
You should use javascript for invisble radio box input, cause you can't send to PHP HTML DOM, so you need to make manipulation with form.
So for quick help:
<form action="post.php" method="post">
<div class="from-step-content">
<ul class="nav nav-tabs nav-tabs-bordered" role="tablist" name="selected-item">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#item-one">
<input type="radio" name="item" value="1" style="display:none;"/>
<div class="nav-tabs-icon">
<img src="images/1.png" alt="icon">
<img src="images/1-color.png" alt="icon">
</div>
<span>Item One</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#item-two">
<input type="radio" name="item" value="1" style="display:none;"/>
<div class="nav-tabs-icon">
<img src="images/2.png" alt="icon">
<img src="images/2-color.png" alt="icon">
</div>
<span>Item Two</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#item-three">
<input type="radio" name="item" value="1" style="display:none;"/>
<div class="nav-tabs-icon">
<img src="images/3.png" alt="icon">
<img src="images/3-color.png" alt="icon">
</div>
<span>Item Three</span>
</a>
</li>
</ui>
</div>
<button>Submit</button>
</form>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('input[type="radio"]').prop("checked", false);
$(e.target).find('input[type="radio"]').prop("checked", true);
})
});
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论