Solved

ColdFusion Need help configuring a clear button on a form

Posted on 2014-03-13
17
789 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
[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
  • 9
  • 7
17 Comments
 
LVL 52

Expert Comment

by:_agx_
ID: 39926888
"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
ID: 39927410
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
ID: 39927487
(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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 52

Expert Comment

by:_agx_
ID: 39927570
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
ID: 39927599
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_
ID: 39927637
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
ID: 39927732
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_
ID: 39927770
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
 

Author Comment

by:DJPr0
ID: 39927843
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_
ID: 39927867
(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_
ID: 39927939
Does any jquery work from the local IP?
0
 

Author Comment

by:DJPr0
ID: 39928037
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_
ID: 39928051
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
ID: 39928081
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
ID: 39928133
> 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 16

Assisted Solution

by:Gurpreet Singh Randhawa
Gurpreet Singh Randhawa earned 25 total points
ID: 39928946
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
ID: 39929775
Thanks _agx_!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

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 …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 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