Ways to display distinct text boxes based on selected radio button?

Question

Ways to display distinct text boxes based on selected radio button?

Currently, I am working with JSP and have implemented an HTML form that includes a "Process" button at the top. When this button is clicked, it displays a form with two radio buttons - TestClient and TestServer.

The form also contains a Submit button.

If you want to view my work, here is the link to my jsfiddle

Issue Description:-

My current goal is to display two text boxes and one radio button below the selected radio button (TestClient or TestServer) once it is clicked. Here is what I want it to look like:

TestClient      TestServer

Name    textbox
Id      textbox
Sex     Male    Female

Submit button

Similarly, if TestServer is clicked, I would like to show three text boxes and a dropdown menu below the respective radio button.

TestClient      TestServer

Address         textbox
ClientId        textbox
ServerId        textbox
Country         dropdownbox

Submit button

Is it achievable using jQuery in my existing jsfiddle example? If so, could someone provide me with a helpful jsfiddle demonstration?

javascript jquery html css forms

Answer 1

Answer №1

Totally feasible. I have included a simple demonstration using div elements for each radio button with customized content inside them. Feel free to personalize the inputs as needed.

Initially, conceal these divs using CSS.

<div class="user" style="display: none">
    User details go here
</div>

<div class="admin" style="display: none">
    Admin details go here
</div>

You can implement a logic similar to this in your jQuery function:

$('input[name="user"]').click(function() {
    if($(this).attr('id') == 'user') {
        $('.user').show();
        $('.admin').hide();
    } else {
        $('.user').hide();
        $('.admin').show();
    }
});

Answer 2

Totally feasible. I have included a simple demonstration using div elements for each radio button with customized content inside them. Feel free to personalize the inputs as needed.

Initially, conceal these divs using CSS.

<div class="user" style="display: none">
    User details go here
</div>

<div class="admin" style="display: none">
    Admin details go here
</div>

You can implement a logic similar to this in your jQuery function:

$('input[name="user"]').click(function() {
    if($(this).attr('id') == 'user') {
        $('.user').show();
        $('.admin').hide();
    } else {
        $('.user').hide();
        $('.admin').show();
    }
});

Answer 3

Answer №2

If you'd rather not write the HTML code directly and prefer to generate it using jQuery, here's an alternative solution:

Check out this JSFiddle link

<button id="primary">Process</button>
<form method='post'>
  <h4>Process</h4>
    <fieldset><legend>process</legend>
      <input  id="client" value="TestClient"type="radio" name="cli_srv">
      <label for="client">TestClient</label>
      <input  id="server" value="TestServer" type="radio" name="cli_srv">
      <label for="server">TestServer</label>
    </fieldset>
    <fieldset id="form_process">
    </fieldset>
</form>
    <button form="form_process">Submit</button>

Additionally,

$("#primary").click(function(){
    $("form").show()
});

var form= $('#form_process');

$("#client").click(function(){
    form.html(null);
    form.append('<label for="cli_name">First Name</label><input value="John" id="cli_name"><br>')
    form.append('<label for="cli_id">ID Number</label><input value="12345" id="cli_id"><br>')
// etc...
})

$("#server").click(function(){
    form.html(null);
    form.append('<label for="srv_address">Server Address</label><input value="123 Street" id="srv_address"><br>')
    form.append('<label for="srv_id">Server ID</label><input value="56789" id="srv_id"><br>')
// etc...
})

Answer 4

If you'd rather not write the HTML code directly and prefer to generate it using jQuery, here's an alternative solution:

Check out this JSFiddle link

<button id="primary">Process</button>
<form method='post'>
  <h4>Process</h4>
    <fieldset><legend>process</legend>
      <input  id="client" value="TestClient"type="radio" name="cli_srv">
      <label for="client">TestClient</label>
      <input  id="server" value="TestServer" type="radio" name="cli_srv">
      <label for="server">TestServer</label>
    </fieldset>
    <fieldset id="form_process">
    </fieldset>
</form>
    <button form="form_process">Submit</button>

Additionally,

$("#primary").click(function(){
    $("form").show()
});

var form= $('#form_process');

$("#client").click(function(){
    form.html(null);
    form.append('<label for="cli_name">First Name</label><input value="John" id="cli_name"><br>')
    form.append('<label for="cli_id">ID Number</label><input value="12345" id="cli_id"><br>')
// etc...
})

$("#server").click(function(){
    form.html(null);
    form.append('<label for="srv_address">Server Address</label><input value="123 Street" id="srv_address"><br>')
    form.append('<label for="srv_id">Server ID</label><input value="56789" id="srv_id"><br>')
// etc...
})

Ways to display distinct text boxes based on selected radio button?

Answer №1

Answer №2

Similar questions

Is there a way to make placeholder text automatically adjust its size to fit within the text input element and display its complete content?

Delete elements with identical values from array "a" and then delete the element at the same index in array "b" as the one removed from array "a"

Avoid running another process before the current one finishes in jQuery

Assistance needed for iterating through JSON data

Bootstrap Navigation Bar Animation causing Input Fields to be cut off

Creating an array of objects by parsing JSON using the jQuery .each() method

Steps for returning a res.send(req.body) upon sending back to a function

Error occurred while fetching image from Medium story API in Next.js

Executing memory function with JQuery replaceWith() and event handlers

What methods can be used to decrease the width of a space?

Using the https module in Node.js to transfer a file to a PHP server

Update the table in a few moments

What are the steps to recursively transform a JavaScript object?

Issue with Jquery Mobile: Radio Buttons becoming disabled following a sorting action

What are the steps to making a textfield editable with JavaScript and HTML?

Conditional return type mistakes

Discover the power of lodash's .groupBy method as you learn how to efficiently group objects within another

If the URL matches a specific path, then append a parameter

Is there a way in AngularJS to set all radio buttons to false when one is chosen as true?

What's the best way to prevent extra spacing when typing in a materialUI TextField?