我在这个 php 脚本中哪里出错了，以根据无线电输入操作字符串

Question

嗨，我正在尝试创建一个小程序
根据 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");
            })
      }
}

问题是 e.target.previousSibling & 或 nextSibling 返回 html 元素<br>如果我尝试使用 previousElementSibling 它返回标签。 不是列表中向上或向下的下一个收音机输入..

有没有更简单的方法来取消选择非当前/活动/使用的无线电？为什么这不是 devtools 控制台中的默认行为。选择了...

Answer 1

你的语法在这里是错误的。 首先，您应该将每个单选按钮的名称设置为相同，并且该值应该用于大写、小写等切换案例。

您实际上是在使用单选按钮的名称作为开关案例，这就是为什么单击收音机不起作用

我在这个 php 脚本中哪里出错了，以根据无线电输入操作字符串

问题描述

1 个解决方案

解决方案1
1 2020-11-23 16:22:10

我在这个 php 脚本中哪里出错了，以根据无线电输入操作字符串

问题描述

1 个解决方案

解决方案1 1 2020-11-23 16:22:10

解决方案1
1 2020-11-23 16:22:10