javascript - 我在这个 php 脚本中哪里出了问题来根据无线电输入操作字符串
问题描述
嗨,我正在尝试创建一个小程序来
更改基于 HTML 无线电输入的字符串,认为我已经完成了它的基础知识,但不确定我是否以正确的方式进行操作,我正在尝试使用PHP 开关,但不知道我应该将开关连接到哪个部分。目前它试图获取字段集,并根据该开关中设置的单选选项进行切换。
我的PHP代码如下:
<!doctype html>
<html>
<head>
<title>String Alteration</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="preconnect" href="https://bit.ly"/>
<link rel="preconnect" href="https://port-80-ywfrg4rd7y.treehouse-app.com"/>
</head>
<body>
<form class="string_form" width="720" height="120">
<div class="span_container">
<span class="numbers_span">
Please input a String<br>
into the text field Below.
</span>
</div>
<div class="psuedo_input_outter">
<input name="InitialString" type="text"
minlength="2" maxlength="255" value="" required>
</div>
<fieldset name="StringOperator">
<label for="Option1_TransformUpperCase"
class="Numbers_label">Transform To<br>Upper Case</label>
<input type="radio" name="rad0" value="UpperCase"><br>
<label for="Option2_TransformLowerCase"
class="Numbers_label">Transform To<br>Lower Case</label>
<input type="radio" name="rad1" value="LowerCase"><br>
<label for="Option3_FirstCharUpperCase"
class="Numbers_label">First Charater<br>Upper Case</label>
<input type="radio" name="rad2" value="FirstChar"><br>
<label for="Option4_AllWordsFirstUpperCase"
class="Numbers_label">First Charater<br>All words Upper Case</label>
<input type="radio" name="rad3" value="AllFirstChar"><br>
</fieldset>
<button type="submit" id="No_Submit"
name="Submit" class="number_challenge_submit">Submit</button>
</form>
<?php
error_reporting(E_ALL);
session_start();
$_initialString;
$_outputString;
// ::>> Notes: !!>>> Why does HTML attribute checked="true" not move onto the new radio when a different one is selected?
// ::>> Notes:
if(isset($_GET['Submit'])){
if(isset($_GET['InitialString'])){
$_initialString = $_GET['InitialString'];
$ToUpperCase = false;
$ToLowerCase = false;
$FirstCharUpper = false;
$AllFirstUppper = false;
$stringOperator = isset($_GET['StringOperator']);
switch($stringOperator){
case "rad0": // Not sure these are correct check them on SO, w3school..
$ToUpperCase = true;
$newStr = strtoupper($_initialString);
echo "<span class='result'>" . $newStr . "</span>";
break;
case "rad1":
$ToLowerCase = true;
$newStr = strtolower($_initialString);
echo "<span class='result'>" . $newStr . "</span>";
break;
case "rad2":
$FirstCharUpper = true;
break;
case "rad3":
$AllFirstUpper = true;
echo ucwords($_initialString);
break;
}
// Need to create a check to see which radio button is set.
// Atleast one of the radio buttons needs to have the html attrib required
// Use javascript to move this attrib around, based on user select then add attrib
// disabled to all others
// substr_replace($_initialString);
// Need strtoupper();
// Need strtolower();
// Need ucwords();
// Need lcfirst();
// Need to bind these to the radio buttons and use
// javascript to disable any none selected radio's
} // 2nd if();
} // 1st if();
?>
<script src="/Js/numbersJs.js" charset="utf-8"></script>
</body>
</html>
JS
console.log('numbers linked ok..');
document.addEventListener("DOMContentLoaded",function(e){
let qSAll =(s)=>{
return document.querySelectorAll(s);
}
let radioBtns = qSAll('input[type=radio]');
if(radioBtns){
// ::>> console.trace(radioBtns);
for(var i=0;i<radioBtns.length;i++){
if(radioBtns[i].checked == true){
console.log(radioBtns[i].value);
}
}
}
console.log(radioBtns);
//if(radioBtns[0]){
// console.log('checked');
//}
});
CSS
.string_form{
overflow:hidden;
/* min-width:calc(748px + 2.2vw); */
/* max-height:calc(438px + 0.85vh); */
}
.span_container{
background:linear-gradient(-33deg,#cdcecc,white,gold);
border-radius:4px;
user-select:none;
}
.numbers_span{
font-size:calc(12.2px + 1.23vw + 0.234vh);
padding:1px 18px 1px 18px;
font-family:'Knights Templar', sans-serif;
border-radius:4px;
}
input[type=text]{
position:relative;
width:411px; max-width:411px;
transform:translateX(-52px);
padding:0 2px 0 2px;
border-radius:4.8px;
}
input[type=radio]{
position:relative;
margin-bottom:calc(28px + 0.08vh);
max-width:14px;max-height:14px;
transform:translateX(-174px) translateY(25.8px);
}
.Numbers_label{
clear:both;
float:left;
background:linear-gradient(-33deg,rgba(242,213,162,0.7),gold);
padding:4px 9.2px 4px 9.2px;
font-family:'Knights Templar',sans-serif;
user-select:none;
border-radius:9px;
border-bottom-right-radius:2.1px;
margin-bottom:4px;
}
.numbers_label::before{
display:block;
position:relative;
left:-42px;
width:25px; height:25px;
background:orange;
}
.result{
position:absolute;
z-index:555;
top:65%; left:50%;
transform:translate(-50%,-50%);
padding:8.2px;
background:linear-gradient(-32deg,green,gold,orange);
}
还希望javascript在选择一个单选按钮时禁用所有其他单选按钮,但似乎无法弄清楚该部分,谁能给我一些指示,所以我正朝着正确的方向前进..
我为禁用无线电输入而查看的所有答案都在使用 JQuery,当我尝试翻译那个 inot vanilla javascript 时,它最终无法正常工作..
刚刚注意到一个错误,我没有让任何标签对任何 Id 产生响应,所以现在把那部分改掉.. 但是任何人都可以给我任何 php 指针......
到目前为止,在我的 javascript 代码中,我得到了以下脚本,尝试将 HTML DOM 中的已选中添加到选定的收音机并删除任何不是当前选定项目的收音机的选中属性。
radioBtns = qSAll('input[type=radio]');
if(radioBtns){
let Btn;
// ::>> console.trace(radioBtns);
for(var i=0;i<radioBtns.length;i++){
radioBtns.forEach(function(){
this.addEventListener("click", function(e){
// Change e.target to checked.
e.target.setAttribute("checked", "true");
// checked="false" 4 all others..
let prevRad = e.target.previousElementSibling; // [contains(@class, 'rad')];
console.log(prevRad);
prevRad.removeAttribute("checked");
})
}
}
问题是<br>
如果我尝试使用 previousElementSibling 它返回标签,则 e.target.previousSibling &或 nextSibling 返回 html 元素。不是列表中向上或向下的下一个无线电输入..
是否有更简单的方法来取消选择非当前/活动/使用的收音机以及为什么这不是 devtools 控制台中的默认行为.. 选择另一个收音机时,即使在屏幕上视觉上它不是,收音机也会在标记中保持选中状态选择...
解决方案
你的语法在这里是错误的。首先,您应该将每个单选按钮的名称设置为相同,并且该值应在开关大小写中使用,例如大写,小写。
您实际上是在使用单选按钮的名称作为开关盒,这就是为什么单击单选按钮不起作用
推荐阅读
- google-sheets - 带有正则表达式的 Google 电子表格 API setDataValidation
- android - Android 依赖 'android.arch.lifecycle:runtime' 对于编译(1.0.0)和运行时(1.1.1)类路径有不同的版本
- kubernetes-ingress - EKS Ingress(用于 ALB)在部署超过 3 个 Ingress 时没有端点
- github - Helm3 - 将图表推送到 gitlab 时校验和摘要格式无效
- sql - 如何跨 3 表连接映射一个人(每个表是一年)
- python - 如何使用 numpy 配对 (x,y) 对
- node.js - 如何使用 Vue JS 在模态窗口中定位正确的 ID?
- javascript - 将对象从 rest api 推送到数组 Angular
- excel - 基于数字列标题重新排序列
- java - 使用 PHP 和 HTTP 请求从 Web 服务器获取文件名列表