CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
john
john

Reputation: 11669

How to show different textbox depending on which radio button is clicked?

I am working with JSP and I have a html form in which I have a button at the top which is Process button. Now if I click on that Process button, it shows me a form which has two radio button - TestClient and TestServer.

It also has Submit button in that form.

Here is my jsfiddle

Problem Statement:-

Now what I am trying to do is - As soon as I click on TestClient radio button, I would like to show two text box and one radio button along with label just below that TestClient and TestServer like this - 

TestClient      TestServer

Name    textbox
Id      textbox
Sex     Male    Female

Submit button

In the same way if I am clicking TestServer button - I would like to show three text box and one drop down menu just below the TestClient and TestServer

TestClient      TestServer

Address         textbox
ClientId        textbox
ServerId        textbox
Country         dropdownbox

Submit button

Is this possible to do using jquery in my current jsfiddle example? If yes, then any jsfiddle example will be of great help to me.

Upvotes: 0

Views: 1010

Answers (2)

leonard vertighel
leonard vertighel

Reputation: 1068

if you do not want to code the html and show/hide it, but you prefere to generate it with jquery, you can also use this solution:

http://jsfiddle.net/fauv9/1/

<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>

and

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

var form= $('#form_process');

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

$("#server").click(function(){
    form.html(null);
    form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
    form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})

Upvotes: 0

scrowler
scrowler

Reputation: 24406

Very do-able. I've just added a quick example with a div for each radio button and some text in them. You can add your own inputs etc.

Hide these divs with CSS by default.

<div class="client" style="display: none">
    Client fields here
</div>

<div class="server" style="display: none">
    Server fields here
</div>

Then you can do something like this with your jQuery handler:

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

Upvotes: 2

Related Questions