How to keep checkbox checked in modals after page refresh using jquery? - javascript

This is my modal that includes some checkboxes with an option to select all, please let me know how to keep the boxes checked after I refresh the page only using jquery not localstorage:
<!--Modal-->
<div class="modal fade" id="invoiceOptions" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-justify">
<form class="form">
<div class="form-group">
<div class="input-group checkbox">
<label>
<input type="checkbox" name="select-all" id="checkAll"/>
Select All
</label>
<br>
<label>
<input type="checkbox" class="invoiceOption"/>
Item 1
</label>
<label>
<input type="checkbox" class="invoiceOption"/>
Item 2
</label>
<label>
<input type="checkbox" class="invoiceOption"/>
Item 3
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="saveBtn" value="" data-dismiss="modal">
save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/Modal-->
This is the jquery script for my modal:
<script>
$('#checkAll').click(function(event) {
if(this.checked) {
$('.invoiceOption').each(function() {
this.checked = true;
});
} else {
$('.invoiceOption').each(function() {
this.checked = false;
});
}
});
</script>

first of all you have to include your jquery script in jquery document load function in order to insure script runs after page completely ready.
$(document).ready(
$('#checkAll').click(function(event) {
if(this.checked) {
$('.invoiceOption').each(function() {
this.checked = true;
});
} else {
$('.invoiceOption').each(function() {
this.checked = false;
});
}
});
);
then.
after a page refresh, it sends request to server (if it hasnt been cached anything) and create dom, then run Javascript.
so everything in js would be vanished after refresh
Note : with some browser (like firefox) when refreshing using F5,
The Browser itself, save input tag values between refreshes.
dadash, to preserve checkbox state, you have to save them elsewhere, then check it when page reloads, if there is any data.
the techniques including these (not excluding):
use local system:
localDB
cookies
use url data:
preserve in url (like #Pof mentioned)
use server:
make an api in server and try to save and retrieve checked input for a given user. (you can use sessions for a given user in server)

You need something to store current state of your inputs. So if you don't want to use localStorage, you could use params in url to store input values.
You could use the window.history.replaceState() javascript function, that allows you to change the current value of the history entry (it will change your current url without reloading the page).
Then on page reload, you could use those url params to ckeck/uncheck what you need in your form.

Related

Submit form after search button is pressed using bootstrap

<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>electronics</li>
<li>movies</li>
<li class="divider"></li>
<li>All</li>
</ul>
</div>
<form method="POST" name="form" action="#">
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" id="query" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
</div>
</div>
</div>
</div>
ISSUE
Everytime I press Go button; I redirect to same page; which I want however by drop down acts funky; like it doesn't replace the 'filter' button with appropriate choosen filter inside dropdown-menu when after the form gets submitted. Here's the code for that. However before I press go button it works as expected. What could be happening?
<script>
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
</script>
JS FIDDLE: https://jsfiddle.net/0e37tvyx/
There is nothing wrong in this. Your fiddle code works fine for all UI change operations. But because your form supports POST method, all your form parameters are submitted as POST request. You have three possible options (may be more than that too) to preserve the state of last chosen filters:
Use ajax request instead of form submit with entire page refresh. In this way you will have to add content from server response in your page; that is search results.
If your content is generating dynamically. I mean to say you are using PHP / JSP / ASP / Any Other Templating Library, you can use that, to update the HTML code based upon the search request, i.e. search_param request param.
The other way is use cookies. When user changes the option in front end preserve the filter option search_param in cookies. And on ready state of document; read those saved cookies if exists or fallback to default option all if not already stored in cookies.
Check out the fiddle for cookie based implementation. Not that I have added cookies plugin of jQuery.
https://jsfiddle.net/ksbora/3w6k171f/2
Note: Cookies has size limitations too and cross site origination restrictions. So, be careful which option you choose.

How to get what radio button was clicked in Meteor

I am completely new to Meteor and I'm trying to build a simple app. I currently have a form with 4 radio options and a submit button. When users click the submit button and I want to know which radio option they selected. I have no idea how to get started though. Can anyone help me? Below is my html and javascript code, respectively:
<form class="form-horizontal well mystery-form">
<fieldset class="col-md-offset-1">
<h2>{{question}}</h2>
<br>
<div class="form-group">
<div class="col-md-10 mystery-form">
{{#each answers}}
<div class="radio">
<label>
<input type="radio" name="mysteryForm" checked=""
style="margin-bottom: 0; margin-top: 0;">
{{answer}}
</label>
</div>
{{/each}}
<br>
<button type="reset" class="btn btn-default">Back</button>
<!-- Hide this when the answer is correct -->
<button type="submit" class="btn btn-primary">Check Answer</button>
<!-- Show only if the answer is correct -->
<button class="btn btn-primary">Next</button>
</div>
</div>
</fieldset>
</form>
JS:
Template.mystery.events({
"submit .mystery-form": function(event) {
// no idea what to do here
}
});
Semantics
You'll probably want to remove the whole wrapping .radio element. It's unnecessary. Try using as few elements as possible. It performs better and makes debugging easier.
Retrieving the checked input
The event object passed to an event-map callback has a property target. In your case that is .mystery-form. So you can use a simple jQuery selector to find the checked element:
$('input[name="mysteryForm"]:checked', event.target)
This will get you the checked value with the name mysteryForm. This was quiet straight forward. The problem is retrieving the value. Doing that would get sort of messy. So I'd just pass it to the element as a data- attribute:
<input type="radio" name="mysteryForm" checked="" style="margin-bottom: 0; margin-top: 0;" data-answer="{{ answer }}" >
Now you can simply do this:
$('input[name="mysteryForm"]:checked', event.target).data('answer')
First, you may want to prevent the normal form submission and avoid a page reload. As you are building a single page application you will want to do the form submission logic by yourself. Also, reloading the page by form submission does not make any sense in such application.
Secondly, you have to actually gather the data, and then do what you want with these data.
Put it all together and you get something like this:
Template.mystery.events({
"submit .mystery-form": function(event, template) {
//1. prevent default behavior (form submission)
event.preventDefault();
//2. get your data
//either by name (HTML name attribute)
var inputValue = template.mysteryForm.value;
//or by id (HTML id attribute)
var inputValue = template.find('#myId').value;
//3. Do whatever you want (method call for example?)
Meteor.call('myMethod', inputValue, function(error, result) {
//wait for the call result...
});
}
});

Bootstrap remove modal content issue

I know that this question is a duplicate, but i can't find a matching answer for my problem. I am using boostrap 3.2.0 and I have this modal:
<div class="modal fade popup" id="popupSelect">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Select meal</h4>
</div>
<div class="modal-body-select">
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select name="selectCategory" class="form-control selectCategory"
id="selectCategory">
<option value="0">Select category</option>
<c:forEach items="${categories}" var="category">
<option value="${category.text}">${category.value}</option>
</c:forEach>
</select>
</div>
</div>
<br>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Meal</label>
<div class="col-lg-10">
<select name="selectMeal" class="form-control idMeal" id="selectMeal">
<option value="0">Select meal</option>
</select>
</div>
</div>
<input type="hidden" value="-1" id="hSelectIndex"/>
</div>
<div class="modal-footer">
Close
<input type="button" class="btn btn-warning buttons btnSaveChanges"
value="Save Changes" />
</div>
</div>
First time when the modal is loaded the content is correct. After closing the modal, every time the loaded content is the one selected first time.
I tried to remove the data content using:
function removeModalContent(){
$('#popupSelect').on('hidden', function () {
$(this).removeData();
});
}
But it is not working! What i am doing wrong?
Every time the select button is pressed the modal is loaded. And i need to clear the content every time the modal is "hidden".
When I work with modals I always prefer to clear any user interaction before poping it up. This is how I do it:
1) Subscribe to button click event in order to show the modal window:
$("#btnSearchCustomer").click(function () {
searchCustomers($(this));
});
2) The function searchCustomers shows the pop-up window.
function searchCustomers(btn) {
btn.attr("disabled", "disabled"); // disables the button to avoid loading data more than once
clearSearchForm(); // clears any user input
// checks if the modal has all the data loaded (to avoid loading on start)
if (!searchForIsLoaded) {
loadSearchForm(); // loads any necessary data from the DB using AJAX
searchForIsLoaded = true;
}
$('#mdlSearchForm').modal('show'); // shows the modal window
btn.removeAttr("disabled"); // enables the button again
}
You need to implement the function clearSearchForm for cleaning any field the user has modified.
3) Subscribe to OK button on modal window and do something with user input
4) Hide modal form
I hope it helps
I'm not entirely clear on what your problem is, but first things first, in Bootstrap 3 the event that is fired when a modal is hidden is not hidden, it is hidden.bs.modal (See Bootstrap Docs, under heading 'Events'). So this...
$('#popupSelect').on('hidden', function () {...
will not fire. Change it to...
$('#popupSelect').on('hidden.bs.modal', function () {...
I'm also not clear why that is inside a function called 'removeModalContent'. Really you want to set up the event handler on load. What you would have to do in your current case is call that function just to set up the event listener.
Like I said, not entirely sure on your particular circumstances/problem so if this doesn't help or I am missing something let me know and I'll have another look.

Hide/Show form in HTML produce unusual result

I've been trying for some time now (some time = whole day) to figure out why I have this strange problem with my form. I have a client who wants a stand-alone HTML page running locally which would display one form with couple of textbox and one button. After info is entered and user click that button, a second form should show up with new textboxes. Form can't have a redirection to another website or file. It all has to be in that (HTML) file.
I figured out this would be easiest to do with jQuery but loading whole library just to hide one form is plain stupid. So I take a look at other option and decided to use pure Javascript.
The problem is when I click "NEXT" first time the 1st form disappear but then apear a second later like some sort of request is sent. Bellow is the code I currently have. I tried making an JSFiddle but browser blocks every time I access it.
Javascript:
function hideAll() {
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
showFirstForm();
}
function showFirstForm() {
if (document.getElementById('second').style.display == 'block') {
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
}
}
function showSecondForm() {
if (document.getElementById('first').style.display == 'block')
{
document.getElementById('second').style.display = 'block';
document.getElementById('first').style.display = 'none';
}
}
HTML:
<body class="if5" onload="hideAll()"> // I'm loading hideAll() on refresh to hide second form
....
<!-- FORM 2 -->
<form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" >
<filedset>
<label for="name"> Your name </label>
<input name="name" value="MyName" /></input>
<button onClick="showFirstForm()">Next</button>
</filedset>
</form>
<!-- FORM 1 -->
<form id="second" class='tx_anmelden'>
<fieldset>
<label for="name"> Your name </label>
<input name="name" value="MyNaffffffme" /></input>
<button onClick="showSecondForm()">Next</button>
</fieldset>
</form>
....
References:
getElementByID
Besides the fact that you have your form id's switched, <button> has a default type of submit. So when your button is clicked it is posting the form to #. So correct your form ids, and then change your button code type to button:
<button type="button" onClick="showSecondForm()">Next</button>
Here are some docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Here is a working jsfiddle using the corrected code: http://jsfiddle.net/789SP/
First off, any button in a form that doesn't have a type attribute or has a type attribute of submit will by default submit the form on click.
Second, it looks like you are trying to implement some sort of wizard. If this is true you don't want each part to be it's own form because at the end you're going to want to send all of this data to the server which won't work if it's in two forms.
The entire thing needs to be in one form with sections inside that you show/hide. To navigate between the sections you'll want to use
<button type="button" onClick="showSecondForm()">Next</button>
To do wizards is always a pain in the butt. Once you start handling validation you need to figure out which step has an error in it and show that section, or if the user uses the back button they might expect the form to go back to step one. You might want to search for a third party solution that provides some of the boiler plate functionality. These might help
This should get you off to a good start though.
Edit
Don't attempt this from scratch. Use this
<!-- FORM 2 -->
<form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" >
<fieldset> **fieldset was misspelled as "filedset"**
<label for="name"> Your name </label>
<input name="name" value="MyName"></input> **your input had /> at it's end, which is unfortunately wrong**
<button onClick="showFirstForm()">Next</button>
</fieldset> **fieldset was misspelled as "filedset"**
</form>
<!-- FORM 1 -->
<form id="second" class='tx_anmelden'>
<fieldset>
<label for="name"> Your name </label>
<input name="name" value="MyNaffffffme"></input> **your input again had /> at it's end, which is unfortunately wrong**
<button onClick="showSecondForm()">Next</button>
</fieldset>
</form>

Bootstrap checkbox/radio buttons do not change <input> value

The JavaScript page for Bootstrap shows some nice use of buttons to style checkboxes and radio fields. For example, for a checkbox, I might write
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
</div>
However, the library doesn't actually change the value of the underlying <input> field -- it just changes whether the <label> field has class active. I would have expected it to change the checked attribute on the checkbox. Apparently I don't just have it misconfigured -- this is the way the examples on the Bootstrap site work.
Is this actually expected behavior? If so, it seems fairly useless, as people are going to want to use the checkbox field. If not, how do I properly configure Bootstrap checkboxes/radio buttons?
The checked attribute on the input isn't modified because that isn't what changes when a checkbox input is checked -- the checked DOM property is what changes (true or false), and Bootstrap handles this properly (you can inspect the element in Firebug and see the DOM property change when you toggle them). The checked attribute is only used to determine default value when the DOM is initially rendered.
If you ever happen to be doing any js/jQuery with checkboxes/radios, remember this! If you need to programatically check a checkbox or radio button, $('input').attr('checked', 'checked'); will not get the job done. $('input').prop('checked', true); is what you need.
This isn't special behavior for Bootstrap buttons, this is how all checkbox/radios work.
Edit: Firebug screenshot
Edit 2: Added text from the comments, as it seems to be helpful.
It looks like you are missing a call to "activate" the btn-group (documentation). Here is a demo of this working:
<form id='testForm'>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name='Option' value='1' />Option 1</label>
</div>
</form>
<button class='btn' id='actionSubmit'>Submit</button>
<script>
$('#actionSubmit').on('click', function (e) {
e.preventDefault();
alert($('#testForm').serialize());
});
$('.btn-group').button();
</script>
I am doing it like this for MVC.NET in case anyone needs it:
#{
var removeSelected = Model.Remove == true ? "active" : "";
var buttonText = Model.Remove == true ? "Add" : "Remove";
}
#Html.HiddenFor(model => model.Remove)
<div class="editor-field">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" id="RemoveButton" class="btn btn-primary #removeSelected" onclick="toggle();">#buttonText</button>
</div
</div>
function toggle() {
var value = $("#Remove").val();
if (value == "False") {
$("#Remove").val("True");
$("#RemoveButton").text("Add");
}
else {
$("#Remove").val("False");
$("#RemoveButton").text("Remove");
}
}
And finally don't forget to add the bootstrap js refence.

Categories

Resources