Jquery dropdown filter for tables

Jquery dropdown filter for tables - javascript

I'm using a code that I also found here that filters a table based on a dropdown selection. I'm not well-versed with JQuery/Javascript. My Question is how can I "show all" the data using this code snippet:
dropdown:
Show All
Done
On-going
Not yet started
$(document).ready(function($) {
$('#selectField').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectField'>
<option value=" "> Show All </option>
<option value="Done"> Done </option>
<option value="On-going"> On-going</option>
<option value="Not yet started"> Not yet started </option>
</select>
<table border="2">
<tr>
<td>Done</td>
</tr>
<tr>
<td>On-going</td>
</tr>
<tr>
<td>Done</td>
</tr>
<tr>
<td>Not yet started</td>
</tr>
<tr>
<td>Not yet started</td>
</tr>
</table>

You can check the value of dropdown and then filter it
like
$(document).ready(function($) {
$('#selectField').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
var unSelectedData;
dataset.show();
if (selection !== ' ') {
var unSelectedData = dataset.filter(function(index, item) {
return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
})
}
if (unSelectedData) {
unSelectedData.hide();
}
});
});
$(document).ready(function($) {
$('#selectField').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
var unSelectedData;
dataset.show();
if (selection !== ' ') {
var unSelectedData= dataset.filter(function(index, item) {
return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
})
}
if (unSelectedData) {
unSelectedData.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectField'>
<option value=" "> Show All </option>
<option value="Done"> Done </option>
<option value="On-going"> On-going</option>
<option value="Not yet started"> Not yet started </option>
</select>
<table border="2">
<tr>
<td>Done</td>
</tr>
<tr>
<td>On-going</td>
</tr>
<tr>
<td>Done</td>
</tr>
<tr>
<td>Not yet started</td>
</tr>
<tr>
<td>Not yet started</td>
</tr>
</table>

The solution is to avoid search action when selection is same value as "Show all" option which is " "
I've updated the jQuery code as below, and it works :
$(document).ready(function($) {
$('#selectField').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
if (selection !== ' ') {
return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
}
}).hide();
});
});

Related

Filter table with logical operations using Jquery

