We Keep Coding

Disable button if jquery autocomplete returns results

I'm using the jquery autocomplete to fetch data from a coldfusion CFC and display matching data when a user types.
That part is working, but I'd like to disable the submit button and show a message if there is data returned as that tells me that the data is not unique, which it needs to be.
I can sort of make it work but once my message appears "Name MUST BE Unique" and the button disables, it doesn't re-enable and make that message change to "Name is Unique".
What am I doing wrong?
Here is my CFC:
<cffunction name="lookupCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="JSON">
<cfargument name="term" required="false" default="" />
<!--- Define variables --->
<cfset var returnArray =ArrayNew(1)>
<!--- Do search --->
<cfquery name="data" datasource="#datasource#">
select company_name
From customer_table
where company_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.term#%" />
order by company_name
</cfquery>
<cfif #data.recordcount# eq 0>
<!--- Build result array --->
<cfset titleStruct = structNew() />
<cfset titleStruct['value'] = 'No results'/>
<cfset titleStruct['label'] = 'No results' />
<cfset arrayAppend(returnArray,titleStruct) />
<!--- And return it --->
<cfreturn returnArray />
<cfelse>
<!--- Build result array --->
<cfloop query="data">
<cfset titleStruct = structNew() />
<cfset titleStruct['value'] = company_name/>
<cfset titleStruct['label'] = company_name />
<cfset arrayAppend(returnArray,titleStruct) />
</cfloop>
<!--- And return it --->
<cfreturn returnArray />
</cfif>
</cffunction>
Here is my Javascript:
<!---Autocomplete for customer name--->
<script>
$(document).ready(function() {
$( "#new_customer_name" ).autocomplete({
source: "cfcs/existing_customers_lookup.cfc?method=lookupCustomers&returnformat=json",
minLength: 1,
select: function(event, ui) {
$('#new_customer_name').val(ui.item.value);
},
response: function(event, ui) {
// ui.content is the array that's about to be sent to the response callback.
if (ui.content.length == 0) {
$("#empty-message").text( "" );
//$("#empty-message").text( "Name is Unique" );
$("#add_new_customer_btn").prop('disabled', False);
} else if (ui.content.length != 0) {
$("#empty-message").text( "Name MUST BE Unique" );
$("#add_new_customer_btn").prop('disabled', true);
}
}
});
});
</script>
Here is my form:
<!--- New customer modal --->
<div id="new-customer-modal" style="display:none; width:50%; padding:10px;">
<fieldset>
<legend><h1>New Customer Form</h1></legend>
<form name="add_customer" id="add_customer">
<input name="new_customer_name" id="new_customer_name" type="text" required placeholder="Customer Name"><br><br>
<strong>Primary Contact*:</strong><br>
<input name="new_first_name" id="new_first_name" type="text" required placeholder="First Name*">
<input name="new_middle_name" id="new_middle_name" type="text" placeholder="Middle Initial/Name" size="15">
<input name="new_last_name" id="new_last_name" type="text" required placeholder="Last Name*">
<br><br>
<input name="new_email_address" id="new_email_address" type="email" required placeholder="Email Address"><br>
<input name="new_primary_phone" id="new_primary_phone" type="text" required placeholder="Primary Phone Number"><br>
<input name="new_alternate_phone" id="new_alternate_phone" type="text" placeholder="Alternate Phone Number"><br><br>
<strong>Company Address:</strong><br>
<input name="new_address1" id="new_address1" type="text" required placeholder="Address 1"><br>
<input name="new_address2" id="new_address2" type="text" placeholder="Address 2"><br>
<input name="new_city" id="new_city" type="text" required placeholder="City"><br>
<input name="new_state" id="new_state" type="text" required placeholder="State"><br>
<input name="new_zip" id="new_zip" type="text" required placeholder="Zip"><br><br>
<br><br>
<input type="hidden" name="customer_type" value="billable">
<input type="hidden" name="ticket_type" value="billable">
<input class="stylized_btn" type="submit" value="Add Customer"><div class="response" id="addCustomerMessage"></div>
</form>
</fieldset>

