CODEWITHSUNDEEP
jqueryhtml
Harly Dakay
Harly Dakay

Reputation: 67

How to hide/show if the user choose the option tag then clicks the button

I have here the html code. What I want is that if the user selects wether client or agency option, then clicks the next button. The class clientS or agencyS will be displayed.

<span>I am a *
		<select class="selectpicker" name="type">
			<option></option>
			<option id="agency" name="agency" value="Agency">Agency</option>
			<option id="client" name="client" value="Client">Client</option>
		</select>

    <input class='hide clientS' type="text" name="username" placeholder="Username" required/>
    <input class='hide clientS' type="email" name="email" placeholder="Email" required/>
	<input class='hide clientS' type="text" name="fname" placeholder="Firstname" required/>

    <!--The other inputs I want to display if the option selected is the Agency!-->

    <input class='hide agencyS' type="text" name="agencyname" placeholder="Agencyname" required/>
    <input class='hide agencyS' type="email" name="email" placeholder="Email" required/>
	<input class='hide agencyS' type="text" name="addrs" placeholder="Address" required/>

    <input type="button" name="btn" class="next action-button" value="Next">

Upvotes: 0

Views: 44

Answers (3)

Hassan Sadeghi
Hassan Sadeghi

Reputation: 1326

Try this:

$(function(){
    $(".agencyS,.clientS").hide();
    $("[name='btn']").click(function(v){
        $(".agencyS,.clientS").hide();
        if(v=$(".selectpicker").val()) {
            $("."+v.toLowerCase()+"S").show();
        };
    });
});

Test it live!

Upvotes: 0

Parth Raval
Parth Raval

Reputation: 4413

var select = document.getElementsByTagName('select')[0];
var button = document.getElementsByClassName('next')[0];
$('.agencyS').hide(); //default agencyS hidden
$('.clientS').hide(); //default clientS hidden
button.addEventListener("click", function() {
    if (select.value === 'Agency') {
        // if user selects Agent
        $('.agencyS').show(); //agencyS Show
        $('.clientS').hide(); //clientS hidden
    } else if (select.value === 'Client') {
        // if user clientS Agent
        $('.clientS').show(); //clientS Show
        $('.agencyS').hide(); //agencyS hidden
    } else {
        $('.clientS').hide();
        $('.agencyS').hide();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>I am a *
<select class="selectpicker" name="type">
   <option></option>
   <option id="agency" name="agency" value="Agency">Agency</option>
   <option id="client" name="client" value="Client">Client</option>
</select>
<input type="button" name="btn" class="next action-button" value="Next">
<br />
<input class='clientS' type="text" name="username" placeholder="Username" required/>
<input class='clientS' type="email" name="email" placeholder="Email" required/>
<input class='clientS' type="text" name="fname" placeholder="Firstname" required/>
<input class='agencyS' type="text" name="agencyname" placeholder="Agencyname" required/>
<input class='agencyS' type="email" name="email" placeholder="Email" required/>
<input class='agencyS' type="text" name="addrs" placeholder="Address" required/>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

First you'll want to hide the .hide class by default. Then you'll want to add an event listener to the button which, on click, triggers a function that checks what the .value of the <select> is. Based on what the value is, you can .show() the relevant content (.agencyS or .clientS). Note that you'll probably also want to .hide() the inverse option, in case the user picks the wrong one initially.

This can be seen in the following:

const select = document.getElementsByTagName('select')[0];
const button = document.getElementsByClassName('next')[0];
button.addEventListener("click", function() {
  if (select.value === 'Agency') {
    $('.agencyS').show();
    $('.clientS').hide();
  } else if (select.value === 'Client') {
    $('.clientS').show();
    $('.agencyS').hide();
  }
});
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>I am a *
<select class="selectpicker" name="type">
  <option></option>
  <option id="agency" name="agency" value="Agency">Agency</option>
  <option id="client" name="client" value="Client">Client</option>
</select>
    
<input type="button" name="btn" class="next action-button" value="Next">

<br />

<input class='hide clientS' type="text" name="username" placeholder="Username" required/>
<input class='hide clientS' type="email" name="email" placeholder="Email" required/>
<input class='hide clientS' type="text" name="fname" placeholder="Firstname" required/>

<input class='hide agencyS' type="text" name="agencyname" placeholder="Agencyname" required/>
<input class='hide agencyS' type="email" name="email" placeholder="Email" required/>
<input class='hide agencyS' type="text" name="addrs" placeholder="Address" required/>

Upvotes: 1

Related Questions