I create the form with multiple form field.I have the Form Fields are Name,Mobile,Email and No Of Referrer. Based on selection option(No Of Referrer)....
Here i create the form for Refer and earn for student admission process.... when the user select no of referrer as 2 i need to show reference details fields 2 times if change again 1 means show the field one time.... After select the No of Referrer field i show the following field Name,Email,Mobile,City,Course...
$(document).ready(function() {
toggleFields();
$("#select_btn").change(function() {
toggleFields();
});
});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields() {
if ($("#select_btn").val() <= 5 && $("#select_btn").val() != 0)
$("#parentPermission").show();
else
$("#parentPermission").hide();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="parentPermission">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>Now it is the form field....But does not dynamically shows the form field based on selection... For example if i select No of Referrer option is 2 then need to show the form field 2 times... change it 3 means show 3 times,change to 1 means show only one times... How to do show and hide the form field based on the selection???
</div>
You need to use $('div').clone().html(). See the below working solution and it has some changes in html.
$(document).ready(function() {
$('#hidden-div').hide();
$("#select_btn").change(function() {
toggleFields();
});
});
function toggleFields() {
var selectVal = $("#select_btn").val();
if (selectVal <= 5) {
$hiddenHtml = $('#hidden-div').clone().html();
$("#parentPermission").html('');
for (var i = 0; i < selectVal; i++) {
$("#parentPermission").append($hiddenHtml);
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="hidden-div">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<div id="parentPermission">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form></div>
This could be realized via .clone() and editing ids / names of the cloned objects. Alternatively: Your #select_btn already has number values for it, use them in a foreach to directly modify the html() output.
$(document).ready(function() {
$('#hidden-div').hide();
$("#select_btn").change(function() {
toggleFields();
});
});
function toggleFields() {
var selectVal = $("#select_btn").val();
if (selectVal <= 5) {
$hiddenHtml = $('#hidden-div').clone().html();
$("#parentPermission").html('');
for (var i = 0; i < selectVal; i++) {
$("#parentPermission").append($hiddenHtml);
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="hidden-div">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<div id="parentPermission">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form></div>