Alert Box that displays written text in html5

Issue

I have a dropdown list. When someone clicks the option "Other" in the dropdown list, a blank line appears to allow someone to write his or her own request. I want to create an alert box which displays what someone wrote in the blank line in big, bold letter. How do I do this?

Here's my code:

<form action="">
    <select name="requests" onchange ="checkIfOther();" id="dropDown1">
    <option value="blank"></option>
    <option value="good morning sir">Good Morning Sir</option>
    <option value="temperature">The current temperature is _____ centigrade.</option>
    <option value="other">Other</option>    
</select>
</form>

 </p>
 <button onclick="myFunction()" value>Submit</button>

     <div id="other" style="display:none">  
         <br><br><label>Optional Request: </label><input type="text" id="otherText"/>

         </div>

</body>
</html>

<script>
   function checkIfOther(){
         a = document.getElementById("dropDown1");        
         if(a.value == "other")           
             document.getElementById("other").setAttribute("style","display:inline");
        else
             document.getElementById("other").setAttribute("style","display:none");
         }
</script>

<script>
   function myFunction(){
       var x=document.getElementById("dropDown1");
       alert("You have chosen: " + x.options[x.selectedIndex].text);
       if(x.value == "other"){
           b=document.getElementById("other"); 
               alert("You have chosen: " + b.text); //what do I do?
               }   
           }
</script>

Solution

Try using Jquery, Here is code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

function myFunction(){
    alert('You have chosen: '+$("#otherText").val());
}

function checkIfOther()
{
    $("#otherText").val('');
    ($("#dropDown1").val() == 'other') ?  $("#other").show() :  $("#other").hide();
}

</script>

let me know is this helpful?.

Answered By - Rakesh Singh