I was able to eventually figure this out my self. I created a separate function to check the name being entered into the field. The big difference was return a string instead of a query and testing the output that way.
In that function I included an if statement to perform tasks based on the results. I also created another CFC function dedicated to querying the database based on what was entered.
Hope this helps someone.
Here is my javascript:
<script>
$(document).ready(function() {
$( "#new_customer_name" ).autocomplete({
source: "cfcs/existing_customers_lookup.cfc?method=lookupCustomers&returnformat=json",
minLength: 1,
select: function(event, ui) {
$('#new_customer_name').val(ui.item.value);
},
response: function(event, ui) {
}
});
});
</script>
<script>
function check_customer_name() {
<!--- Get customer name --->
$.ajax({
dataType: 'json',
data: {
check_customer_name: $('#new_customer_name').val()
},
url: "cfcs/existing_customers_lookup.cfc?method=checkCustomers&returnformat=json",
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function(response) {
// ui.content is the array that's about to be sent to the response callback.
console.log(response);
if ( response == 'unique') {
document.getElementById("empty-message").style.color = 'green';
document.getElementById('empty-message').innerHTML = "This company name is unique.";
$("#add_new_customer_btn").prop('disabled', false);
} else {
document.getElementById("empty-message").style.color = 'red ';
document.getElementById('empty-message').innerHTML = "Company name not unique. Please try again.";
$("#add_new_customer_btn").prop('disabled', true);
}
}
});
}
</script>
Here is my form:
<fieldset>
<legend><h1>New Customer Form</h1></legend>
<form name="add_customer" id="add_customer" method="post" action="actionpages/add_customer.cfm">
<input name="new_customer_name" id="new_customer_name" type="text" required placeholder="Customer Name" onblur:"check_customer_name();" onFocus="check_customer_name();" onChange="check_customer_name();"><pre class="response" id="empty-message"></pre><br><br>
<strong>Primary Contact*:</strong><br>
<input name="new_first_name" id="new_first_name" type="text" required placeholder="First Name*">
<input name="new_middle_name" id="new_middle_name" type="text" placeholder="Middle Initial/Name" size="15">
<input name="new_last_name" id="new_last_name" type="text" required placeholder="Last Name*">
<br><br>
<input name="new_email_address" id="new_email_address" type="email" required placeholder="Email Address"><br>
<input name="new_primary_phone" id="new_primary_phone" type="text" required placeholder="Primary Phone Number"><br>
<input name="new_alternate_phone" id="new_alternate_phone" type="text" placeholder="Alternate Phone Number"><br><br>
<strong>Company Address:</strong><br>
<input name="new_address1" id="new_address1" type="text" required placeholder="Address 1"><br>
<input name="new_address2" id="new_address2" type="text" placeholder="Address 2"><br>
<input name="new_city" id="new_city" type="text" required placeholder="City"><br>
<input name="new_state" id="new_state" type="text" required placeholder="State"><br>
<input name="new_zip" id="new_zip" type="text" required placeholder="Zip"><br><br>
<br><br>
<input type="hidden" name="customer_type" value="billable">
<input type="hidden" name="ticket_type" value="billable">
<input class="stylized_btn" type="submit" value="Add Customer"><div class="response" id="addCustomerMessage"></div>
</form>
</fieldset>
Here are my CFC functions:
<cffunction name="lookupCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="JSON">
<cfargument name="term" required="false" default="" />
<!--- Define variables --->
<cfset var returnArray =ArrayNew(1)>
<!--- Do search --->
<cfquery name="data" datasource="#datasource#">
select company_name
From customer_table
where company_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.term#%" />
order by company_name
</cfquery>
<!--- Build result array --->
<cfloop query="data">
<cfset titleStruct = structNew() />
<cfset titleStruct['value'] = company_name/>
<cfset titleStruct['label'] = company_name />
<cfset arrayAppend(returnArray,titleStruct) />
</cfloop>
<!--- And return it --->
<cfreturn returnArray />
</cffunction>
<cffunction name="checkCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="string">
<cfargument name="check_customer_name" required="false" default="" />
<!--- localize function variables --->
<cfset var data = "">
<!--- Do search --->
<cfoutput>
<cfquery name="data" datasource="#datasource#">
select company_name
From customer_table
where company_name = <cfqueryparam value="#ARGUMENTS.check_customer_name#" cfsqltype="cf_sql_varchar">
</cfquery>
<cfif #data.recordcount# eq 0>
<cfset result = "unique">
<cfelse>
<cfset result = "taken">
</cfif>
<!--- And return it --->
<cfreturn result />
</cfoutput>
</cffunction>

