Develop Reference

Maintain Form Value After Submission

I have an html (no php) form on a cloud-based server. I have no access to the server files. I am struggling to do two things:
1) Show/hide div based on dropdown value (I do have this working on my site, but for some reason it's not working in my jsfiddle)
2) Maintain the dropdown value after the form is saved.
//Use to hide Analysis div when analysisPub question is answered no
$('.analysisPub').on('change', function () {
if(this.value === "Yes"){
$("#analysis").show();
} else {
$("#analysis").hide();
}
});
/*Hide Analysis div by default*/
.analysis {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Does this publication include in any form?</td>
</tr>
<tr>
<td class="analysisPub" id="analysisPub" name="analysisPub">
<select class="analysisPub" id="analysisPub" name="analysisPub">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</tr>
</table>
<!-- ANALYSIS DIV -->
<div id="analysis" class="analysis">
<h1>
Analysis Details
</h1>
<table>
<tr>
<td><label>Project Name</label>
</td>
<td class="text-area">
</td>
</tr>
<tr>
<td><label>Manager Name</label>
</td>
<td class="text-area">
</td>
</tr>
</table>
</div>
I want the div to remain hidden if the user has chosen 'No' from the dropdown, and the div should remain visible if the user has chosen 'Yes'. Currently, it doesn't matter what the user chooses, whenever the form is saved and re-opened, the div defaults back to hidden (because of the CSS).
I am very new to javascript and this project has been dropped in my lap last minute (sigh).

You have 2 elements with the ID "analysisPub" in your markup, if you remove the ID from the td element and change
$('.analysisPub').on('change', function () {
to
$('#analysisPub').on('change', function () {
So that you are using the ID, your code works just fine.
To remember the choice you can use the localStorage API.
//Use to hide Analysis div when analysisPub question is answered no
$('#analysisPub').on('change', function() {
window.localStorage.setItem("showAnalysis", this.value);
if (this.value === "Yes") {
$("#analysis").show();
} else {
$("#analysis").hide();
}
});
// check if value is already remembered and set it to the saved value:
if (window.localStorage.getItem("showAnalysis")) {
$('#analysisPub').val(window.localStorage.getItem("showAnalysis"));
}
/*Hide Analysis div by default*/
.analysis {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Does this publication include in any form?</td>
</tr>
<tr>
<td class="analysisPub" name="analysisPub">
<select class="analysisPub" id="analysisPub" name="analysisPub">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</tr>
</table>
<!-- ANALYSIS DIV -->
<div id="analysis" class="analysis">
<h1>
Analysis Details
</h1>
<table>
<tr>
<td><label>Project Name</label>
</td>
<td class="text-area">
</td>
</tr>
<tr>
<td><label>Manager Name</label>
</td>
<td class="text-area">
</td>
</tr>
</table>
</div>

make an input text into read only when one value is selected from drop down list using jquery

i have one select box there in that options are,
none
current
future
if you select 'NONE' the all text box should be editable.
if you select 'current' the class="current" those text box should be editable and remaining should be only readonly.
similarly same like to future also. When i select future the future text boxes should be editable and remaining should be readonly
$('#cognizant').change(function(){
if(this.value == ""){
$('.current').prop('readonly',true);
} else{
$('.current').prop('readonly',false);
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="1">current</option>
<option value="2">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current"/>
<input type="text" id="cognizantbi" class="current"/>
<input type="text" id="futurevsm" class="future" />
<input type="text" id="futuresymbols" class="future" />
</td>
</tr>
</tbody>
</table>

Let's change your javascript code only.
We need to use jQuery's change() function (documentation) and then validate the selected option.
The final code:
$('#cognizant').change(function(){
var value = $(this).val();
if(value == ''){
// NONE
$('#curator input[type="text"]').removeAttr('readonly');
}
else if(value == '1'){
// CURRENT
$('#curator input[type="text"]').attr('readonly', true);
$('#curator .current').removeAttr('readonly');
}
else if(value == '2'){
// FUTURE
$('#curator input[type="text"]').attr('readonly', true);
$('#curator .future').removeAttr('readonly');
}
});
See it in action: https://jsfiddle.net/x5fdLqff/4/

$('#cognizant').change(function(){
switch(this.value) {
case "":
$('.current').prop('readonly',false);
$('.future').prop('readonly',false);
break;
case "1":
$('.current').prop('readonly',false);
$('.future').prop('readonly',true);
break;
case "2":
$('.current').prop('readonly',true);
$('.future').prop('readonly',false);
break;
}
}).change();

<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="current">current</option>
<option value="future">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current myinputs"/>
<input type="text" id="cognizantbi" class="current myinputs"/>
<input type="text" id="futurevsm" class="future myinputs" />
<input type="text" id="futuresymbols" class="future myinputs" />
</td>
</tr>
</tbody>
</table>
<script>
$('#cognizant').change(function(){
var type = $("#cognizant").val();
$( ".myinputs" ).each(function( index ) {
$( this ).prop('readonly', false);
});
if(type != ""){
$("."+type).each(function( index ) {
$( this ).prop('readonly', true);
});
}
});
</script>
I have change option value in select box and made little change in javascript code.
hope it works for you.

As an alternative approach, with a small change in the html. You add a class name of 'none' to all the input fields, which is the same as option 1.
<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="1">current</option>
<option value="2">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current none"/>
<input type="text" id="cognizantbi" class="current none"/>
<input type="text" id="futurevsm" class="future none" />
<input type="text" id="futuresymbols" class="future none" />
</td>
</tr>
</tbody>
</table>
Then the jQuery to be like this. Comments explain approach.
$(function(){
$('#cognizant').on("change", function() {
//Set all text boxes to readonly
$("input[type='text']").prop("readonly", true);
//Select the option text, based on its value.
var text = $("#cognizant option[value='"+$(this).val()+"']").text();
//Set the property readonly to false on the selected class.
$("."+text).prop('readonly', false);
}).trigger("change");
});

How to toggle text when a specific value in drop-down AND checkbox is checked

So right now, I have:
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</br>
<div id=outprint style="display:none">
<tr>
<td class="label">Out of Print?</td>
<td><input type="checkbox" name="outOfPrint" id="chk"/></td>
</tr>
</div>
<div id="showthis" style="display:none">
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td><input type="checkbox" name="removeAndNotify"/></td>
</tr>
</div>
and my script as:
$('#status').change(function () {
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
Basically I am looking for the hidden texts to pop up
When the drop-down menu is changed AND when it's set to Disabled
and you check the checkbox, the last checkbox appears.
The problems I am having are:
1) When I click on Disabled and check the checkbox, and then I change the Disabled to another option, the hidden text still pops up.
2) You click on any option other than the default one, then you click on the checkbox first before you change the option from the drop-down menu to Disabled -> the hidden text does not show up.
How would I approach this?
Fiddle

Changes made: Invalid htmls fixed, Improper event bindings fixed.
Your HTML:
<table>
<tbody>
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</tbody>
</table>
<table id=outprint style="display:none">
<tbody>
<tr>
<td class="label">Out of Print?</td>
<td>
<input type="checkbox" name="outOfPrint" id="chk" />
</td>
</tr>
</tbody>
</table>
<table id="showthis" style="display:none">
<tbody>
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td>
<input type="checkbox" name="removeAndNotify" />
</td>
</tr>
</tbody>
</table>
Javascript:
var show;
$('#status').change(function() {
show = $(this).val();
if (show != "-1") {
$('#outprint').show();
} else {
$('#outprint').hide();
$('#showthis').hide();
}
});
$('#chk').change(function() {
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
} else {
$('#showthis').hide();
}
});
DEMO

I guess you just need to reset the state of your hidden controls to default once you change the options from the dropdown and then iterate through the logic.
$('#status').change(function () {
ResetState();
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
function ResetState()
{
$('#outprint').hide();
$('#showthis').hide();
$('#chk').prop("checked", false);
}
Example : https://jsfiddle.net/DinoMyte/up4j39qr/4/

Disable next form field on dynamically inserted form elements

I know this has been asked many times before but none of those solutions seem to work in my situation.
I need the checkbox on each row to disable the next text field. Each table row is created on the fly (JS clone). Only the first row is static. Each subsequent row, the name and ID are appended with a new number (formfield1, formfield2, etc) and happen after the page has loaded.
HTML
<div class="add_rec_container" id="fuel_stop" style="display:block;"><!--open #fuel_stop-->
<p class="label">Enter Fuel Stop:</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="fuel_stop_table" class="fuel_data">
<tbody>
<tr>
<td><select name="data_fuel_state1" id="data_fuel_state1" class="state_menu">
<option value="AZ">AZ</option>
<option value="CA" selected="selected">CA</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="OR">OR</option>
<option value="UT">UT</option>
</select>
</td>
<td><input type="tel" name="data_total_gal1" id="data_total_gal1" class="help total_gal_field" title="Gallons"/></td>
<td><input type="checkbox" name="data_yard1" id="data_yard1" class="enablePPG" value="yes" onclick="disablePPG(this);"/> Yard
</td>
<td>$ <input type="tel" name="data_price1" id="data_price1" class="help price_field" title="PPG" /></td>
</tr>
</tbody>
</table>
<a id="add_fuel_row" class="add_btn">+ State</a>
</div><!--close #fuel_stop-->
<input type="submit" name="Submit" class="send_button" value="Send"/>
</form>​
</div><!--close .record_entry_container-->
JS (not working but I think should)
function disablePPG() {
$(this).click(function() {
if ($(this).is(':checked')){
$(this).next('.price_field').prop('disabled', true);
} else {
$(this).next('.price_field').prop('disabled', false);
}
});
}
The following JS works on the first row of form elements, but obviously not a solution for multiple rows when added.
function disablePPG() {
$(this).click(function() {
if ($('#data_yard1').is(':checked')) {
$('#data_price1').prop('disabled', true);
} else {
$('#data_price1').prop('disabled', false);
}
});
}
Any help much appreciated.

$(".enablePPG").on("click", function()
{
if($(this).is(":checked") == true)
$(this).parent().next().children().attr("disabled", "disabled");
else
$(this).parent().next().children().removeAttr("disabled");
});

Combines table filters in jquery

I have a table with different places, and implemented some simple buttons that allow you to filter the list. First filter is location (north, east, central, south, west) which is based on postcode. Another filter is on "impress". This shows you only the places that have have 4 or higher value in the column. Filters work great separately, but not together. The result that I am after is when I press "West" is shows me the places in "West, when I then click impress, I expect to see the places in west with a 4 or 5 score for impress.
JSFiddle here
$('.table td.postcode').each(function() {
var cellText = $(this).html();
var locationString = cellText.substring(0,2);
if (locationString.indexOf('W') > -1){
$(this).parent().addClass('west');
}
if (locationString.indexOf('C') > -1){
$(this).parent().addClass('central');
}
if (locationString.indexOf('E') > -1){
$(this).parent().addClass('east');
}
if (locationString.indexOf('S') > -1){
$(this).parent().addClass('south');
}
if (locationString.indexOf('N') > -1){
$(this).parent().addClass('north');
}
});
$("input[name='filterStatus'], select.filter").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
if (classes == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr").filter(classes.length ? classes.join(',') : '*');
if (rows.size() > 0) {
rows.show();
}
}
});
$("input[name='impressStatus']").change(function(){
var classes = [];
$("input[name='impressStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
if(classes == ""){
$("#StatusTable tbody tr").show();
}
else{
$(".table td.impress").each(function(){
if($(this).data("impress") >= 4){
$(this).parent().show();
}
else{
$(this).parent().hide();
}
});
}
});
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--BUTTON FILTERS -->
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" style="" data-toggle="buttons">
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="north" autocomplete="off">North
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="east" autocomplete="off" class="radio">East
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="central" autocomplete="off" class="radio">Central
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="south"autocomplete="off" class="radio">South </label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="west" autocomplete="off" class="radio">West
</label>
</div><!-- button group -->
<label class="btn btn-primary outline">
<input type="checkbox" name="impressStatus" class="radio" aria-pressed="true" autocomplete="off">Impress her
</label>
</div><!-- btn toolbar-->
<!--TABLE -->
<table class="table" id="StatusTable">
<thead>
<tr>
<th data-sort="string" style="cursor:pointer">name</th>
<!-- <th>Description</th> -->
<th data-sort="string" style="cursor:pointer;">postcode</th>
<th data-sort="int" style="cursor:pointer;">price</th>
<th data-sort="int" style="cursor:pointer;">total</th>
<th data-sort="int" style="cursor:pointer;">impress</th>
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr data-link="/places/1">
<td>Name of place 1</td>
<td class="postcode">NW1</td>
<td class="price" data-price='3'>3</td>
<td class="rating" data-rating='69'>69</td>
<td class="impress" data-impress='4'>4</td>
</tr>
<tr data-link="/places/2">
<td>Name of place 2</td>
<td class="postcode">E3</td>
<td class="price" data-price='4'>4</span></td>
<td class="rating" data-rating='89'>89</td>
<td class="impress" data-impress='5'>5</td>
</tr>
<tr data-link="/places/3">
<td>Name of place 3</td>
<td class="postcode">SW3</td>
<td class="price" data-price='2'>2</td>
<td class="rating" data-rating='51'>51</td>
<td class="impress" data-impress='3'>3</td>
</tr>
</tbody>
</table>
Code is probably not the most efficient, but it works :). Once I got this working, I want to add more filters.

(sorry for my bad english)
if these are the only filters you need, you can use two different type of filter:
hide via Javascript
hide via Css
if you use 2 types of filters the filters can work correctly without use a complex javascript code to manage a big number of different cases and combination:
I add a initial (on document load) control that check if a tr has the value impress cell >4, if has it add a new class: is_impress else add an other: no_impress.
$('.table td.impress').each(function(){
var _class = ($(this).data("impress") >= 4) ? "is_impress" : "no_impress";
$(this).parent().addClass(_class);
});
The code of filter by position is the same... but... I edit the filter by impress to add a class to table () when is active and take it off when isn't:
$("input[name='impressStatus']").change(function(){
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_impress")
: $("#StatusTable").addClass("active_impress");
});
if the table has the class active_impress a css rules override the inline code of dispaly to hide all the row that haven't an impress >4:
#StatusTable.active_impress tr.no_impress{
display:none !important;
}
This type of filter override any other display modification until the checkbox stay checked.
I edit your fiddle:
https://jsfiddle.net/Frogmouth/gkba343L/1/
USE CSS to more filter
First change on load check, add price:
$('.table tbody tr').each(function(){
var _class = "";
_class += ($(this).find(".price").data("price") >= 2) ? "is_price " : "no_price ";
_class += ($(this).find(".impress").data("impress") >= 4) ? "is_impress " : "no_impress ";
console.log(_class);
$(this).addClass(_class);
});
Add an other handler to new filter:
$("input[name='priceStatus']").change(function(){
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_price")
: $("#StatusTable").addClass("active_price");
});
add new selector to the css rule:
#StatusTable.active_impress tr.no_impress,
#StatusTable.active_price tr.no_price{
display:none !important;
}
This is the result:
https://jsfiddle.net/Frogmouth/gkba343L/3/
Optimize code to add more filter:
HTML filter button:
<label class="btn btn-primary outline">
<input type="checkbox" name="impress" class="cssFilter radio" aria-pressed="true" autocomplete="off">Impress her
</label>
use cssFilter to indicate that is a css filter button and use name attribute to define the name of the filter, than use this namespace into the css class:
.active_{name} .no_{name} .is_{name}
And use a generic handler:
$("input.cssFilter").change(function(){
var _name = $(this).attr("name");
console.log(_name);
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_"+_name)
: $("#StatusTable").addClass("active_"+_name);
});
With this you can manage all the filter with an unique handler, remember to add the filter to onload check and the new selector for each new filter.
Fiddle:
https://jsfiddle.net/Frogmouth/gkba343L/4/