Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 441
  • Last Modified:

OnClick or Onsubmit, perform query???

Hi all,

Is there a way to have a query performed only after the user has clicked on a button on the page?

My page displays a list output from the query, and the user can click checkboxes on this list and choose an action to perform on the items in the list (like "set status", etc). The complication is that it needs to show the results on the same page-- the query is the same, it's just that what is returned will be different. So what I'm looking for a way to run the update/insert query when the user clicks the button and then refresh the page.

I know the results can be sent back to the same page via a form, but I've not been able to send the checkbox selections along, and it seems that my above approach would be easier.

Any ideas?

Thanks.

ps- I feel bad that I only have five points to award. I shot my wad on the last question...
0
natG
Asked:
natG
1 Solution
 
HamdyHassanCommented:
I think the simple solution is let the page call itself and you can use form.action field to control the logic.


about "send the checkbox selections along" check the following topic
http://www.experts-exchange.com/Web/WebDevSoftware/ColdFusion/Q_20546273.html


0
 
TallerMikeCommented:
Just to elaborate on HamdyHassan's point:

Here's your query on the page:

<cfquery name="myQuery>
  SELECT *
  FROM items
</cfquery>

Here is your output of the items:

<cfoutput query="myQuery">
  <input type="checkbox" name="item_id" value="#item_id#">item_text<br />
</cfoutput>

Here are some buttons that you can select:

<input type="button" value="Update Status" onclick="updateStatus();">
<input type="button" value="Delete" onclick="deleteItems()">

Here are the functions they call:

function updateStatus()
  {
  var FormName = document.forms[0];
  document.newStatus.value = prompt("Enter a new status");
  FormName.formAction.value = "updateStatus";
  FormName.submit();
  }

function deleteItems()
  {
  if (confirm("Are you sure you want to delete these items?")
    {
    var FormName = document.forms[0];
    FormName.formAction.value = "updateStatus";
    FormName.submit();
    }
  }

These are some hidden inputs you'll want in your form:

<input type="hidden" name="formAction" value="">
<input type="hidden" name="newStatus" value="">

********************************************************************************
********************************************************************************

OK, so now what's going to happen is, you're going to select some checkboxes, and hit one of the buttons. This will activate one of the functions which will change some values in the hidden fields for the form, and then submit the form to itself. So the last bit (or the first depending on how you look at it) that we need to add, is to put something at the top of the page to catch these values and do some processing:

<cfif IsDefined("form.fieldnames")>
  <cfswitch expression="#form.formAction#">

    <!--- do a dlete --->
    <cfcase value="delete">
      <cfquery name="dItems">
        DELETE items
        WHERE item_id IN (#form.item_id#)
      </cfquery>
    </cfcase>

    <!--- Do an update --->
    <cfcase value="updateStatus">
      <cfquery name="uItems">
        UPDATE items
        SET status = '#form.newStatus#'
        WHERE item_id IN (#form.item_id#)
      </cfquery>
    </cfcase>
  </cfswitch>
</cfif>
0
 
ericm123Commented:
Here is an example :

<!--- When query is submited, update --->
<cfif IsDefined("go")>
  <!--- Use post variable "ckb" to update --->
  <cfquery ...>
    update ...
    where ...
  </cfquery>
</cfif>

<html>
  <body>
    <!--- Here is the "select" query --->
    <cfquery ...>
      select ...
    </cfquery>

    <!--- Here starts the form --->
    <form method="post" action="">
      <!--- Here print the result into the form --->
      <input type="checkbox" name="ckb" ...>
      ...
      <input type="submit" name="go" ...>
    </form>
  </body>
</html>

Explanation : when you click the submit button, the form is posted along with variable "ckb" (a comma separated list of the checked box's values) and variable "go".

At the beginning of your script, before printing, you detect that "go" has been clicked and you then update the table.

This update will happen BEFORE the select... which is what you want !

Hope that helps !

E.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
natGAuthor Commented:
Thanks very much for the quick responses.

Taller Mike, I have a few questions:

1. Are you taller than someone in particular or just taller than the average person?

2. There won't be a pop up prompt for user to enter change of status- s/he will select it from a drop-down. How would you handle that (sorry for the elementary questions-- I'm new to JS)?

3. On the process section with the update query-- I don't see how you are looping through all the checkboxes- don't I need to do that?

Thanks again for such a detailed response.

Nat
0
 
TallerMikeCommented:
Most importantly:

1. I'm afraid I cannot reveal the details of my height, next question!

2. No problem, rather than using the prompt, we'd do something like so:

Forget about the hidden input for newStatus. We'll create a select called status like so:

<select name="status">
  <option value"short">Short Mike</option>
  <option value"tall">Tall Mike</option>
  <option value"taller">Taller Mike</option>
</select>

Then change the JS function like so:

function updateStatus()
 {
 var FormName = document.forms[0];
 FormName.formAction.value = "updateStatus";
 FormName.submit();
 }

And finally we process like so:

<cfquery name="uItems">
  UPDATE items
  SET status = '#form.status#'
  WHERE item_id IN (#form.item_id#)
</cfquery>

******************************************************************************************************************************
******************************************************************************************************************************

3. You're right...I'm not looping through the checkboxes. You see the checkboxes all have the same name, so when they are submitted, the form submits the values of those checked as a comma delimited list. Take the following example:

<input type="checkbox" name="myCheck" value="1"> One
<input type="checkbox" name="myCheck" value="2"> Two
<input type="checkbox" name="myCheck" value="3" checked> Three
<input type="checkbox" name="myCheck" value="4"> Four
<input type="checkbox" name="myCheck" value="5" checked> Five
<input type="checkbox" name="myCheck" value="6" checked> Six

When this is submitted, we'll get the following:

form.myCheck=3,5,6

So rather than looping through these values, simply use the IN attribute in your SQL to UPDATE all the records that have that ID. This is much faster than looping through the checkboxes and will provide the same effect.
0
 
natGAuthor Commented:
OK- that looks good- I need to study it but I won't have time until tomorrow evening. I have a new challenge that just arose for the same app I'm working on. I just posted a question about it. Please (everyone) take a look at it and tell me if there's a simple solution.

TallerMike, ericm123, and  HamdyHassan, thank you for the responses to this thread. I am going to get back on this as soon as I get a chance (and get some sleep).

NG
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now