Avatar of natG
natG
 asked on

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...
Web Servers

Avatar of undefined
Last Comment
natG

8/22/2022 - Mon
HamdyHassan

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
https://www.experts-exchange.com/questions/20546273/Update-a-Database-via-a-form-with-a-checkbox.html


ASKER CERTIFIED SOLUTION
TallerMike

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ericm123

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.
natG

ASKER
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
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
TallerMike

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.
natG

ASKER
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