This is the code. Basically it adds a sign up form to the page:
var currentTime = new Date($.now())
$(panel).addClass('panel-logged-out')
//this -> $('.am-signup').html('<div class="am-info alert-box secondary">Please sign-in to your CLO account.</div><div class="am-popup" style="top: 596px; left: 0px;"> <div class="am-popup-header"> <div class="am-popup-title"></div></div><div class="am-popup-content"><div id="ajax-link" style="display: block;"><div class="am-layout-two-coll"> <div class="am-layout-two-coll-top"></div><div class="am-coll-left"> <div class="am-coll-content"> <div class="am-form am-login-form"> <form name="login" method="post" action="/amember/login"> <fieldset> <legend> Member Login </legend> <div class="_row" id="recaptcha-_row" style="display: none;" data-recaptcha-theme="red"> <div class="element-title" style="display:none;"></div><div class="element am-element-recaptcha" id="recaptcha-element"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="login"> E-Mail Address </label> </div><div class="element"> <input type="text" id="login" name="amember_login" size="15" value="" autofocus="autofocus"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="pass"> Password </label> </div><div class="element"> <input type="password" id="pass" name="amember_pass" size="15"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="remember"> Remember my password? </label> </div><div class="element"> <input type="checkbox" name="remember_login" value="1"> </div></div><div class="_row"> <div class="element"> <input class="button" type="submit" value="Login"> </div></div></fieldset> <input type="hidden" name="login_attempt_id" value="' + currentTime + '"><input type="hidden" name="amember_redirect_url" value="/amember/signup"> </form> </div></div></div><div class="am-coll-right"> <div class="am-coll-content"> <div class="am-form am-sendpass-form"> <form name="sendpass" method="post" action="/amember/sendpass"> <fieldset> <legend> Lost password?</legend> <div class="_row"> <div class="element-title"> <label for="sendpass"> Enter your E-Mail Address </label> </div><div class="element"> <input type="text" name="login" id="sendpass" size="15"> </div></div><div class="_row"> <div class="element"> <input class="button" type="submit" value="Get Password"> </div></div></fieldset> </form> </div></div></div><div class="am-layout-two-coll-bottom"></div></div></div></div></div>')
For some reason it makes the page scroll to the form, and the problem disappears if I comment the code out. What could be the problem?
This is the live site: http://www.chineselearnonline.com/amember/signup/fullcourse
EDIT:
Here's the formatted version of the commented code:
Not sure if it has something to do with it, though.
<div class="am-info alert-box secondary">Please sign-in to your CLO account.</div>
<div class="am-popup" style="top: 596px; left: 0px;">
<div class="am-popup-header">
<div class="am-popup-title"></div>
</div>
<div class="am-popup-content">
<div id="ajax-link" style="display: block;">
<div class="am-layout-two-coll">
<div class="am-layout-two-coll-top"></div>
<div class="am-coll-left">
<div class="am-coll-content">
<div class="am-form am-login-form">
<form name="login" method="post" action="/amember/login">
<fieldset>
<legend> Member Login </legend>
<div class="_row" id="recaptcha-_row" style="display: none;" data-recaptcha-theme="red">
<div class="element-title" style="display:none;"></div>
<div class="element am-element-recaptcha" id="recaptcha-element"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="login"> E-Mail Address </label>
</div>
<div class="element">
<input type="text" id="login" name="amember_login" size="15" value="" autofocus="autofocus"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="pass"> Password </label>
</div>
<div class="element">
<input type="password" id="pass" name="amember_pass" size="15"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="remember"> Remember my password? </label>
</div>
<div class="element">
<input type="checkbox" name="remember_login" value="1"> </div>
</div>
<div class="_row">
<div class="element">
<input class="button" type="submit" value="Login"> </div>
</div>
</fieldset>
<input type="hidden" name="login_attempt_id" value="' + currentTime + '">
<input type="hidden" name="amember_redirect_url" value="/amember/signup"> </form>
</div>
</div>
</div>
<div class="am-coll-right">
<div class="am-coll-content">
<div class="am-form am-sendpass-form">
<form name="sendpass" method="post" action="/amember/sendpass">
<fieldset>
<legend> Lost password?</legend>
<div class="_row">
<div class="element-title">
<label for="sendpass"> Enter your E-Mail Address </label>
</div>
<div class="element">
<input type="text" name="login" id="sendpass" size="15"> </div>
</div>
<div class="_row">
<div class="element">
<input class="button" type="submit" value="Get Password"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="am-layout-two-coll-bottom"></div>
</div>
</div>
</div>
</div>
Autofocus?
If you put autofocus in the username input field, the browser makes autofocus inmediately
<input .... autofocus="autofocus">
Remove it and it works.
Related
I am trying to validate the form using jquery but it's not working.
I am trying to show a red line on-field if it's empty on button click.
Below is the HTML code.
<div id="myModal" class="modal">
<div class="modal-content">
<div id="custom-form">
<div class="col-md-8">
<form name="addData" method="post" id="addData" class="form"
action="#"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?= $block->escapeHtmlAttr(__('Fill in the fields to place your order.')) ?></span></legend>
<fieldset class="fieldset row">
<div class="fields col-md-6">
<div class="field name required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Full Name')) ?></span></label>
<div class="control">
<input id="bnname" title="Name" value="" class="input-text" type="text" required="true" minlength="15">
</div>
</div>
<div class="field address required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Address')) ?></span></label>
<div class="control">
<input id="bnaddress" title="Address" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field city required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('City')) ?></span></label>
<div class="control">
<input id="bntext" title="City" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field telephone required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Telephone')) ?></span></label>
<div class="control">
<input id="bntelephone" title="Telephone" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
<div class="field postalcode required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Postal code')) ?></span></label>
<div class="control">
<input id="bnpostalcode" title="Postal code" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
</div>
</fieldset>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<div class="action submit primary buy" title="Order Now"><span><?= $block->
escapeHtmlAttr(__('Order Now')) ?></span></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I am not sure how to simply validate these fields using jquery.
Here is the jquery code
var isValid;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
});
is there any way we can add validation to it ?
In this code, what happens when I change checkbox value (i.e. If I click on credit card checkbox) then <div class="creditcard"> shows, and if I click on paypal then <div class="paypal"> shows.
Now, when I choose credit card and then click on submit button, then form does not submit. And if I check paypal checkbox and click submit button then nothing happen again. I don't understand why.
How can I submit form whether I choose credit card checkbox or paypal?
$(document).ready(function() {
$('input.payment').on('change', function() {
$('input.payment').not(this).prop('checked', false);
});
$("#credit").click(function() {
if ($(this).is(":checked")) {
$(".creditcard").show();
$(".paypal").hide();
} else {
$(".creditcard").hide();
$(".paypal").show();
}
});
$("#paypal").click(function() {
if ($(this).is(":checked")) {
$(".paypal").show();
$(".creditcard").hide();
} else {
$(".paypal").hide();
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input type="checkbox" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="checkbox" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" required value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" required/>
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
You should be using radio buttons instead of checkboxes. I cleaned up your code also to use one event handler.
I also updated so the appropriate fields are dynamically set as required.
$(document).ready(function() {
$('input.payment').on('change', function() {
$("input[name='cardNumber']").prop("required",false);
$("input[name='paypal_email']").prop("required",false);
$(".creditcard").hide();
$(".paypal").hide();
if($(this).val() == "PayPal"){
$(".paypal").show();
$("input[name='paypal_email']").prop("required",true);
}
else{
$("input[name='cardNumber']").prop("required",true);
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?
I have been creating a form where there are up to 15 of the same subform:
<div class="form-group" id="PlayerForm1">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player1" value="" />
</div>
</div>
// more of the same forms but different ids etc.
To make more forms appear I am using a button:
<input type="button" name="AddPlayer" id="AddPlayer" value="Add a Player" />
The JQuery for the button:
$(function () {
$("#AddPlayer").click(function () {
for (var i = 0; i < 15; i++) {
if ($("#PlayerForm" + i).is(":hidden")) {
$("#PlayerForm" + i).show();
return;
}
}
});
});
When the button is clicked, two of these forms are shown at once, while I only want one form to be shown every click. Where am I going wrong?
EDIT: full code:
$(function () {
$("#AddPlayer").click(function () {
for (var i = 0; i < 15; i + 1) {
if ($("#PlayerForm" + i).is(":hidden")) {
$("#PlayerForm" + i).show();
return;
}
}
});
$("#RemovePlayer").click(function () {
for (var i = 15; i > 0; i - 1) {
if ($("#PlayerForm" + i).is(":visible")) {
$("#PlayerForm" + i).hide();
return;
}
}
});
});
HTML:
<div id="Players">
<div class="form-group" id="PlayerForm1">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player1" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm2" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player2" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm3" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player3" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm4" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player4" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm5" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player5" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm6" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player6" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm7" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player7" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm8" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player8" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm9" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player9" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm10" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player10" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm11" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player11" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm12" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player12" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm13" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player13" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm14" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player14" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm15" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player15" value=""/>
</div>
</div>
If you just want one item to be shown, then only select one item. You could do this by finding the first hidden form
$('.form-group').hide()
$("#AddPlayer").click(function () {
$('.form-group:hidden:first').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="PlayerForm1">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player1" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm2">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player2" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm3">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player2" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm4">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player4" value="" />
</div>
</div>
<input type="button" name="AddPlayer" id="AddPlayer" value="Add a Player" />
You can see here ive used your class .form-group as there is no need to target by id.
I'm going to have about 10 fieldsets, and I want each to show depending on the value of the Number of Buildings slider.
How do I do this?
This is what I have so far:
http://jsfiddle.net/wvVmT/1061/
HTML:
<div class="input-group">
<div class="col-half">
<h4>Number of Buildings</h4>
<input type="range" name="NoBslider" id="NoBslider" data-popup-enabled="true" value="0" min="0" max="10">
</div>
<div class="col-half">
<h4>Number of Bulk Meters</h4>
<input type="range" name="points" id="points" data-popup-enabled="true" value="0" min="0" max="100">
</div>
</div>
<fieldset data-role="collapsible" class="building">
<legend>Building 1</legend>
<label for="maila">Building Street</label>
<div class="input-group">
<div class="col-half">
<div class="input-group-icon">
<div class="col-third">
<input type="text" placeholder="Street Number" name="maila" />
</div>
<div class="input-icon"><i class="fa fa-info-circle" style="padding-top:20px"></i></div>
</div>
<div class="col-third">
<input type="text" placeholder="Street Name" name="maila" />
</div>
<div class="col-third">
<input type="text" placeholder="Street Type" name="maila" />
</div>
</div>
</div>
<div class="input-group">
<div class="col-third">
<div class="input-group input-group-icon">
<input type="text" placeholder="Number of Residential Units" name="comments" />
<div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
</div>
</div>
<div class="col-third">
<div class="input-group input-group-icon">
<input type="text" placeholder="Number of Commercial Units" name="comments" />
<div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
</div>
</div>
<div class="col-third">
<div class="input-group input-group-icon">
<input type="text" placeholder="Number of Commons" name="comments" />
<div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
</div>
</div>
</div>
</fieldset>
<fieldset data-role="collapsible" class="building">
<legend>Building 2</legend>
<label for="maila">Building Street</label>
<div class="input-group">
<div class="col-half">
<div class="input-group-icon">
<div class="col-third">
<input type="text" placeholder="Street Number" name="maila" />
</div>
<div class="input-icon"><i class="fa fa-info-circle" style="padding-top:20px"></i></div>
</div>
<div class="col-third">
<input type="text" placeholder="Street Name" name="maila" />
</div>
<div class="col-third">
<input type="text" placeholder="Street Type" name="maila" />
</div>
</div>
</div>
<div class="input-group">
<div class="col-third">
<div class="input-group input-group-icon">
<input type="text" placeholder="Number of Residential Units" name="comments" />
<div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
</div>
</div>
<div class="col-third">
<div class="input-group input-group-icon">
<input type="text" placeholder="Number of Commercial Units" name="comments" />
<div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
</div>
</div>
<div class="col-third">
<div class="input-group input-group-icon">
<input type="text" placeholder="Number of Commons" name="comments" />
<div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
</div>
</div>
</div>
</fieldset>
JQuery:
hidebuildings($("#NoBslider"));
$("#NoBslider").on("change", function () {
hidebuildings($(this));
});
function hidebuildings(slider) {
var theVal = slider.val();
if (theVal = 2){
$('.building').show();
$('.building1').show();
}
});
Wanted to just test and see if I could get the fieldsets to show if I had the slider on value 2. It's not working of course.
Simon, such a filter is not difficult to implement, but you are right to ask because there could be many subtle issues by putting all the things together.
First of all, if you need a predefined list of elements of same type, please be sure you have in your markup unique identifiers - for labels, elements, and so on, which you need - otherwise nothing won't work.
I suggest you, to put the collapsibles inside a collapsibleset, you you will end up with a nice JQM style for the whole group. Then the filter is done by adding the class .ui-screen-hidden to the unwanted collapsibleset children. After that, simply invoke $("selector").collapsibleset("refresh");
Working example:
$(document).on("pagecreate", "#page-one", function() {
$("#buildings .ui-collapsible").each(function(index) {
$(this).addClass("ui-screen-hidden");
});
$("#NoBslider").on("change", function() {
var val = $(this).val();
$("#buildings .ui-collapsible").each(function(index) {
$(this).toggleClass("ui-screen-hidden", index >= val);
});
$("#buildings").collapsibleset("refresh");
});
});
.ui-slider input {
display: none !important;
}
.ui-slider .ui-slider-track {
margin-left: 20px !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header">
<h4>Please choose...</h4>
</div>
<div data-role="main" class="ui-content">
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">
Nr. of Buildings
</div>
<input type="range" name="NoBslider" id="NoBslider" data-popup-enabled="true" value="0" min="0" max="10">
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-a">
Nr. of Bulk Meters
</div>
<input type="range" name="points" id="points" data-popup-enabled="true" value="0" min="0" max="100">
</div>
</div>
<div data-role="collapsible-set" id="buildings">
<fieldset data-role="collapsible">
<legend>Building 1</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 2</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 3</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 4</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 5</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 6</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 7</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 8</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 9</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
<fieldset data-role="collapsible">
<legend>Building 10</legend>
<fieldset><input type="text" placeholder="Street Name"></fieldset>
</fieldset>
</div>
</div>
</div>
</body>
</html>
Please, note also the onchange event handler for the slider shall be attached to the desired element when JQM raises the onpagecreate event.