Keep the dropdown values after submit the form

Creating dropdown box dynamically and options are adding through javascript arrays and I wanted to keep the values after i submit the form. Let us say if I select 'OOR' and '2' then after submit the form, I wanted to see these values in those dropdowns.
Thanks.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script language="javascript">
OORs=new Array("1","2","3","4");
NoOORs=new Array("A","B","C");
populateSelect();
$(function() {
$('#fenv').change(function(){
populateSelect();
});
});
function populateSelect(){
fenv=$('#fenv').val();
$('#market').html('');
if(fenv=='OOR'){
$.each(OORs,function(index,t) {
$("#market").append("<option value='"+t+"'>" +t+ "</option>");
});
}
else {
$.each(NoOORs,function(index,t) {
$("#market").append("<option value='"+t+"'>" +t+ "</option>");
});
}
}
</script>
<form>
<select id="fenv" NAME="fenv">
<option value="OOR2">OOR2</option>
<option value="OOR">OOR</option>
</select>
<select id="market" name="market"></select>
<input type="submit" name="submit" value="submit" >
</form>

You can make use of hidden fields to persist the data after form submits. Like this:
OORs=new Array("1","2","3","4");
NoOORs=new Array("A","B","C");
populateSelect();
$(function() {
$('#fenv').change(function(){
populateSelect();
});
});
function populateSelect(){
fenv=$('#fenv').val();
marketvalues = [];
$('#market').html('');
if(fenv=='OOR'){
$.each(OORs,function(index,t) {
$("#market").append("<option value='"+t+"'>" +t+ "</option>");
marketvalues.push(t);
});
}
else {
$.each(NoOORs,function(index,t) {
$("#market").append("<option value='"+t+"'>" +t+ "</option>");
marketvalues.push(t);
});
}
$("#marketvalues").val(marketvalues.join(","));
}
</script>
<form method="post">
<select id="fenv" NAME="fenv">
<option value="OOR2" <cfif structKeyExists(form, "fenv") and form.fenv EQ "OOR2"> selected="selected"</cfif>>OOR2</option>
<option value="OOR" <cfif structKeyExists(form, "fenv") and form.fenv EQ "OOR"> selected="selected"</cfif>>OOR</option>
</select>
<select id="market" name="market">
<cfif structKeyExists(form, "marketvalues") and trim(form.marketvalues) NEQ "">
<cfloop list="#form.marketvalues#" index="mv">
<option value="#mv#" <cfif form.market EQ mv> selected="selected"</cfif>>#mv#</option>
</cfloop>
</cfif>
</select>
<input type="submit" name="submit" value="submit"/>
<input type="hidden" name="marketvalues" id="marketvalues" value=""/>
</form>

To persist some data you will need to use php session or post.
For the first select it should be easy:
<select id="fenv" NAME="fenv">
<option value="OOR2" <?php if($_POST["fenv"]=="OOR2") echo "selected";?>>OOR2</option>
<option value="OOR" <?php if($_POST["fenv"]=="OOR") echo "selected";?>>OOR</option>
</select>
For the second part is more complicated tho. You could do some javascript magic setting it to the propper value:
var element = document.getElementById('market');
element.value = "<?php echo(isset($_POST['market'])&&($_POST['market']!='')?$_POST['market']:'');?>";

