?
Solved

OnClick or Onsubmit, perform query???

Posted on 2003-03-12
6
Medium Priority
?
434 Views
Last Modified: 2013-12-24
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
Comment
Question by:natG
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 9

Expert Comment

by:HamdyHassan
ID: 8121799
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
 
LVL 8

Accepted Solution

by:
TallerMike earned 500 total points
ID: 8122215
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
 
LVL 1

Expert Comment

by:ericm123
ID: 8122257
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
Get MySQL database support online, now!

At Percona’s web store you can order your MySQL database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card.

 

Author Comment

by:natG
ID: 8122290
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
 
LVL 8

Expert Comment

by:TallerMike
ID: 8122616
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
 

Author Comment

by:natG
ID: 8124948
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

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
What You Need to Know when Searching for a Webhost Provider
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question