[Webinar] Streamline your web hosting managementRegister Today

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

ColdFusion Need help configuring a clear button on a form

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
DJPr0
Asked:
DJPr0
  • 9
  • 7
3 Solutions
 
_agx_Commented:
"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
 
DJPr0Author Commented:
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
 
_agx_Commented:
(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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
_agx_Commented:
Do you have any of the other type of fields: checkboxes, radiobuttons, password? If yes, how do you want to handle them?
0
 
DJPr0Author Commented:
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
 
_agx_Commented:
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
 
DJPr0Author Commented:
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
 
_agx_Commented:
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
 
DJPr0Author Commented:
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
 
_agx_Commented:
(Edit) Maybe security settings? If you're not seeing  any errors in the javascript console, I'm not sure what it could be...
0
 
_agx_Commented:
Does any jquery work from the local IP?
0
 
DJPr0Author Commented:
No, my sort jquery is not working.
We moved to a new server recently and I don't think Java is installed.
0
 
_agx_Commented:
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
 
DJPr0Author Commented:
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
 
_agx_Commented:
> 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
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
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
 
DJPr0Author Commented:
Thanks _agx_!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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