我在这个 php 脚本中哪里出错了，以根据无线电输入操作字符串
[英]Where am i Going wrong in this php script to manipulate a string based on radio input
问题描述
Hi I'm trying to create a small program to
嗨，我正在尝试创建一个小程序
change a string based on a HTML radio input, Think I've got the basics of it complete but not sure I'm doing it the correct way, I'm trying to use a PHP switch but do not know which part I am supposed to attach the switch to.根据 HTML 无线电输入更改字符串，认为我已经完成了它的基础知识，但不确定我是否以正确的方式进行操作，我正在尝试使用 PHP 开关，但不知道我应该使用哪个部分将开关连接到。 Currently its trying to grab the fieldset, and switch based on the radio options set within that switch.目前它试图获取字段集，并根据该开关中设置的无线电选项进行切换。
my PHP code is below:我的 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 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 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);
}
Also want the javascript to disable all other radio buttons when one is selected but can't seem to figure that part out, can anyone give me some pointers so I'm heading in the right direction..还希望javascript在选择一个单选按钮时禁用所有其他单选按钮，但似乎无法弄清楚那部分，谁能给我一些指示，以便我朝着正确的方向前进..
All the answers I have looked at for disableing radio inputs are using JQuery, and when I have tried to translate that inot vanilla javascript it ends up not working..我为禁用无线电输入而查看的所有答案都使用 JQuery，当我尝试翻译那个 inot vanilla javascript 时，它最终无法正常工作..
Just noticed a mistake thatt I've made none of the labels creespond to any Ids, so now changing that part out.. But can anyone give me any php pointers ...刚刚注意到一个错误，我没有对任何 Id 制作任何标签，所以现在改变那部分......但是谁能给我任何 php 指针......
in my javascript code i have got the following script so far, attempting to add checked in the HTML DOM to the selected radio & remove the checked attribute for any radio's that are not the current selected item.到目前为止，在我的 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");
})
}
}
the problem with this is that e.target.previousSibling &or nextSibling returns the html element <br> if i try to use previousElementSibling it is returning the label.问题是 e.target.previousSibling & 或 nextSibling 返回 html 元素<br>如果我尝试使用 previousElementSibling 它返回标签。 not the next radio input up or down in the list..不是列表中向上或向下的下一个收音机输入..
is there an easier way to de-select the not current/active/used radios & why is this not the default behaviour in the devtools console.. radio stays checked in the markup when selecting another radio even if visually on the screen it is not selected...有没有更简单的方法来取消选择非当前/活动/使用的无线电？为什么这不是 devtools 控制台中的默认行为。选择了...
1 个解决方案
解决方案1
1 2020-11-23 16:22:10
Your syntax is wrong here.你的语法在这里是错误的。 First of all you should set the name of each radio button same and the value should be used in switch case like UpperCase, LowerCase.首先，您应该将每个单选按钮的名称设置为相同，并且该值应该用于大写、小写等切换案例。
You are actually using the name of the radio button as switch case thats why the click on the radio doesn't work您实际上是在使用单选按钮的名称作为开关案例，这就是为什么单击收音机不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.