How to display the selections in an alert box when the button is clicked? (with Javascript)

Question

I have done a drop down menu with some options and after i have put two radio buttons with the labels "a" and "b". At the end i have a button ...

I would like to ask, how i can connect all these?

I try to take a result like Germany win or lose according what you choose.

 <select> <option value="England">England</option> <option value="Germany">Germany</option> </select> <form action="demo_form.asp"> <label for="win">win</label> <input type="radio" name="gender" id="win" value="win"><br> <label for="lose">lose</label> <input type="radio" name="gender" id="lose" value="lose"><br> </form> <button onclick="myFunction()">click</button> <p id="demo"></p> 

Answer 1

HTML -

<select class="team">
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>

<form action="demo_form.asp"> 
  <label for="win">win</label>
  <input type="radio" name="gender" id="win" value="win"><br>
  <label for="lose">lose</label>
  <input type="radio" name="gender" id="lose" value="lose"><br>
  </form>
  <button class="click">click</button>

<p id="demo"></p>

JS -

$(".click").click(function(){
    var team = $(".team").val()
    var outcome = $("#win").is(":checked") ? "wins" : "loses"
    alert(team + " " + outcome + "!")
})

Checks the value of the selected dropdown, checks to see which radio button is checked, and then pops open an alert window displaying the result

https://jsfiddle.net/t0uh81yL/1/

Answer 2

First, give you Select an ID:

<select id="country">

Then, use this function, that gathers the values and shows an Alert:

function myFunction() {
  genderIs="unselected";
  if (document.getElementById('win').checked) {
  genderIs = document.getElementById("win").value;
  }
  if (document.getElementById('lose').checked) {
  genderIs = document.getElementById("lose").value;
  }

  countryIs = document.getElementById("country").value;
  alert ("Gender: " + genderIs + "\nCountry: " + countryIs);
}

One more thing... Your Select should be inside your form. There is no reason for it to be outside.

Here is a fiddle , just because...

Answer 3

Using jQuery:

 function myFunction() { var team = $('#team').val(), result = $('input[name=gender]:checked').val(), output = result ? team + ' ' + result : 'Select team and result!'; alert(output); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="team"> <option value="England">England</option> <option value="Germany">Germany</option> </select> <form action="demo_form.asp"> <label for="win">win</label> <input type="radio" name="gender" id="win" value="win"><br> <label for="lose">lose</label> <input type="radio" name="gender" id="lose" value="lose"><br> </form> <button onclick="myFunction()">click</button> <p id="demo"></p>