trainmom
asked on
How to use Javascript to submit page in background that queries database and pulls info to fill in the remaing form?
I would like to be able to do this, without refreshing page and without submitting to a new form.
After user fills in color type via radio button, have a JS to query a database and find all matches for the color entered and
return those matches so that remaining form fields are filled in.
I only need this for IE browser (not any of the others).
Is there a quick way to do this?
Thanks In Advance.
Trainmom
After user fills in color type via radio button, have a JS to query a database and find all matches for the color entered and
return those matches so that remaining form fields are filled in.
I only need this for IE browser (not any of the others).
Is there a quick way to do this?
Thanks In Advance.
Trainmom
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
How abt having a cfm page in one of the frame - that is just sized 1x1 pixels.
so once the user fills in the details - this page inside the frame can do the necessary processing for u !
It cld then refresh the other page inside ur frame window to show the relavent matches.
let me know ...
K'Rgds
Anand
so once the user fills in the details - this page inside the frame can do the necessary processing for u !
It cld then refresh the other page inside ur frame window to show the relavent matches.
let me know ...
K'Rgds
Anand
The point was to do a submit WITHOUT refreshing the page. There are a lot of methods that work if you refresh the page, but this is one of the only ways to do it without refreshing the page.
Hi,
Here is what u can do ...
The page wld consist of two frames.
Left Frame: This would be hidden ( say keep width of this as zero ). This frame will consists of all the processing which is required to display the page. This would not contain ANY HTML interface.
RightFrame: This would purely contain the HTML interface with some division's. When the page is loaded, the Right frame ( only being HTML ) loads very fast giving an idea that the page loaded quicky. U can show the indicator GIF file saying "Processing ... Please wait .." or something like that. When the Left frame processing is finished, it would update the Right frame with proper values.
Hope this is what u require ...
Rgds,
Nazim M
Here is what u can do ...
The page wld consist of two frames.
Left Frame: This would be hidden ( say keep width of this as zero ). This frame will consists of all the processing which is required to display the page. This would not contain ANY HTML interface.
RightFrame: This would purely contain the HTML interface with some division's. When the page is loaded, the Right frame ( only being HTML ) loads very fast giving an idea that the page loaded quicky. U can show the indicator GIF file saying "Processing ... Please wait .." or something like that. When the Left frame processing is finished, it would update the Right frame with proper values.
Hope this is what u require ...
Rgds,
Nazim M
ASKER
mrichmon.
Sorry it has taken me so long to test this out, but your explanations were so Great and logical...
However, when I (today) tried to make it work... the first error is in this line
ISBN:<input type="text" name="ISBN_1" id="ISBN_1" onBlur="LookupISBN(#i#);">
It burps on the # sign.
I removed the # sign... and now I don't exactly know what we are passing with the i variable.
Thanks
Carol
Sorry it has taken me so long to test this out, but your explanations were so Great and logical...
However, when I (today) tried to make it work... the first error is in this line
ISBN:<input type="text" name="ISBN_1" id="ISBN_1" onBlur="LookupISBN(#i#);">
It burps on the # sign.
I removed the # sign... and now I don't exactly know what we are passing with the i variable.
Thanks
Carol
ASKER
mrichmon,
one more thing, i set up a test db exactly like yours (ISBN, author, publisher, etc) to test this out
and changed the references
from:
eval("document.TextbookAdo
to
eval("document.myform.Auth
Can you explan a little more about passing the i variable in this
stagement
ISBN:<input type="text" name="ISBN_1" id="ISBN_1" onBlur="LookupISBN(#i#);">
Thanks.... I know this will work with a little more tweaking....
Carol
one more thing, i set up a test db exactly like yours (ISBN, author, publisher, etc) to test this out
and changed the references
from:
eval("document.TextbookAdo
to
eval("document.myform.Auth
Can you explan a little more about passing the i variable in this
stagement
ISBN:<input type="text" name="ISBN_1" id="ISBN_1" onBlur="LookupISBN(#i#);">
Thanks.... I know this will work with a little more tweaking....
Carol
ASKER
ok, after some sleep, I now think that the #i# is part of some cflooping and cfoutput functions that you do since you have dynamic fields.
trainmom
trainmom
Yep the passing in of #i# lets the javascript know which field to write the results back to since there could be any number of fields with the prefix of "Author_"
Well, I'm seeing a lot of code for something that I think might be pretty simple [correct me if I'm wrong]
I think this might be the/a solution:
##### begin html page #####
<html><head><title>test color selection</title></head>
<body>
<!---// iframe were color will be sent to, and form values will be filled in from //--->
<iframe src="about:blank" id="hiddenframe" width=1 height=1 frameborder=1 style="display:none"></ifr
<!---// script that submits the color via query string to processing page //--->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function fillform(colorvalue){
document.frames['hiddenfra
}
//-->
</SCRIPT>
<!---// example form: the onClick fires the js action //--->
<form action="somepage.cfm" name="colorform">
choose color:<br>
<input type="radio" name="color" id="color1" value="FF0000" onClick="fillform(this.val
<label for=color1>Red</label><br>
<input type="radio" name="color" id="color2" value="00FF00" onClick="fillform(this.val
<label for=color2>Green</label><b
<input type="radio" name="color" id="color3" value="0000FF" onClick="fillform(this.val
<label for=color3>Blue</label><br
Some form values to be filled in:<br>
<input type=text name=fillme1 size=10><br>
<input type=text name=fillme2 size=10><br>
</form>
</body></html>
###### end html page ####
### begin coldfusion page 'fill_colorform.cfm' #####
<!---// if a color is passed to this page //--->
<cfif IsDefined("url.color")>
<!---// you can do some checking for valid hex color... //--->
<!---// query the DB //--->
<cfquery name="findcolor" datasource="yourDB">
SELECT name, description
FROM colors
WHERE color = '#url.color#';
</cfquery>
<!---// output the results in js, so the (parent) form will be filled
In this example, I assume there will be only one record found...
(if more are found, only the last record will fill the form) //--->
<cfoutput query="findcolor">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if(!parent){ alert('geen parent'); }
else if (!parent.document){ alert('geen parent.document'); }
else if (!parent.document.colorfor
var theform = parent.document.colorform;
theform.fillme1.value = '#findcolor.name#';
theform.fillme2.value = '#findcolor.description#';
// etc.
//-->
</SCRIPT>
</cfoutput>
</cfif>
<!---// if no color is passed to this form, or no records were found, we will clear the form //--->
<cfif NOT IsDefined("url.color") OR findcolor.recordcount EQ 0>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var theform = parent.document.colorform;
theform.fillme1.value = '';
theform.fillme2.value = '';
// etc.
//-->
</SCRIPT>
</cfif>
###### end coldfusion page ######
#### tabel designed to work with example ####
table: colors,
columns: color,name, description (all text)
####
Hope this is the solution you were waiting for...
I think this might be the/a solution:
##### begin html page #####
<html><head><title>test color selection</title></head>
<body>
<!---// iframe were color will be sent to, and form values will be filled in from //--->
<iframe src="about:blank" id="hiddenframe" width=1 height=1 frameborder=1 style="display:none"></ifr
<!---// script that submits the color via query string to processing page //--->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function fillform(colorvalue){
document.frames['hiddenfra
}
//-->
</SCRIPT>
<!---// example form: the onClick fires the js action //--->
<form action="somepage.cfm" name="colorform">
choose color:<br>
<input type="radio" name="color" id="color1" value="FF0000" onClick="fillform(this.val
<label for=color1>Red</label><br>
<input type="radio" name="color" id="color2" value="00FF00" onClick="fillform(this.val
<label for=color2>Green</label><b
<input type="radio" name="color" id="color3" value="0000FF" onClick="fillform(this.val
<label for=color3>Blue</label><br
Some form values to be filled in:<br>
<input type=text name=fillme1 size=10><br>
<input type=text name=fillme2 size=10><br>
</form>
</body></html>
###### end html page ####
### begin coldfusion page 'fill_colorform.cfm' #####
<!---// if a color is passed to this page //--->
<cfif IsDefined("url.color")>
<!---// you can do some checking for valid hex color... //--->
<!---// query the DB //--->
<cfquery name="findcolor" datasource="yourDB">
SELECT name, description
FROM colors
WHERE color = '#url.color#';
</cfquery>
<!---// output the results in js, so the (parent) form will be filled
In this example, I assume there will be only one record found...
(if more are found, only the last record will fill the form) //--->
<cfoutput query="findcolor">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if(!parent){ alert('geen parent'); }
else if (!parent.document){ alert('geen parent.document'); }
else if (!parent.document.colorfor
var theform = parent.document.colorform;
theform.fillme1.value = '#findcolor.name#';
theform.fillme2.value = '#findcolor.description#';
// etc.
//-->
</SCRIPT>
</cfoutput>
</cfif>
<!---// if no color is passed to this form, or no records were found, we will clear the form //--->
<cfif NOT IsDefined("url.color") OR findcolor.recordcount EQ 0>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var theform = parent.document.colorform;
theform.fillme1.value = '';
theform.fillme2.value = '';
// etc.
//-->
</SCRIPT>
</cfif>
###### end coldfusion page ######
#### tabel designed to work with example ####
table: colors,
columns: color,name, description (all text)
####
Hope this is the solution you were waiting for...
oops...
I left in some checks which shouldn't be there:
In the example cf page, the first js block, leave out these first three sentences:
if(!parent){ alert('geen parent'); }
else if (!parent.document){ alert('geen parent.document'); }
else if (!parent.document.colorfor
(Not that they will do harm)
I left in some checks which shouldn't be there:
In the example cf page, the first js block, leave out these first three sentences:
if(!parent){ alert('geen parent'); }
else if (!parent.document){ alert('geen parent.document'); }
else if (!parent.document.colorfor
(Not that they will do harm)
The HTML page simply has your form, a function that gets called on the user action, and the function that fills in the return results. So the 2 Javascript functions in the head and the form are the only things that need to be modified.
The last CF page - which is really short - only needs to have the query modified to pull your results (notice the parameters get passed via URL - but as this is done in the background the user never sees the URL so it can be as messy as necessary). Then the call to the last javascript function back on the main page is how you pass back the data.
SO really there are 3 pages involved - but only 2 of those need to be modified.