Any one can help me with Dropdown selection hide show using jquery and javascript after
selecting should show field of forms
1)Dropdown 2 selection
*land owner
* vendor - After selecting land ower should show
Name/email/phone number/address/plot dimentions/location url/ message / submit button .
only show after selecting land owner.
- After selecting vendor should show Name/email/phone number/address/
(Another drop down option)
* Supplier/contractor/consultant When select supplier text box opens to type and
hide contractor and consultant .show Message/ submit button
If selected consultant or contractor Show company name / Message/ submit button
Can any one help me how to make like this in jquery and javascript
below is the html code
What I have tried:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Channel Partner </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<noscript>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
</noscript>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/tropicale-style-cp.css">
</head>
<body class="page" onload="#">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 channel_partner_reg_form">
<div class="bottom_text_title">
<h1 class="cp_reg_form_text">CHANNEL PARTNER REGISTRATION FORM</h1>
</div>
<section class="form-section-here">
<form id="add_partner_formcpf" name="form1" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6">
<input type="hidden" id="txtTokenId" >
<div class="form-group">
<label for="name-f">CHANNEL PARTNER In</label>
<select name="project_interested" id="project_interested" class="form-control">
<option value="cate">Select Category</option>
<option value="LAN">LAND OWNER</option>
<option value="VEND">VENDOR</option>
</select>
</div>
<div class="form-group">
<label for="name-f">Full Name</label>
<input type="text" name="company_name" placeholder="Full Name" id="company_name" class="form-control" autocomplete="off">
</div>
<div class="form-group">
<label for="name-f">Email ID</label>
<input type="email" name="Email" placeholder="Email" id="Email" class="form-control" autocomplete="off">
</div>
<div class="form-group">
<label for="name-f">Phone Number</label>
<input type="number" name="phonenumber" placeholder="Phone Number" id="Phone Number" class="form-control" autocomplete="off">
</div>
</div>
<div class="form-group">
<label for="name-f">Full Address</label>
<input type="text" name="Full Address" placeholder="Full Address" id="Full Address" class="form-control" autocomplete="off" required="">
</div>
<div class="form-group">
<label for="name-f">Plot Dimensions</label>
<input type="text" name="Plot Dimensions" placeholder="Plot Dimensions" id="Plot Dimensions" class="form-control" autocomplete="off" required="">
</div>
<div class="form-group">
<label for="name-f">Location URl</label>
<input type="text" name="Location URl" placeholder="Location URl" id="Location URl" class="form-control" autocomplete="off" required="">
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name-f">select category</label>
<select name="project_interested" id="project_interested" class="form-control">
<option value="">supplier/contractor/ consultants</option>
<option value="Material Supplier">Material Supplier</option>
<option value="Contractor">Contractor</option>
<option value="Consultants">Consultants</option>
</select>
</div>
<!-- if selected SUPPLIER drop box opens to type supplier item name. message and submit -->
<div class="form-group">
<label for="name-f">Material TYPE</label>
<input type="text" name="company_name" placeholder="(Material TYPE LIKE JELLY/SAND/ETC)" id="company_name" class="form-control" autocomplete="off">
</div>
<div class="form-group">
<label for="name-f">Company Name</label>
<input type="text" name="company_name" placeholder="Company Name" id="company_name" class="form-control" autocomplete="off">
</div>
<!-- if selected CONTRACTOR selected show only message and submit -->
<!-- If selected CONSULTANTS selected show only MESSAGE AND SUBMIT -->
<div class="form-group">
<label for="name-f">Message</label>
<textarea class="form-control" name="message" id="message" rows="2" class="form-control" placeholder="Type Property Details Here" ></textarea> </div>
</div>
<div class="col-md-12 form-group">
<button type="button" name="bSubmit_cp" id="bsubmit_cp" class="register-button" onClick="#">SUBMIT</button>
</div>
</div>
</form>
</section>
</div>
<div class="col-md-6 for_cp_content">
<section class="rightside-bg-image"> <H5>LAND OWNERS FOR JOINT DEVELOPMENT</H5><div class="content"> <div class="para_wrapper" style="font: 18px 'Poppins', sans-serif; color: #fff" >There are many variations of passages of Lorem Ipsum available,</p><p style="color: #fff">Any type of clear titled will be considered.</p>
<p style="color: #fff">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution</p>
<p class="for_mana_res_para_2" style="color: #fff">Areas We are considering at Present</p>
<p style="color: #fff">In Bangalore :</p>
<p style="color: #fff">We would prefer areas like. </p> </div>
<section class="rightside-bg-image"> <div class="bottom_text_title"> <h5 class="cp_content_heading" style="font:'Poppins', sans-serif; color: #fff">VENDOR REGISTRATION FORM</h5> </div> <div class="content"> <div class="para_wrapper" style="font: 18px 'Poppins', sans-serif; color: #fff"> <p class="cp_form_content_para">There are many variations of passages of Lorem Ipsum available,</p> <p class="cp_form_content_para"> There are many variations of passages of Lorem Ipsum available, well as vendors.</p>
<p class="cp_form_content_para"> fill in all the details in the form , We will get back to you. </p> </div> </div> </section> </div>
</div>
</div>
</body>
Submit an article or tip