Its easy to do.
Once you submit your form (to the same page only), you can check for the submit condition in CF and run a JavaScript function that takes the submitted values.
Submit the form
fn populateSelect() populates the select boxes
CFIF checks if the page load is a form submission
runs the fn afterFormSubmitSetSelectedValues(fenv, market) values
<form method="post">
<select id="fenv" NAME="fenv">
<option value="OOR2">OOR2</option>
<option value="OOR">OOR</option>
</select>
<select id="market" name="market"></select>
<input type="submit" name="submit" value="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script language="javascript">
var OORs = ["1","2","3","4"], //declaring the OORs
NoOORs = ["A","B","C"], //the NoOORs
fenvRef = $('#fenv'), //creating the ref using jQuery Once, so we do not need to do a DOM query again and again
marketRef = $('#market'), // same for market
populateSelect = function () {
var fenv = fenvRef.val(),
marketvalues = [];
marketRef.html('');
if ('OOR' === fenv) {
$.each(OORs, function(index,t) {
marketRef.append("<option value='" + t + "'>" + t + "</option>");
marketvalues.push(t);
});
} else {
$.each(NoOORs, function(index,t) {
marketRef.append("<option value='" + t + "'>" + t + "</option>");
marketvalues.push(t);
});
}
},
afterFormSubmitSetSelectedValues = function (fenv, market) { // upon reload this Fn() will set the selected values
fenvRef.val(fenv);
if ('OOR' === fenv) {
populateSelect();
}
marketRef.val(market);
};
$(function() {
fenvRef.change(function() {
populateSelect();
});
});
// this will populate the initial values
populateSelect();
<cfif isDefined('form') AND structKeyExists(form, 'submit')>
//only executed if the form is previously submitted
afterFormSubmitSetSelectedValues('<cfoutput>#form.fenv#</cfoutput>', '<cfoutput>#form.market#</cfoutput>');
</cfif>
</script>
Good luck!

Select Statement to loop through another javascript

