Solved

ColdFusion Need help configuring a clear button on a form

Posted on 2014-03-13
17
732 Views
Last Modified: 2014-03-14
I have a search page with dynamic drop downs and input boxes which populates on the same page as the results.

I configured the search form to save the last input criteria to display in the search box with the results.

Problem: The clear or reset button works on a fresh search, however when a search is employed, displaying the last search criteria the clear button stops working.
 
What do I need to modify to click on a "Clear" button to clear all the input fields.
0
Comment
Question by:DJPr0
  • 9
  • 7
17 Comments
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
"reset" only restores the objects to the original values when the page was loaded. Since you're now pre-populating the form fields with the last selected item, "reset" seems to do nothing.

You need to make your own clear() function and call it onClick() of a regular button (not "reset"). The function could either hard code all the field names or use something dynamic like this:

http://www.electrictoolbox.com/jquery-clear-form/
0
 

Author Comment

by:DJPr0
Comment Utility
Need help implementing:
http://www.electrictoolbox.com/jquery-clear-form/

Not sure what I'm missing, here is a piece of code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }
    });
}
</script>

<cfform name="mycfform1"  method="post" >

 <td>
        <cfselect name="discipline1" style=width:150px;>
        <option value="ALL">ALL
         </option>
         <cfoutput query="DropDown1">
                     <option value="#DropDown1.ship#"
                     <cfif DropDown1.ship eq FORM.discipline1>selected</cfif>
           >  #DropDown1.ship#</option>
         </cfoutput>
       </cfselect>
        
 </td>

<input onclick="clear_form_elements(this.form)" type="button" value="Clear All" />

</cfform>

Open in new window

0
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 475 total points
Comment Utility
(EDIT) You need to decide how you want to handle select lists, and other elements.  Here's how you could reset the selection to "ALL" for single select lists, and for multiple - select nothing.  For textboxes, set the value to ""

function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            	$(this).prop('selectedIndex', -1); // nothing 
                break;
            case 'select-one':
            	$(this).prop('selectedIndex', 0); // first item
                break;
            case 'text':
                $(this).val('');
                break;
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }
    });
}

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
Do you have any of the other type of fields: checkboxes, radiobuttons, password? If yes, how do you want to handle them?
0
 

Author Comment

by:DJPr0
Comment Utility
I have one check box that I would like to remain unchecked. All the other input fields are dropdown, text and number.


Still nothing - no fields getting reset.
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
Hmm.. I made an edit. Maybe you're using the old code? Here's a complete stand alone test form. Try this:

<cfparam name="FORM.MyCheckbox" default="agree">
<cfparam name="FORM.MyTextbox" default="">
<cfparam name="FORM.Discipline1" default="">
<cfset DropDown1 = queryNew("")>
<cfset queryAddColumn(DropDown1, "ship", ["A","B","C"])>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            	$(this).prop('selectedIndex', -1);
            case 'select-one':
            	$(this).prop('selectedIndex', 0);
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
                this.checked = false;
                break;
            case 'radio':
                this.checked = false;
                break;
        }
    });
}
</script>

<cfform name="mycfform1"  method="post" >

	Single Select
    <cfselect name="discipline1" style=width:150px;>
        <option value="ALL">ALL
         </option>
         <cfoutput query="DropDown1">
                     <option value="#DropDown1.ship#"
                     <cfif DropDown1.ship eq FORM.discipline1>selected</cfif>
           >  #DropDown1.ship#</option>
         </cfoutput>
    </cfselect>
	<br>
    Textbox <cfinput type="text" name="myTextBox" value="#FORM.MyTextbox#"> 
	<br>
    Checkbox <cfinput type="checkbox" name="myCheckbox" value="agree" checked="#FORM.myCheckBox  eq 'agree'#"> 

	<input type="submit">
	<input onclick="clear_form_elements(this.form)" type="button" value="Clear All" />
</cfform>

Open in new window

0
 

Author Comment

by:DJPr0
Comment Utility
Ran the code above on my server and the "Clear All" button does not affect any of the inputs.

I'm using CF 10.
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
Ok if you ran the example exactly as is - then there's definitely something different/going wrong on your end... Works perfectly for me w/CF10 + IE and FF. What browser are you using? Any errors in the JS console? Are you positive the page wasn't cached/old version?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:DJPr0
Comment Utility
Not sure why...
When I connect using the local IP: http://10.10.100.10/test/Untitled-4.cfm
it doesn't work - when I connect remotely it works.
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
(Edit) Maybe security settings? If you're not seeing  any errors in the javascript console, I'm not sure what it could be...
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
Does any jquery work from the local IP?
0
 

Author Comment

by:DJPr0
Comment Utility
No, my sort jquery is not working.
We moved to a new server recently and I don't think Java is installed.
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
Ok, then that could explain why the sample page isn't working either. Well java would have to be installed for CF to run at all, but the jQuery stuff doesn't need java.

Maybe the linked javascript files aren't accessible? If the browser can't access the js code - obviously it can't execute it.  

- Did you look in your javascript console for errors?
- Can you access the script directly from the local IP? Could it be blocked by security/firewall rules?
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
0
 

Author Comment

by:DJPr0
Comment Utility
I don't see the Java console in FF or IE - need to download an addon?

No access for local IP. No internet access - need to check this out.
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 475 total points
Comment Utility
> No access for local IP. No internet access

Then that's your problem. The example (and probably your sort code as well) are using an external URL:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

... so no internet access - no jquery.  Instead of using an external URL, download the file(s) onto your local server, say store them in a "scripts" folder beneath your webroot. Then you can use use a local path and it'll always work, even if the box has no internet access.

<script type="text/javascript" src="/scripts/jquery.min.js"></script>


> I don't see the Java console in FF or IE

No, not java - javascript. In FF there used to be a separate javascript "Error Console" but I think it's integrated the FF's web console now. But it sounds like lack of internet access was the real issue.
0
 
LVL 15

Assisted Solution

by:myselfrandhawa
myselfrandhawa earned 25 total points
Comment Utility
open your webpage in firefox, click on the view source of the page

click on the jquery url, check if you get jquery file or 404 error.

if jquery url is giving you a 404 error, then you need to download the juery file from internet to save on local disk and use the following script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js">\x3C/script>')</script> 

Open in new window


the above will see if internet available get from cdn else use local jquery file
0
 

Author Closing Comment

by:DJPr0
Comment Utility
Thanks _agx_!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

728 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now