pass parameter from user choice to a query

[iccsi]

I have a CFSELECT on the form and link to a query.

I would like to fill details information when user select thew option.

The option is at client side, since user select the option which I need pass my query to get information to fill on the details form on the same form.

I tried to use following JavaScripts which fill the details information, but browser goes to the page which I want to fill the details informaiton on the same form.

function FillInfo()
{
/*Fill Details Information*/

  var url = 'ccdDetailsInfo.cfm?MyAccount=' + document.getElementById('frmEntry').lstNumber.value;
}

I tried to use iFrame, it works and fill on the same form, but everything under iFrame disappear like footer and all other controls in the table.

<iframe id="DetailsFrame"  src="ccdDetailsInfo.cfm"</iframe>

I tried to use CFINCLUDE the file, but it does not take the paramter from client side.

The problem is the query paramter is server side query.

I am looking for a way can pass the client data to server parameter to run the query and to fill details form.

I did some reasearch for this on Google, but no luck,

If you can give me some link regarding pass parameters between client and CF server would be appreciated,

Regards,

Iccsi,

[p_sim]

Use HTML select instead of cfselect; and use AJAX instead of iFrame.

See this link: http://www.w3schools.com/jquery/ajax_ajax.asp

Replace url:"demo_test.txt" with e.g. url:"get_data.cfm"

[iccsi]

Thanks for the message and help,

If I understand correctly, the sample read demo_test.txt and put the content on div1.

which I can read from external text file.

I want to pass my value on the select to my query parameter.

In this case, I need create an external file using my client page or I can read any variable on the demo_test.txt?

Please let me know if I am wrong,

Thanks again for helping,

Regards,

Iccsi,

[p_sim]

<!--- my_form.cfm --->

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">

jQuery(document).ready(function() {

          jQuery("#product_id").change(function() {

                    jQuery.ajax({

                              url: "get_detail.cfm?product_id=" + jQuery("#product_id").val()

                              , type: "get"

                              , success: function(result) {

                                        jQuery("#product_detail").html(result);

                              }

                    });

          });

});

</script>

<form method="post" action="">

          <select id="product_id">

                    <option value="1">Apple</option>

                    <option value="2">Banana</option>

                    <option value="3">Cherry</option>

          </select>

          <div id="product_detail"></div>

</form>

<!--- get_detail.cfm --->

<!--- You replace this with query --->

<cfswitch expression="#url.product_id#">

          <cfcase value="1">My color is red.</cfcase>

          <cfcase value="2">My color is yellow.</cfcase>

          <cfcase value="3">My color is dark red.</cfcase>

          <cfdefaultcase>Invalid product id</cfdefaultcase>

</cfswitch>

[iccsi]

Thanks for the information and help,

"get_detail.cfm?product_id=" + jQuery("#product_id")

If I understand correctly, jQuery create above link with parameter and

using CFINCLUDE to have  get_detail.cfm in Product_Detail div that get_detail.cfm will accept #product_id  parameter.

Please let me know if I am wrong,

Thanks again for helping,

Regards,

Iccsi,

[p_sim · Accepted solution]

jQuery("#product_id").val() -- is to get the value of selected option.

The value is concatenated to the "get_detail.cfm?product_id="

When get_detail.cfm is called, it will return a string as a "result" in the jQuery. Then, the result is inserted to the div tag which is "product_detail".

Go to jQuery documentation to learn more about ajax(), val(), and html(). The doc explains very clear and it has some examples how to use them.

[iccsi]

Thanks a million for helping and information,

regards,

iccsi,