Okay So I have a select statement that needs to populate a loop in a javascript. I have very very basic knowledge of JS. I have some very basic coldfusion here that I am using. Problem is one is client side and the other server-side.
I need the first select statement to loop through where my cfloop is inside the javascript. I need to somehow change that to a javascript loop (where it says $(document).ready(function(){). I don't know how. Can anyone help?
<cfoutput>
<script type='text/javascript' src='/jquery-1.8.2.js'></script>
<script type="text/javascript">
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
}
</script>
</head>
<body>
<cfquery name="Types" datasource="DSN">
SELECT Taking.*, Type.*
FROM Taking
INNER JOIN Type ON Taking.Taking_TypeID = Type.Type_ID
ORDER BY Type_ID
</cfquery>
<form>How many to change?
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<cfloop index="ABC" from="1" to="12" step="1">
<option value="#ABC#">#ABC#</option>
</cfloop>
</select>
<input type="text" name="hiddenInput" id="hiddenInput" value="" />
</form>
<br>
<br>
<cfset Changing=4>
<script type="text/javascript">
$(document).ready(function(){
<cfloop index="I" from="1" to="#Changing#" step="1">
$('.box#I#').hide();
$('##dropdown#I#').change(function() {
$('.box#I#').hide();
$('##div' + $(this).val()).show();
});
</cfloop>
});
</script>
<form>
<cfloop index="J" from="1" to="#Changing#" step="1">
<select id="dropdown#J#" name="dropdown#J#">
<option value="0">Choose</option>
<cfloop query="Types" startrow="1" endrow="#Types.recordcount#">
<option value="area#J##Type_ID#">Change over #Type_Name#</option>
</cfloop>
</select>
<br>
<cfloop query="Types" startrow="1" endrow="#Types.recordcount#">
<div id="divarea#J##Type_ID#" class="box#J#">
<cfquery name="GetQuestions" datasource="DSN">
SELECT Questions.*
FROM Questions
WHERE Questions_OrgID=1
AND Questions_TypeID=#Types.Type_ID#
ORDER BY Questions_Rank
</cfquery>
<cfloop query="GetQuestions">
#Questions_Question#<br>
</cfloop>
</div>
</cfloop>
<br>
<br>
</cfloop>
</form>
</cfoutput>

I'm not entirely sure what you're trying to do. However you could turn something like this:
$(document).ready(function(){
<cfloop index="I" from="1" to="#Changing#" step="1">
$('.box#I#').hide();
$('##dropdown#I#').change(function() {
$('.box#I#').hide();
$('##div' + $(this).val()).show();
});
</cfloop>
});
Into something like:
$(document).ready(function(){
for (var i = 1; i <= #Changing#; i++)
{
$('.box' + i).hide();
$('##dropdown' + i).change(function() {
$('.box' + i).hide();
$('##div' + $(this).val()).show();
});
}
});
Update: in fact it sounds like it's entirely a JS solution?
function changeHiddenInput (objDropDown) {
for (var i = 1; i <= objDropDown.value; i++)
{
$('.box' + i).hide();
$('##dropdown' + i).change(function() {
$('.box' + i).hide();
$('##div' + $(this).val()).show();
});
}
}

Function is not defined - jsf/javascript

I'm not able to call my javascript function. I've tried in the onChange SelectMenu now and tag ajax, but both are giving the following message:
Message: 'sumarFilas' is not defined.
Follows function and jsf with the function call:
<script language="javascript">
var numfilasRelacion=1;
var form=document.theForm;
var valorNRN="";
function sumaRelacion() {
var miTablaRelacion = document.getElementById("form:j_idt115_panel");
var fila = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
var celda3 = document.createElement("td");
var celda4 = document.createElement("td");
var celda5 = document.createElement("td");
numfilasRelacion=miTablaRelacion.getElementsByTagName("tr").length + 1 ;
celda1.innerHTML = "<p:inputText id='inicioRango' />";
celda2.innerHTML = "<p:inputText id='finalRango' />";
celda3.innerHTML = "<p:inputText id='numeroGrupoId' />";
celda4.innerHTML = "<p:inputText id='checkpto'/>";
celda5.innerHTML = "<p:inputText id='checkptoH'/>";
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
miTablaRelacion.appendChild(fila);
}
function restarFilas(rangos) {
var miTablaRelacion = document.getElementById("form:j_idt115_panel");
var i = numfilasRelacion-1;
do{
miTablaRelacion.deleteRow(i);
numfilasRelacion=numfilasRelacion-1;
i=i-1;
}
while (miTablaRelacion.rows.length != rangos)
}
function sumarFilas(){
alert("sumarFilas");
var numfilas=numfilasRelacion;
var rangos = document.getElementById("form:j_idt115_panel").value;
if(rangos>numfilas){
for(var i=0;rangos-numfilas>i;i++){
sumaRelacion();
}
}else{
restarFilas(rangos);
}
}
</script>
The jsf:
<h:outputText value="Nº Intervalo a Portar:" />
<p:selectOneMenu value="#{bean.parametro.intervalo}">
<f:selectItem itemLabel="1" itemValue="1" />
<f:selectItem itemLabel="2" itemValue="2" />
<f:selectItem itemLabel="3" itemValue="3" />
<f:selectItem itemLabel="4" itemValue="4" />
<f:selectItem itemLabel="5" itemValue="5" />
<f:selectItem itemLabel="6" itemValue="6" />
<f:selectItem itemLabel="7" itemValue="7" />
<f:selectItem itemLabel="8" itemValue="8" />
<f:selectItem itemLabel="9" itemValue="9" />
<f:selectItem itemLabel="10" itemValue="10" />
<f:ajax event="change" onevent="sumarFilas"></f:ajax>
</p:selectOneMenu>
<h:panelGrid columns="6" style="margin-bottom:10px" cellpadding="5"
id="pgrid121">
<h:outputText value="Portabilidade Grupo" id="pg1" />
<p:selectBooleanCheckbox
value="#{bean.parametro.portabilidadeGrupo}" id="pg11" />
<h:outputLabel for="numInicial1" value="Nº Inicial Int:" id="ni1" />
<p:inputText id="numInicial1" value="#{bean.parametro.numInicial}" />
<h:outputLabel for="numFinal1" value="Nº Final Int:" id="nf1" />
<p:inputText id="numFinal1" value="#{bean.parametro.numFinal}" />
<h:outputLabel for="idGrupo1" value="Id do Grupo:" id="ig1" />
<p:inputText id="idGrupo1" value="#{bean.parametro.idgrupo}" />
<h:outputText value="PTO" id="pt1" />
<p:selectBooleanCheckbox value="#{bean.parametro.pto}" id="pt11" />
</h:panelGrid>
Thanks!

You try to generate JSF code with javascript. Javascript runs after the server process the whole jsf page, generate html, and then sends the rendered html response to the browser. Browser could not process JSF code itself, it is completely out of JSF lifecycle.

Try to change your function as follows
function sumarFilas(data){
if (data.status === 'success') {
alert("sumarFilas");
var numfilas=numfilasRelacion;
var rangos = document.getElementById("form:j_idt115_panel").value;
if(rangos>numfilas){
for(var i=0;rangos-numfilas>i;i++){
sumaRelacion();
}
}else{
restarFilas(rangos);
}
}
}
Let me know if it works for you...
Also , take a look a this BalusC answer
ajax call in jsf 2.0 (myfaces), the onevent javascipt function in the ajax tag gets called before the rendering is complete

How can I add values of form textbox using string ,for loop

hi guys i am new to js and html.I need a o/p as when click the button tat should show the all contents entered in form...
My code for giving alert of all entered data in single
how can I add values of form textbox using string ,for loop all should be only in javascript...or else give your own code with the conditions i said....
<html>
<head>
<title>elements in a form</title>
<script type="text/javascript">
function processFormData()
{
var len= document.getElementsByTagName('name');
var str1=null;
for(i=0;i<=len;i++)
{
var str=(subscribe.name[i].value);
str=str1+str;
}
alert(str);
}
</script>
</head>
<body>
<form name ="subscribe" >
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name" value="name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email" value="mail"></p>
<input type="button" value="submit" onclick="processFormData()">
</form>
</body>
</html>

Try that for a start
var len= document.getElementsByTagName('input').length;
// add that you want the number of element
// Change 'name' for 'input' when using 'name' you are looking for <name in the HTML
// if you want the element with the name ABC use getElementsByName()
var str1='';
for(i=0;i<=len;i++)
{
var str=(subscribe[i].value);
str1=str1+str;
}
alert(str1);
jsFiddle example (in jQuery for the calling of the function) : http://jsfiddle.net/DavidLaberge/HPuhg/1/

<html>
<head>
<title>elements in a form</title>
<script type="text/javascript">
var str1=null;
function processFormData()
{
var len= document.getElementsByTagName('name').length;
for(i=0;i<=len;i++)
{
var str=(subscribe.name[i].value);
str1=str1+str;
}
alert(str1);
}
</script>
</head>
<body>
<form name ="subscribe" >
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name" value="name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email" value="mail"></p>
<input type="button" value="submit" onclick="processFormData()">
</form>
</body>
</html>
you have just minor mistake that is you used str in place of str1; Now use the above code.

Try something like:
function processFormData() {
var inputs = document.getElementsByTagName("input"),
i,
len,
stringBuffer = [],
str;
for (i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type.toLowerCase() === "text") {
stringBuffer.push(inputs[i].value);
}
}
str = stringBuffer.join(""); // str contains concatenated values of all inputs
}

Try this:
function processFormData()
{
var len= document.getElementsByTagName('input').length;
var str = '';
for(i=0;i<len-1;i++)
{
str += document.subscribe[i].value;
}
alert(str);
}