How do I retrieve values from the URL for radio and drop down form values in Javascript/HTML?

1
votes

I was able to retrieve the input box values, but I am not sure how to retrieve the values from the drop down and radio button values using Java Script get method.

Here is my code:

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/ Output Page

<!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>

The results.html page displays the values from the input type that are text, but doesn't return the value from the radio and the drop down menu. Please help me with this. Thanks in advance.

2
javascripthtml

2 Answers

0
votes

For Radio buttons and Drop down's parameter name in query string is sent as name of the control.

You need to define a name for Month and Year. Card Type is sent as payment in query string as you gave the name as payment.

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" 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>

Results Page

<!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>
0
votes

This are two different things, that can be retrieved very easily, as soon as you experiment a bit around.

See the following simplified examples:

console.log(masterCard.checked)

console.log(day.value)
<input type="radio" id="masterCard" checked>

<select id="day">
  <option value="2018" selected></option>
</select>

Side note: This is a standard requirement for clean scripting, use camelCase to name an id, mostly don't use uppercase in the first char for id!