Ways to showcase INPUT TYPE when making a Selection?

Question

Ways to showcase INPUT TYPE when making a Selection?

I've been struggling with a simple issue and despite trying multiple solutions, I can't seem to get it right. I have a form where I'm using the <select> tag with two options: coo and uh. What I want is for an additional input type field to be displayed when the user selects "uh".

Below is my code snippet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌
<script>

$('#s_designation').on('change',function(){
    if ($(this).val() === "uh") {
        $("#uh").show()
    }
    else {
        $("#uh").hide()
    }
});
</script>

<title>Untitled Document</title>
</head>

<body>

<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">

   <option value="coo">Chief Operating Officer</option>
   <option value="uh">Unit Head</option>
</select>

<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>

</body>
</html>

javascript jquery html css ajax

Answer 1

Answer №1

After testing the code provided, it seems to be working without any issues:

Link:https://jsfiddle.net/g95pyqw6/

Upon further examination, it appears that the code may be functioning correctly due to being tested on JSFiddle. To potentially resolve any issues, try uncommenting the first line of JavaScript - this should provide a solution! :-)

If you require any additional assistance, please don't hesitate to leave a comment. I am happy to help!

Answer 2

After testing the code provided, it seems to be working without any issues:

Link:https://jsfiddle.net/g95pyqw6/

Upon further examination, it appears that the code may be functioning correctly due to being tested on JSFiddle. To potentially resolve any issues, try uncommenting the first line of JavaScript - this should provide a solution! :-)

If you require any additional assistance, please don't hesitate to leave a comment. I am happy to help!

Answer 3

Answer №2

It appears that your jQuery code is running before the document fully loads. This means that the select element may not be visible to jQuery, and as a result, jQuery will not throw an error if it cannot find the specified element.

To ensure that your code runs after the document has finished loading, use $(document).ready like this:

<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
  $('#s_designation').on('change',function(){
    if( $(this).val()==="uh") {
    $("#uh").show()
    } else {
    $("#uh").hide()
    }
  });
});
</script>
-------
</head>

If you want to execute jQuery code after the page has loaded, simply place your code before the </body> tag like this:

<body>
-------
-------

<script>
$('#s_designation').on('change',function(){
if($(this).val()==="uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});

</script>

</body>

Answer 4

It appears that your jQuery code is running before the document fully loads. This means that the select element may not be visible to jQuery, and as a result, jQuery will not throw an error if it cannot find the specified element.

To ensure that your code runs after the document has finished loading, use $(document).ready like this:

<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
  $('#s_designation').on('change',function(){
    if( $(this).val()==="uh") {
    $("#uh").show()
    } else {
    $("#uh").hide()
    }
  });
});
</script>
-------
</head>

If you want to execute jQuery code after the page has loaded, simply place your code before the </body> tag like this:

<body>
-------
-------

<script>
$('#s_designation').on('change',function(){
if($(this).val()==="uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});

</script>

</body>

Answer 5

Answer №3

Below is the solution to your issue, tested on my local machine. Check out this Stack Overflow post for more information.


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌
    <script>
    $(function() {
          $('#s_designation').on('change',function(){
        if( $(this).val()=="uh"){
        $("#uh").show()
        }
        else{
        $("#uh").hide()
        }
    });});
        </script>

    <title>Untitled Document</title>
    </head>

    <body>

    <label for="db">Choose type</label>
    <select name="s_designation" id="s_designation">

       <option value="coo">Chief Operating Officer</option>
       <option value="uh">Unit Head</option>
    </select>

    <div id="uh" style="display:none;">
    <label for="specify">Specify</label>
    <input type="text" name="specify" placeholder="Specify Designation"/>
    </div>

    </body>
    </html>

Answer 6

Below is the solution to your issue, tested on my local machine. Check out this Stack Overflow post for more information.


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌
    <script>
    $(function() {
          $('#s_designation').on('change',function(){
        if( $(this).val()=="uh"){
        $("#uh").show()
        }
        else{
        $("#uh").hide()
        }
    });});
        </script>

    <title>Untitled Document</title>
    </head>

    <body>

    <label for="db">Choose type</label>
    <select name="s_designation" id="s_designation">

       <option value="coo">Chief Operating Officer</option>
       <option value="uh">Unit Head</option>
    </select>

    <div id="uh" style="display:none;">
    <label for="specify">Specify</label>
    <input type="text" name="specify" placeholder="Specify Designation"/>
    </div>

    </body>
    </html>

Answer 7

Answer №4

Your code is missing the $(function() line which should not be commented out:

You also need to include the necessary jQuery library files

Please ensure to add this to your html:

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

For reference, here is a Fiddle link: http://jsfiddle.net/0mqze5ny/

$(function () {
    $('#s_designation').on('change', function () {
        if ($(this).val() === "uh") {
            $("#uh").show()
        } else {
            $("#uh").hide()
        }
    });
})

Answer 8

Your code is missing the $(function() line which should not be commented out:

You also need to include the necessary jQuery library files

Please ensure to add this to your html:

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

For reference, here is a Fiddle link: http://jsfiddle.net/0mqze5ny/

$(function () {
    $('#s_designation').on('change', function () {
        if ($(this).val() === "uh") {
            $("#uh").show()
        } else {
            $("#uh").hide()
        }
    });
})

Ways to showcase INPUT TYPE when making a Selection?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JQuery animations not functioning as expected

The media query fails to start in the browser's mobile display

Tips for adjusting the color of a row when hovering

Changing the CSS Border of Thumbnails

Designing a calendar with a grid template

What might be causing Flex not to function properly on my personalized landing page?

Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

When is it appropriate to utilize props and CSS in customizing Material UI components?

The img-fluid class is not properly adjusting the height of the image

Looking for the optimal width ranges for media queries on laptops and cell phones?

Tips for loading a webpage directly to the center instead of the top position

Aligning image vertically

Blending a background image with CSS

Adaptable CSS triangle design

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

Efficiently adjusting the height of a sticky sidebar

The Jquery .remove() function will only take effect after the second click

Objective subject for an element within a :not operation

What is the method for adjusting the position of materialize CSS select options?

PNG file unable to display in Google Chrome