Reputation: 302
I am trying 2 Role based registration. Ex: Role1, Role2
Once click Registration link then select any Role(role1, role2) after form field automatically change. It's possible ?
Example:
Select Role : (Role1) or (Role2) Once select role form automatically changed.
Role1 Form
Name:
Email:
Address:
Role2 Form
Company Name:
Phone Number:
Company Address:
Thanks.
Upvotes: 1
Views: 1215
Reputation: 5937
jquery for a simple answer:
before the get_header() function wp_enqueue_script('jQuery'); wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
your selector element:
<select name="drop" id="drop">
<option name="role1">role1</option>
<option name="role2">role2</option>
</select>
set your form 2 elements as display none.
Html form:
<div class="forma" style="display: none;">
question 1
question 2
</div>
<div class="formhidden" style="display: none;">
company name: <input type="text" name="company" />
</div>
Jquery (enqueue jquery with wp_enqueue('jQuery'); see codex for this. Add the to the page either in the header or footer (escape php) sometimes you need to change position for it to work..)
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#drop').change(function() {
if(jQuery('#drop').val()=="role2") {
jQuery('.formhidden').show();
jQuery('.forma').hide();
} else {
jQuery(".forma").show();
jQuery('.formhidden').hide();
}
});
});
jsfiddle here: http://jsfiddle.net/dheffernan/MHnfe/
now when you select a role, it hides one form and shows the other.
Upvotes: 1