Question

我能够检索输入框值，但我不确定如何使用Java Script get方法从下拉列表和单选按钮值中检索值。

这是我的代码：

INDEX PAGE

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css">
<title>Test</title>

</head>
<body>

 <form action="Results.html" method="get">

   <fieldset class = "form1">
    <legend><b>Payment</b></legend>
    <input type="radio" name="payment" value="Visa" id="Visa" checked> Visa
    <input type="radio" name="payment" value="MasterCard" id="MasterCard"> MasterCard 
    <input type="radio" name="payment" value="AmericaExpress" id="AmericaExpress"> AmericaExpress  
    <input type="radio" name="payment" value="Discover" id="Discover"> Discover  <br>


    Card #: <input type="text" name="Card" required id="Card"><br>
    Expiration:  
    <select id="Month">
    <option value="01">01</option>
    <option value="02">02</option>
    </select> 

    <select id="Day">
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    </select> 
    <br>
    CVV: <input type="text" name="cvv" id="Cvv" required> <br>
  </fieldset>
  <input type="submit" value="Submit" id="button1" name="submit"/>

</form> 
</body>
</html>

Javascript /输出页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
    <script>
var parseQueryString = function() {
    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};
    </script>
</head>
<body>
    <h2> Your Form Has Been Submitted </h2>

<P> <b>Payment Information</b> </P>
<div class = "Visa"> Visa: </div>
<div class = "MasterCard"> Master Card: </div>
<div class = "AmericanExpress"> American Express: </div>
<div class = "Discover"> Discover: </div>
<div class = "Card"> Card Number: </div>
<div class = "Month"> Expiration Month: </div>
<div class = "Day"> Expiration Day: </div>
<div class = "cvv"> CVV: </div>

<script>
   var params = parseQueryString();

   var Visa = params["Visa"];
   var MasterCard = params["MasterCard"];
   var AmericanExpress = params["AmericanExpress"];
   var Discover = params["Discover"];
   var Card = params["Card"];
   var Month = params["Month"];
   var Day = params["Day"];
   var cvv = params["cvv"];

   console.log(Visa) 
   document.querySelector('.Visa').innerText += Visa;
   console.log(MasterCard) 
   document.querySelector('.MasterCard').innerText += MasterCard;
   console.log(AmericanExpress) 
   document.querySelector('.AmericanExpress').innerText += AmericanExpress;
   console.log(Discover) 
   document.querySelector('.Discover').innerText += Discover;
   console.log(Card) 
   document.querySelector('.Card').innerText += Card;
   console.log(Month) 
   document.querySelector('.Month').innerText += Month;
   console.log(Day) 
   document.querySelector('.Day').innerText += Day;
   console.log(cvv) 
   document.querySelector('.cvv').innerText += cvv;

</script>
</body>
</html>


    Card #: <input type="text" name="Card" required id="Card"><br>
    Expiration:  
    <select id="Month">
    <option value="01">01</option>
    <option value="02">02</option>
    </select> 

    <select id="Day">
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    </select> 
    <br>
    CVV: <input type="text" name="cvv" id="Cvv" required> <br>
  </fieldset>
  <input type="submit" value="Submit" id="button1" name="submit"/>

</form> 
</body>
</html>

results.html页面显示输入类型中的文本值，但不会从收音机和下拉菜单中返回值。请帮我解决一下这个。提前谢谢。

Answer 1

对于单选按钮，查询字符串中的下拉参数名称将作为控件的名称发送。

您需要为Month和Year定义名称。当您将名称作为付款时，卡类型将作为付款在查询字符串中发送。

索引页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css">
<title>Test</title>

</head>
<body>

 <form action="Results.html" method="get">

   <fieldset class = "form1">
    <legend><b>Payment</b></legend>
    <input type="radio" name="payment" value="Visa" id="Visa" checked> Visa
    <input type="radio" name="payment" value="MasterCard" id="MasterCard"> MasterCard 
    <input type="radio" name="payment" value="AmericaExpress" id="AmericaExpress"> AmericaExpress  
    <input type="radio" name="payment" value="Discover" id="Discover"> Discover  <br>


    Card #: <input type="text" name="Card" required id="Card"><br>
    Expiration:  
    <select id="Month" name="Month">
    <option value="01">01</option>
    <option value="02">02</option>
    </select> 

    <select id="Day" name="Day">
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    </select> 
    <br>
    CVV: <input type="text" name="cvv" id="Cvv" required> <br>
  </fieldset>
  <input type="submit" value="Submit" id="button1" name="submit"/>

</form> 
</body>
</html>

结果页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
    <script>
var parseQueryString = function() {
    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};
    </script>
</head>
<body>
    <h2> Your Form Has Been Submitted </h2>

<P> <b>Payment Information</b> </P>
<div class = "paymentType"> Payment Type: </div>
<div class = "Card"> Card Number: </div>
<div class = "Month"> Expiration Month: </div>
<div class = "Day"> Expiration Day: </div>
<div class = "cvv"> CVV: </div>

<script>
   var params = parseQueryString();

   var paymentType = params["payment"];
   var Card = params["Card"];
   var Month = params["Month"];
   var Day = params["Day"];
   var cvv = params["cvv"];

   document.querySelector('.paymentType').innerText += paymentType;
   console.log(paymentType) 
   document.querySelector('.Card').innerText += Card;
   console.log(Month) 
   document.querySelector('.Month').innerText += Month;
   console.log(Day) 
   document.querySelector('.Day').innerText += Day;
   console.log(cvv) 
   document.querySelector('.cvv').innerText += cvv;

</script>
</body>
</html>


    Card #: <input type="text" name="Card" required id="Card"><br>
    Expiration:  
    <select id="Month">
    <option value="01">01</option>
    <option value="02">02</option>
    </select> 

    <select id="Day">
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    </select> 
    <br>
    CVV: <input type="text" name="cvv" id="Cvv" required> <br>
  </fieldset>
  <input type="submit" value="Submit" id="button1" name="submit"/>

</form> 
</body>
</html>

Answer 2

这是两个不同的东西，只要你试验一下就可以很容易地找到它。

请参阅以下简化示例：

console.log(masterCard.checked)

console.log(day.value)

<input type="radio" id="masterCard" checked>

<select id="day">
  <option value="2018" selected></option>
</select>

附注：这是干净脚本的标准要求，使用camelCase来命名id，大多数情况下不要在 id 的第一个字符中使用大写字母！

如何从URL中检索无线电的值，并在Javascript / HTML中下拉表单值？

2 个答案: