从提交的表单中获取数据

Question

I have a very simple HTML quiz. It asks the user few questions about what kind of car they're looking for and suggests one. But I can't get the javascript to work. It's a very simple script so I don't know what I'm mising. Any help would be appreciated.

<form id="form" action="">
<p>What size do you need?</p>
<input type="radio" name="size" value="compact">Compact<br>
<input type="radio" name="size" value="mid">Midsize<br>
<input type="radio" name="size" value="small">Small SUV<br>
<input type="radio" name="size" value="med">Medium SUV<br>
<input type="radio" name="size" value="big">Big SUV

<p>What kind of driving will you be doing?</p>
<input type="radio" name="drive" value="city">City/suburb driving<br>
<input type="radio" name="drive" value="mountain">Mountain driving

<p>Which would you rather have?</p>
<input type="radio" name="mpg" value="mpg">Good gas milage<br>
<input type="radio" name="mpg" value="performance">Performance

<p>How much do luxury features matter to you?</p>
<input type="radio" name="money" value="money">I'd rather save money and have less luxury features<br>
<input type="radio" name="money" value="luxury">I'd rather spend a little more and have luxury features.

<p><input type="submit" value="submit"></p>
</form>

Javascript:

document.getElementById("form").onsubmit=function() {
    size = document.querySelector('input[name = "size"]:checked').value;
    drive = document.querySelector('input[name = "drive"]:checked').value;
    mpg = document.querySelector('input[name = "mpg"]:checked').value;
    money = document.querySelector('input[name = "money"]:checked').value;         

    if (size == "compact" && drive == "city" && mpg == "mpg" && money == "money") 
    {
        result = "Prius";
    }   else {
        result = "something else";
    }
    document.getElementById("suggestion").innerHTML = result; 
return false; // required to not refresh the page
}; 

Answer 1

Your code have several issues.

First, you need to declare your variable using var . You need to set a default value for each radio button. Also from your example document.getElementById("suggestion") is never into the DOM.

Here a working demo

Answer 2

One issue, you will notice that

document.querySelector('input[name = "size"]:checked').value;

will return an error when you press your submit button. This error maybe caused by a user not selecting an option. If the user does not select an option then

document.querySelector('input[name = "size"]:checked') is null. therefore null.value is invalid and your console shows this.

You can test each object if it is null by using

 document.querySelector('input[name ="size"]:checked') ?

Here is a snippet

 document.getElementById("form").onsubmit = function() { size = document.querySelector('input[name ="size"]:checked') ? document.querySelector('input[name ="size"]:checked').value : ""; drive = document.querySelector('input[name ="drive"]:checked') ? document.querySelector('input[name ="drive"]:checked').value : ""; mpg = document.querySelector('input[name ="mpg"]:checked') ? document.querySelector('input[name ="mpg"]:checked').value : ""; money = document.querySelector('input[name ="money"]:checked') ? document.querySelector('input[name ="money"]:checked').value : ""; if (size == "compact" && drive == "city" && mpg == "mpg" && money == "money") { result = "Prius"; } else { result = "something else"; } document.getElementById("suggestion").innerHTML = result; return false; // required to not refresh the page }; 

 <form id="form" action=""> <p>What size do you need?</p> <input type="radio" name="size" value="compact">Compact<br> <input type="radio" name="size" value="mid">Midsize<br> <input type="radio" name="size" value="small">Small SUV<br> <input type="radio" name="size" value="med">Medium SUV<br> <input type="radio" name="size" value="big">Big SUV <p>What kind of driving will you be doing?</p> <input type="radio" name="drive" value="city">City/suburb driving<br> <input type="radio" name="drive" value="mountain">Mountain driving <p>Which would you rather have?</p> <input type="radio" name="mpg" value="mpg">Good gas milage<br> <input type="radio" name="mpg" value="performance">Performance <p>How much do luxury features matter to you?</p> <input type="radio" name="money" value="money">I'd rather save money and have less luxury features<br> <input type="radio" name="money" value="luxury">I'd rather spend a little more and have luxury features. <p><input type="submit" value="submit"></p> <p id="suggestion">What kind of driving will you be doing?</p> </form>