Trying to implement table filter with And/Or logical operations. Now the table is filtering based on individual datepicker and select field. If I select AND the table should show both datepicker and select field results, if I select OR either of one should display. Is it possible to achieve it in jquery. Any help is appreciated.
$(document).on("change", "#datepicker .created_on , select", function() {
var dataVal = $("#datepicker .created_on").datepicker('getDate');
dataVal = $.datepicker.formatDate("d/m/y", dataVal);
var select_value = $("#nameselect select").val();
var logic = $("select.logic").val();
$("#myTable tr:not('#table-header')").hide();
if (select_value != "" && dataVal != "") {
$("#myTable tbody > tr").each(function() {
var data_type = $(this).data('type');
var datess = $(this).find("td:eq(3) label").text()
var condition = (logic == "1") ? ((data_type == select_value) && (datess == dataVal)) : ((data_type == select_value) || (datess == dataVal))
if (condition) {
$(this).show();
}
});
} else if (dataVal != "" && select_value == "") {
console.log("dwd")
$("label:contains('" + dataVal + "')").each(function() {
$(this).closest('tr').show();
});
} else if (dataVal == "" && select_value != "") {
$("[data-type=" + select_value + "]").each(function() {
$(this).show();
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div style="display:inline-flex;">
<label>logic</label>
<select style="width:60px;" required="" class="logic">
<option value="">select</option>
<option value="1">OR</option>
<option value="2">AND</option>
</select>
</div>
<div style="margin-left:10px;display:inline-flex;" id="nameselect">
<label for="value">Name</label>
<select style="width:120px;" id="mylist" class='form-control' required="">
<option value="">select</option>
<option value="Mary">Mary</option>
<option value="John">John</option>
<option value="Martin">Martin</option>
<option value="Rozi">Rozi</option>
</select>
</div>
<table class="" cellpadding="1" cellspacing="1" style="margin-top:10px;" id="myTable">
<thead>
<tr id="table-header">
<th><label> NAME</label></th>
<th><label> TYPE</label></th>
<th><label>Doc</label></th>
<th style="margin-left:10px"><label>Date</label></th>
</tr>
</thead>
<tbody id="">
<tr class="" data-type="Mary">
<td><label>Mary</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">1/1/21</label></td>
</tr>
<tr class="" data-type="John">
<td><label>John</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">31/1/21</label></td>
</tr>
<tr class="" data-type="Martin">
<td><label>Martin</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">21/2/21</label></td>
</tr>
<tr class="" data-type="Rozi">
<td><label>Rozi</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">5/10/20</label></td>
</tr>
</tbody>
</table>

You can use check if the logic select value is 1 or 2 depending on this use && or || operator and show required trs .
Demo code :
$(document).on("change", "#datepicker .created_on , select", function() {
var dataVal = $("#datepicker .created_on").datepicker('getDate');
dataVal = $.datepicker.formatDate("d/m/y", dataVal);
var select_value = $("#nameselect select").val(); //get select value
var logic = $("select.logic").val();
//check if both are not both empty
if (select_value != "" && dataVal != "") {
$("#myTable tr:not('#table-header')").hide();
$("#myTable tbody > tr").each(function() {
var data_type = $(this).data('type'); //get data attr value
var datess = $(this).find("td:eq(3) label").text() //get date value
//compare
var condition = (logic == "1") ? ((data_type == select_value) && (datess == dataVal)) : ((data_type == select_value) || (datess == dataVal))
if (condition) {
$(this).show(); //show
}
});
} else {
//show all..
$("#myTable tr").show();
//or some other logic you need .
}
});
(function($) {
$('.datepicker').each(function() {
$(this).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
onClose: function() {
//triggerFocus();
}
});
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="datepicker1" style="display:inline-flex;" id="datepicker">
<label for="datepicker">Date</label>
<input type="text" style="width:120px;" class="created_on required datepicker" placeholder="DD-MM-YYYY" required="">
</div>
<div style="display:inline-flex;">
<label>logic</label>
<select style="width:60px;" required="" class="logic">
<option value="">select</option>
<option value="1">AND</option>
<option value="2">OR</option>
</select>
</div>
<div style="margin-left:10px;display:inline-flex;" id="nameselect">
<label for="value">Name</label>
<select style="width:120px;" id="mylist" class='form-control' required="">
<option value="">select</option>
<option value="Mary">Mary</option>
<option value="John">John</option>
<option value="Martin">Martin</option>
<option value="Rozi">Rozi</option>
</select>
</div>
<table class="" cellpadding="1" cellspacing="1" style="margin-top:10px;" id="myTable">
<thead>
<tr id="table-header">
<th><label> NAME</label></th>
<th><label> TYPE</label></th>
<th><label>Doc</label></th>
<th style="margin-left:10px"><label>Date</label></th>
</tr>
</thead>
<tbody id="">
<tr class="" data-type="Mary">
<td><label>Mary</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">1/1/21</label></td>
</tr>
<tr class="" data-type="John">
<td><label>John</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">31/1/21</label></td>
</tr>
<tr class="" data-type="Martin">
<td><label>Martin</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">21/2/21</label></td>
</tr>
<tr class="" data-type="Rozi">
<td><label>Rozi</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">5/10/20</label></td>
</tr>
</tbody>
</table>

Change all the dropdown option' s value when the checkbox is checked

I'm wondering when i check the checkbox (Select all), can all the dropdowns be forced to select "Y"
if it's unchecked, all the dropdowns will be forced to select "N"
Many thanks.
var check = $('#check');
check.onclick(function(){
$('.option') = "Y";
})
<table id="table">
<th>
select all <input type="checkbox" id="check">
</th>
<tr>
<td>
<select class="option status">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="option status">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
Orginally i have a table that show the total amount needs to be paid and payment in arrears
$(document).ready(function() {
$("#table").on('input', '.txtCal, .status', function() {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
var to_be_paid = 0;
$("#table tr").each(function() {
var get_textbox_value = $('.txtCal', this).val();
var get_payment_status = $('.status', this).val();
if (get_textbox_value && get_payment_status) {
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
if (get_payment_status === 'N') {
to_be_paid += parseFloat(get_textbox_value);
}
}
});
$(".total_sum_value").html(calculated_total_sum);
$(".arrears").html(to_be_paid);
}
calculate();
});
HTML
<div class="col-lg-6 result">
<div class="input-group">
<p>
<span class="input-group-addon">Total Payment</span>
<span class="input-group-addon">$HKD</span>
<span class="input-group-addon total_sum_value"></span></p>
<br><br><br>
<p>
<span class="input-group-addon">In Arrears</span>
<span class="input-group-addon">$HKD</span>
<span class="input-group-addon arrears"></span></p>
</div>
Each table row will have a select dropdown that consists of two option "Y" and "N". Originally, i have to manually change its table row option, and the payment in arrears will change accordingly.
For example, if the dropdown is "Y" which means paid, the amount of payment in arrears will decrease automatically.
Now after adding the select all function, to force all dropdowns to select "Y",for some reason the calculate function fail to work.
Any ideas

Add a common class to all the select and value to the option. Trigger a function on checking the checkbox which will select all Y option.Use jquery 'prop' method to add the property
function selectAll(elem) {
if ($(elem).prop('checked')) {
$('.selOptions option[value=Y]').prop('selected', true);
} else {
$('.selOptions option[value=N]').prop('selected', true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>
select all <input type="checkbox" onchange="selectAll(this)">
</th>
<tr>
<td>
<select class="selOptions">
<option value = "Y">Y</option>
<option value = "N">N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="selOptions">
<option value = "Y">Y</option>
<option value = "N">N</option>
</select>
</td>
</tr>
</table>

Using vainilla JS
<table>
<th>
select all <input id="selectAll" type="checkbox" />
</th>
<tr>
<td>
<select>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
</table>
<script>
var selectAll = document.getElementById('selectAll');
var options = document.getElementsByTagName('select');
selectAll.addEventListener( 'change', function() {
if(this.checked) {
for(var i=0; i < options.length; i++) {
options[i].selectedIndex = 0;
}
}
});
</script>

First determine when the checkbox is checked or not.
$('#check').on('change', function() { if ($(this).is(':checked')) {...
Then you could use a selector based on an option's text content (you don't have a value attribute which you should but it's still functional.)
$('option:contains(Y)')...
Then use .prop() method to programmatically change it's selected state.
.prop('selected', true);
Demo
$('#check').on('change', function() {
if ($(this).is(':checked')) {
$('option:contains(Y)').prop('selected', true);
} else {
$('option:contains(N)').prop('selected', true);
}
});
<table>
<th>
select all <input type="checkbox" id="check">
</th>
<tr>
<td>
<select class="option">
<option>--</option>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="option">
<option>--</option>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hide asterisk only for one field but show up for other fields

I have a text field and a dropdown field shown below
When I select any value from the dropdown field called 'REASONS', hide the asterisk of VEHICLE_NO field , I'm doing the below but doesnt work,
asteriskV ID is used for other fields to show/hide asterisks, my goal is to hide only for VEHICLE_NO and not for other fields when any of the value is selected from REASONS dropdown, how can i achieve this?
<table>
<tr><td><font id="asteriskV" color="red">*</font>VEHICLE TAG:</td>
<td>
<INPUT TYPE="text" id="VEHICLE_NO" class="MandatoryVTxt" NAME="VEHICLE_NO" size="25"></td></tr>
<tr>
<td><font color="red">*</font>1)Reasons:</td><td>
<select id="REASONS" name="REASONS" class="MandatoryDD" style="width:200px">
</select>
</td></tr>
</table>
$('#REASONS').change(function () {
var sel = $(this).val();
if (sel == '1117' || sel == '1116' || sel=='1120' || sel=='1121'){
$("#testingForm #VEHICLE_NO #asteriskV").hide();
}
});

Dear shwetha you can try this code.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<table>
<tr>
<td><font id="asteriskV" color="red">*</font>VEHICLE TAG:</td>
<td>
<INPUT TYPE="text" id="VEHICLE_NO" class="MandatoryVTxt" NAME="VEHICLE_NO" size="25">
</td>
</tr>
<tr>
<td><font color="red">*</font>1)Reasons:</td>
<td>
<select id="REASONS" name="REASONS" class="MandatoryDD" style="width:200px">
<option>Select Reason</option>
<option value="1117">Reason 1</option>
<option value="1116">Reason 2</option>
</select>
</td>
</tr>
</table>
<script>
$(function () {
$('#REASONS').change(function () {
var sel = $(this).val();
if (sel == '1117' || sel == '1116' || sel == '1120' || sel == '1121') {
$("#asteriskV").hide();
}
});
});
</script>
https://jsfiddle.net/qaaf5vs9/

Add a class only to the font for VEHICLE_NO, and hide it using that class
<table>
<tr><td><font id="asteriskV" class="VEHICLE_NO" color="red">*</font>VEHICLE TAG:</td>
<td>
<INPUT TYPE="text" id="VEHICLE_NO" class="MandatoryVTxt" NAME="VEHICLE_NO" size="25"></td></tr>
<tr>
<td><font color="red">*</font>1)Reasons:</td><td>
<select id="REASONS" name="REASONS" class="MandatoryDD" style="width:200px">
</select>
</td></tr>
</table>
$('#REASONS').change(function () {
var sel = $(this).val();
if (sel == '1117' || sel == '1116' || sel=='1120' || sel=='1121'){
$(".VEHICLE_NO").hide();
}
});

I'm as confused as jquery, where is the tag with 3 IDs? I think you want ...
$('#REASONS').change(function () {
var sel = $(this).val();
if (sel == '1117' || sel == '1116' || sel=='1120' || sel=='1121'){
$("#asteriskV").hide();
}
});
and for select not change ...
$('#REASONS').focus(function() {
var sel = $(this).val();
if (sel == '1117' || sel == '1116' || sel=='1120' || sel=='1121'){
$("#asteriskV").hide();
}
});
If you want to hide multible elements I suggest using a class for all elements and $(".allAsterisk").hide();

.JS form not working on Safari

I have a form in an iframe that submits information to an MLS IDX and shows the properties. The form works great on Chrome and Mozilla, but when using Safari it just reloads the page in a new window instead of showing the results page. I copied the .js and form from the IDX website and do not know anything about .js. The page actually targets a remote .js file and also has .js on the actual page. The page is located at mariaraymer.com/test1.html
Any help is appreciated.
Thank you!
Update 2: Noticed in Safari quickly goes to second page after submit then returns to original URL - Url of page is http://mlssearch.topproduceridx.com/system/safari.asp?url=. Page has this javscript. Page looks to be dedicated to safari as it does not go to a page like this for chrome or firefox.
<script language="JavaScript">
window.setTimeout(function() {
if (document.cookie.indexOf('test_cookie=1') < 0) {
var name = 'test_cookie', div = document.getElementById(name), iframe = document.createElement('iframe'), form = document.createElement('form');
iframe.name = name;
iframe.src = 'javascript:false';
div.appendChild(iframe);
form.action = location.toString();
form.method = 'POST';
form.target = "_parent";
div.appendChild(form);
form.submit();
}
else {
if (location.search.indexOf('https://') > 0)
top.location.href = location.search.replace('?url=https://','http://');
else if (location.search.indexOf('http://') > 0)
top.location.href = location.search.replace('?url=http://','http://');
}
},
10);
</script>
Update: Error in Chrome Console
Uncaught ReferenceError: SwapPriceRange is not defined
3extensions::uncaught_exception_handler:8 Error in event handler for (unknown): TypeError: Cannot read property 'state' of null
at CSRecorder.onQueryStateCompleted (chrome-extension://cplklnmnlbnpmjogncfgfijoopmnlemp/content_scripts/recorder.js:43:13)
Moved Code around and received this error:
extensions::uncaught_exception_handler:8 Error in event handler for (unknown): TypeError: Cannot read property 'state' of null
at CSRecorder.onQueryStateCompleted (chrome-extension://cplklnmnlbnpmjogncfgfijoopmnlemp/content_scripts/recorder.js:43:13)
test1.html:1 Resource interpreted as Image but transferred with MIME type text/html: "http://www.mariaraymer.com/".
extensions::uncaught_exception_handler:8 Error in event handler for (unknown): TypeError: Cannot read property 'state' of null
at CSRecorder.onQueryStateCompleted (chrome-extension://cplklnmnlbnpmjogncfgfijoopmnlemp/content_scripts/recorder.js:43:13)
Here is the remote .js code:
//***************THE FOLLOWING FUNCTIONS ARE USED THROUGHOUT************
function openWin(url,windowName,options){
var WindowHandle=window.open(url,windowName,options);
WindowHandle.focus();
}
function openWinFormSubmit(frm,frmaction,url,windowName,options){
frm.submit();
var WindowHandle = window.open(url,windowName,options);
document.location = frmaction;
WindowHandle.focus();
}
var ns6=document.getElementById&&!document.all
var ie=document.all
function showSpan(spanID,thetext){
if (ie) eval("document.all."+spanID).innerHTML=thetext
else if (ns6) document.getElementById(spanID).innerHTML=thetext
}
function hideSpan(spanID){
if (ie) eval("document.all."+spanID).innerHTML=' '
else if (ns6) document.getElementById(spanID).innerHTML=' '
}
function getElementBy(elemTag){
var elem = document.getElementById (elemTag);
if (elem)
return elem;
var elems = document.getElementsByName (elemTag);
if (elems.length > 0)
return elems[0];
return null;
}
function toggleOpenCloseElem(elemName){
var elem = getElementBy (elemName);
if (!elem)
return;
if (elem.style.display == "")
elem.style.display = "none";
else
elem.style.display = "";
}
function toggleOpenElem(elemName){
var elem = getElementBy (elemName);
if (!elem)
return;
else
elem.style.display = "";
}
function toggleCloseElem(elemName){
var elem = getElementBy (elemName);
if (!elem)
return;
else
elem.style.display = "none";
}
function GetCookie(name) { // use: GetCookie("name");
var thecookie = document.cookie;
var index = thecookie.indexOf(name + "=");
if (index == -1) return null;
index = thecookie.indexOf("=", index) + 1; // first character
var endstr = thecookie.indexOf(";", index);
if (endstr == -1) endstr = thecookie.length; // last character
return unescape(thecookie.substring(index, endstr));
}
function SetCookie(name, value) { // use: SetCookie("name", value);
document.cookie=name + "=" + escape(value) + ";";
}
function testForObject(Id){
var o = document.getElementById(Id);
if (o){return true;}return false;
}
function setAdminSection(str){
if(str.length >= 14){
document.getElementById('AdminSection').style.fontSize = '28px'
}else{
document.getElementById('AdminSection').style.fontSize = '36px'
}
document.getElementById('AdminSection').innerHTML=str;
}
//***************THE ABOVE FUNCTION IS USED THROUGHOUT************
//***************THE FOLLOWING FUNCTION IS USED FOR FORM VALIDATION************
function confirmPrompt(msg,url){
if(confirm(msg))
document.location = url;
}
function confirmPromptFormSubmit(msg,frm,url){
if(confirm(msg)){
frm.submit();
document.location = url;
}
}
function validateLength(objTB,maxChar){
if (objTB.value.length > maxChar){return false;}
return true;
}
function validateEmail(objTB){
var objRegExp = /^[a-z0-9]([a-z0-9_\-\.]*)#([a-z0-9_\-\.]*)(\.[a-z]{2,3}(\.[a-z]{2}){0,2})$/i;
return objRegExp.test(objTB.value);
}
function validateEmailNonReq(objTB){
var invalidChars = "*|,\":<> []{}`\';()&$#%";
if (objTB.value.length > 0){
if (objTB.value.indexOf('#') < 0 || objTB.value.indexOf('.') < 0 || objTB.value.length < 5){return false;}
for (var i = 0; i < objTB.value.length; i++){
if (invalidChars.indexOf(objTB.value.charAt(i)) != -1){return false;}
}
return true;
}
return true;
}
function validateTextBox(objTB){
if (objTB.value==''){return false;}
return true;
}
function validateSelectList(objTB){
if (objTB.selectedIndex==''){return false;}
return true;
}
function validateNumberTextBoxNonReq(objTB){
if (isNaN(objTB.value)){return false;}
return true;
}
function validateNumberTextBox(objTB){
if (objTB.value=='' || isNaN(objTB.value)){return false;}
return true;
}
function validateZipCodeTextBoxNonReq(objTB){
reZip = new RegExp(/(^\d{5}$)|(^\d{5}-\d{4}$)/);
if (!reZip.test(objTB.value)){return false;}
return true;
}
//***************THE ABOVE FUNCTION IS USED FOR FORM VALIDATION************
//***************THE FOLLOWING FUNCTIONS ARE USED BY THE PROPERTY COMPARE FEATURE************
function commitCompareList(){
if(GLOBAL_CompareList != '') {SetCookie("VAR_CompareList",GLOBAL_CompareList);}
if(GLOBAL_CompareCount != '') {SetCookie("CompareCount",GLOBAL_CompareCount);}
}
function sendToCompare(querystring){
if (GLOBAL_CompareCount < 2){
alert('Please check more than 1 listing!');
}else{
if (GLOBAL_CompareCount > 4){
alert('Please check no more than 4 listings!');
}else{
window.location = "/property/propertycompare.asp? VAR_CompareList=" + GLOBAL_CompareList + "&CompareCount=" + GLOBAL_CompareCount + querystring;
}
}
}
function compareClear(){
GLOBAL_CompareList = '';
GLOBAL_CompareCount = '';
if(GetCookie('VAR_CompareList') != null && GetCookie('VAR_CompareList') != ""){SetCookie("VAR_CompareList",'');}
if(GetCookie('CompareCount') != null && GetCookie('CompareCount') != ""){SetCookie("CompareCount",'');}
}
function addCompare(obj){
//the maximum number of listings a user can check to compare
var Max_Number_Properties = 4;
if(obj.checked == true){
if(GLOBAL_CompareCount == Max_Number_Properties){
obj.checked = false;
alert('You have already chosen ' + Max_Number_Properties + ' properties!');
}else{
GLOBAL_CompareList = GLOBAL_CompareList + obj.value;
GLOBAL_CompareCount = Math.round(GLOBAL_CompareCount) + 1;
}
}else{
GLOBAL_CompareCount = Math.round(GLOBAL_CompareCount) - 1;
GLOBAL_CompareList = GLOBAL_CompareList.replace(obj.value,"");
}
}
//***************THE ABOVE FUNCTIONS ARE USED BY THE COMPARE TOOL************
//***************THE FOLLOWING FUNCTIONS ARE USED BY THE eNavigator FEATURE************
//Clears eNavigator Cookies
function eNavigatorClear(){
if(GetCookie('eNavigator_SearchForm_State') != null && GetCookie('eNavigator_SearchForm_State') != ""){SetCookie('eNavigator_SearchForm_State','')};
if(GetCookie('eNavigator_Prev_CenterLat') != null && GetCookie('eNavigator_Prev_CenterLat') != ""){SetCookie('eNavigator_Prev_CenterLat','')};
if(GetCookie('eNavigator_Prev_CenterLng') != null && GetCookie('eNavigator_Prev_CenterLng') != ""){SetCookie('eNavigator_Prev_CenterLng','')};
if(GetCookie('eNavigator_Prev_ZoomLevel') != null && GetCookie('eNavigator_Prev_ZoomLevel') != ""){SetCookie('eNavigator_Prev_ZoomLevel','')};
if(GetCookie('eNavigator_Prev_MapStyle') != null && GetCookie('eNavigator_Prev_MapStyle') != ""){SetCookie('eNavigator_Prev_MapStyle','')};
if(GetCookie('eNavigator_VAR_City') != null && GetCookie('eNavigator_VAR_City') != ""){SetCookie('eNavigator_VAR_City','')};
if(GetCookie('eNavigator_VAR_ZipCode') != null && GetCookie('eNavigator_VAR_ZipCode') != ""){SetCookie('eNavigator_VAR_ZipCode','')};
if(GetCookie('eNavigator_PRM_PropertyTypeCode') != null && GetCookie('eNavigator_PRM_PropertyTypeCode') != ""){SetCookie('eNavigator_PRM_PropertyTypeCode','')};
if(GetCookie('eNavigator_PRM_Minimum_Price') != null && GetCookie('eNavigator_PRM_Minimum_Price') != ""){SetCookie('eNavigator_PRM_Minimum_Price','')};
if(GetCookie('eNavigator_PRM_Maximum_Price') != null && GetCookie('eNavigator_PRM_Maximum_Price') != ""){SetCookie('eNavigator_PRM_Maximum_Price','')};
if(GetCookie('eNavigator_PRM_Minimum_Beds') != null && GetCookie('eNavigator_PRM_Minimum_Beds') != ""){SetCookie('eNavigator_PRM_Minimum_Beds','')}; //KILLS BATHS TOO (don't ask)
}
//***************THE ABOVE FUNCTIONS ARE USED BY eNavigator************
This is the .js on the actual page with the form
<script type="text/javascript">
function validateForm1(frm) {
var msg = '';
if (!validateTextBox(frm.VAR_MLSNumber)) { msg = msg + 'One or More MLS Numbers\n'; }
if (msg == '') {
return true;
}
else {
msg = 'The following field(s) are required:\n\n' + msg + '\n';
alert(msg);
return false;
}
}
function validateForm2(frm) {
var msg = '';
var CityCnt = 0;
var ZipCnt = 0;
for (var x = 0; x < frm.VAR_City.length; x++) {
if (frm.VAR_City.options[x].selected) {
CityCnt = CityCnt + 1;
}
}
for (var x = 0; x < frm.VAR_ZipCode.length; x++) {
if (frm.VAR_ZipCode.options[x].selected) {
ZipCnt = ZipCnt + 1;
}
}
if (CityCnt > 10) { msg = msg + '10 or less Cities\n'; }
if (ZipCnt > 10) { msg = msg + '10 or less Zip Codes\n'; }
if (frm.VAR_City.selectedIndex < 0 && frm.VAR_ZipCode.selectedIndex < 0) { msg = msg + 'One or more Cities OR Zip Codes\n'; }
if (msg == '') {
toggleOpenCloseElem('searchingTR1');
return true;
} else {
msg = 'The following field(s) are required:\n\n' + msg + '\n';
alert(msg);
return false;
}
}
function disableFields(selVal) {
if (selVal == 'COM' || selVal == 'CML' || selVal == 'LND' || selVal == 'IMF' || selVal == 'RSL') {
if (testForObject('PRM_Minimum_Beds')) {
frmMain2.PRM_Minimum_Beds.selectedIndex = -1;
frmMain2.PRM_Minimum_Beds.disabled = true;
}
if (testForObject('PRM_Minimum_baths')) {
frmMain2.PRM_Minimum_baths.selectedIndex = -1;
frmMain2.PRM_Minimum_baths.disabled = true;
}
} else {
if (testForObject('PRM_Minimum_Beds')) {
if (frmMain2.PRM_Minimum_Beds.selectedIndex < 0) {
frmMain2.PRM_Minimum_Beds.selectedIndex = 0;
}
frmMain2.PRM_Minimum_Beds.disabled = false;
}
if (testForObject('PRM_Minimum_baths')) {
if (frmMain2.PRM_Minimum_baths.selectedIndex < 0) {
frmMain2.PRM_Minimum_baths.selectedIndex = 0;
}
frmMain2.PRM_Minimum_baths.disabled = false;
}
}
if (testForObject('PRM_Custom9')) {
if (selVal != 'IMF' && selVal != 'RNT') {
frmMain2.PRM_Custom9.selectedIndex = -1;
frmMain2.PRM_Custom9.disabled = true;
} else {
frmMain2.PRM_Custom9.selectedIndex = 0;
frmMain2.PRM_Custom9.disabled = false;
}
}
if (testForObject('PRM_Custom12')) {
if (selVal == 'COM' || selVal == '') {
frmMain2.PRM_Custom12.disabled = false;
} else {
frmMain2.PRM_Custom12.checked = false;
frmMain2.PRM_Custom12.disabled = true;
}
}
}
</script>
This is the form
<table cellpadding=0 cellspacing=0 border=0 class="tableBorder" width=230px>
<tr>
</tr>
<tr>
<td valign=top colspan=0 style="padding:0px; background-color:#FFFFFF;">
<table border=0 cellpadding=0 cellspacing=0 width=67%>
<tr>
<!--td style="border-bottom: solid 1px #000000;"><img src="/images/spacer.gif" width=2></td>
<td class=searchTab align=center><div onClick="document.location.href='http://mlssearch.topproduceridx.com/property/map.asp';">Map</div></td-->
</tr>
<tr>
<td colspan=0 bgcolor="ffffff">
<table border=0 cellpadding=0 cellspacing=2 class="Website_Text" width=100%>
<form method="get" action="http://mlssearch.topproduceridx.com/property/proplist.asp" name="frmMain2" target="_blank" onSubmit="return(validateForm2(this));">
<input type="hidden" name="VAR_ShowResultOptions" value="1">
<input type="hidden" name="VAR_SearchSource" value="propsearch">
<tr>
<td class="searchPageSectionHeader">Listing Location <font color=FF0000>*</font></td>
</tr>
<tr>
<td valign=top align=left class="searchPageSectionBG" style="padding-top:8px" nowrap>MLS Number:</td>
</tr>
<tr>
<td><input name="VAR_MLSNumber" size=30 maxlength=38 value=""></td></tr>
<tr class="searchPageSectionBG">
<td nowrap style="padding-top:8px" >Street Address: </td>
</tr>
<tr class="searchPageSectionBG">
<td width=100%>
<input name="PRM_Address" size=30 maxlength=32 value=""><br>
</td>
</tr>
<tr>
<td>
<table border=0 cellpadding=2 cellspacing=2 class="Website_Text">
</table>
</td>
</tr>
<tr>
<td class="searchPageSectionHeader">Listing Features</td>
</tr>
<tr>
<td>
<table border=0 cellpadding=2 cellspacing=0 class="Website_Text" width=80%>
<tr class="searchPageSectionBG">
<td> Type:</td>
<td colspan=0 width=15px>
<select name="PRM_PropertyTypeCode" onChange="javascript:disableFields(this.value); SwapPriceRange(this.value);" class="searchPageSectionBG">
<option value="">Any listing type</option>
<option value="RES">Single Family Home</option>
<option value="CND">Townhome or Condo</option>
<option value="IMF">Multi-Family Home</option>
<option value="LND">Lots and Land</option>
<option value="COM">Commercial</option>
<option value="FRM">Farm</option>
</select>
</td>
</tr>
<tr class="searchPageSectionBG">
</tr>
<tr class="searchPageSectionBG">
<td nowrap> Price:</td>
<td align="left">
<select name="PRM_Minimum_Price" id="PRM_Minimum_Price" class="searchPageSectionBG">
<option value="">Any price</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
<option value="300000">$300,000</option>
<option value="350000">$350,000</option>
<option value="400000">$400,000</option>
<option value="450000">$450,000</option>
<option value="500000">$500,000</option>
<option value="550000">$550,000</option>
<option value="600000">$600,000</option>
<option value="650000">$650,000</option>
<option value="700000">$700,000</option>
<option value="750000">$750,000</option>
<option value="800000">$800,000</option>
<option value="850000">$850,000</option>
<option value="900000">$900,000</option>
<option value="950000">$950,000</option>
<option value="1000000">$1,000,000</option>
<option value="1250000">$1,250,000</option>
<option value="1500000">$1,500,000</option>
<option value="1750000">$1,750,000</option>
<option value="2000000">$2,000,000</option>
<option value="">Any price</option>
</select></td></tr>
<tr class="searchPageSectionBG"><td align="center">
to</td>
<td align="left">
<select name="PRM_Maximum_Price" id="PRM_Maximum_Price" class="searchPageSectionBG">
<option value="">Any price</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
<option value="300000">$300,000</option>
<option value="350000">$350,000</option>
<option value="400000">$400,000</option>
<option value="450000">$450,000</option>
<option value="500000">$500,000</option>
<option value="550000">$550,000</option>
<option value="600000">$600,000</option>
<option value="650000">$650,000</option>
<option value="700000">$700,000</option>
<option value="750000">$750,000</option>
<option value="800000">$800,000</option>
<option value="850000">$850,000</option>
<option value="900000">$900,000</option>
<option value="950000">$950,000</option>
<option value="1000000">$1,000,000</option>
<option value="1250000">$1,250,000</option>
<option value="1500000">$1,500,000</option>
<option value="1750000">$1,750,000</option>
<option value="2000000">$2,000,000</option>
<option value="">Any price</option>
</select>
</td>
</tr>
<tr class="searchPageSectionBG">
<td nowrap> Bedrooms:</td>
<td align="left" >
<select name="PRM_Minimum_Beds" id="PRM_Minimum_Beds" class="searchPageSectionBG">
<option value="" >Any number</option>
<option value="1">At least 1</option>
<option value="2">At least 2</option>
<option value="3">At least 3</option>
<option value="4">At least 4</option>
</select>
</td>
</tr>
<tr class="searchPageSectionBG">
<td nowrap> Bathrooms:</td>
<td align="left">
<select name="PRM_Minimum_baths" id="PRM_Minimum_baths" class="searchPageSectionBG">
<option value="" >Any number</option>
<option value="1">At least 1</option>
<option value="2">At least 2</option>
<option value="3">At least 3</option>
<option value="4">At least 4</option>
</select>
</td>
</tr>
</table>
</td>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing=0 class="Website_Text" width=100%>
</table>
</td>
</tr>
<tr>
<td class="searchPageSectionHeader">Lot Features</td>
</tr>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing=0 class="Website_Text" width=100%>
<tr class="searchPageSectionBG">
<td nowrap> Lot Size (Acres):</td>
<td width=100% color="#7b8283">
<select name="VAR_SqFt" class="searchPageSectionBG">
<option value="">Any size</option>
<option value="0-.49">Less than 0.5</option>
<option value=".5-1">0.5 - 1</option>
<option value="1-2">1 - 2</option>
<option value="2-5">2 - 5</option>
<option value="5-10">5 - 10</option>
<option value="10.1-1000000">More than 10</option>
</select>
</td>
</tr>
<tr class="searchPageSectionBG">
<td colspan=0 nowrap>
<table border=0 cellpadding=0 cellspacing=0 class="Website_Text">
<tr>
<td class="searchPageSectionBG"><input type=checkbox value=1 name="PRM_Waterfront" > Waterfront </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan=0 valign=middle nowrap align=left >
<input type="submit" align="left" value="Search" style="background-color: #ec894d; color: #ffffff; border-color: #ec894d; vertical-align: middle; text-align: center;" class="button">
<input type=radio name=PRM_OrderBy style="display:none;" value="pReciprocity ASC, pPrice DESC" Checked> </td>
</tr>
</table>
<p>
</td>
</tr>
</form>
</table>

Your HTML is invalid. You can't have <form> as a child of <table> The children of <table> must be table elements like <thead>, <tbody>, <tfoot>, or <tr>. When you give invalid HTML like this, the browser tries to fix it up, and different browsers do this differently. What's happening is that the submit button is not connected to the form properly, so it's not sending to the action URL.
Instead of putting the form inside the table, put the table inside the form:
<form method="get" action="http://mlssearch.topproduceridx.com/property/proplist.asp" name="frmMain2" target="_blank" onSubmit="return(validateForm2(this));">
<input type="hidden" name="VAR_ShowResultOptions" value="1">
<input type="hidden" name="VAR_SearchSource" value="propsearch">
<table border=0 cellpadding=0 cellspacing=2 class="Website_Text" width=100%>
...
</table>
</form>
Also, your <table> and </table> tags aren't matched up properly: you have 8 <table> and 9 </table>.

Making an editable dropdown and populating it from an external JS

I want to make an editable dropdown, and on double click of the data the dropdown should appear and make populate the options from and external JS, this should be made to run more than once.
The following is the HTML for this
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<table id='table-draggable1'>
<tbody class="connectedSortable">
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
<tr>
<td>156</td>
<td>668</td>
<td>100.95</td>
<td class="master">100.95</td> //editable dropdown
</tr>
<tr>
<td class="desc">256</td>
<td>668</td>
<td>100.95</td>
<td class="master">100.95</td> // ondblclick should be editable
</tr>
</tbody>
</table>
</div>
</div>
</div>
The jquery which i tried for making the dropdown editable
$document.ready(function ()
{
dropdown();
$(function ()
{
$(".master").dblclick(function (e)
{
e.stopPropagation();
var currentEle = $(e.target);
var value = $(e.target).html();
console.log($(e.target));
if ($.trim(value) === "")
{
$(currentEle).data('mode', 'add');
}
else
{
$(currentEle).data('mode', 'edit');
}
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value)
{
$(currentEle).html("<select class='master'></select>");
var mode = $(currentEle).data('mode');
alert(mode);
$(".master").focus();
$(".master").keyup(function (event)
{
if (event.keyCode == 13)
{
$(this).parent().html($(this).val().trim());
$(".master").remove();
}
});
}
$(document).click(function (e)
{
if ($(".master") !== undefined)
{
if ($(".master").val() !== undefined)
{
$(".master").parent().html($(".master").val().trim());
$(".master").remove();
}
}
});
}
function dropdown()
{
var resp = "<option>" + 1 + "</option>"; //this should be populated in dropdown
$(".master").html(resp);
}
}
});
http://jsfiddle.net/tXakG/

You can accomplish this by using the datalist tag in HTML5.
<input type="text" name="product" list="productName"/>
<datalist id="productName">
<option value="a">Apple</option>
<option value="o">Orange</option>
<option value="b">Banana</option>
</datalist>
If you double click on the input text in the browser a list with the defined option will appear.
Added using javascript : data is conceded that taken from server through ajax
http://jsfiddle.net/rajaveld/7yM6V/
Else you can use jquery :
You can refer is jQuery UI for the same.

We Keep Coding

JavaScript is the programming language of the Web.

Jquery dropdown filter for tables - javascript

Related

Filter table with logical operations using Jquery

Change all the dropdown option' s value when the checkbox is checked

Hide asterisk only for one field but show up for other fields

.JS form not working on Safari

Making an editable dropdown and populating it from an external JS

Categories

Resources