retrive values of two dropdown boxes without submitting the form

Question

I have two dropdown boxes in a single form. How can I alert the values of both the dropdown boxes with onchange function on the second dropdown box without submitting the form.

<select name="abc1" id="abc1">
 <option value="a">A</option>
 <option value="B">B</option>
 <option value="c">C</option>
</select>

<select name="abc2" id="abc2" onchange="getvalue()">
 <option value="a">d</option>
 <option value="e">E</option>
 <option value="f">F</option>
</select>

Answer 1

Try

function getValue() {
   alert(document.getElementById('abc1').value);
   alert(document.getElementById('abc2').value);
}

Answer 2

You have to bypass the form submission by using jquery as shown below:

$('#yourFormId').submit(function(event){
    event.preventDefault();

    alert($('#abc1').val());

    alert($('#abc2').val());
});

Answer 3

1- you should try to learn Javascript or Jquery to accomplish these sort of tasks.

2- you should search before asking new questions

these questions have the answers anyway :

Get selected value in dropdown list using JavaScript?

Get drop down value

Answer 4

Let's write under your html this script

<script>
document.getElementById('abc2').onchange = function () {
  alert( 'First value: ' + document.getElementById('abc1').value + '\n' +
         'Second value: ' + this.value ); 
} 
</script>