asked on

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.

_agx_

"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/

D J

ASKER

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

SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

_agx_

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

D J

ASKER

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.

_agx_

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

D J

ASKER

Ran the code above on my server and the "Clear All" button does not affect any of the inputs.

I'm using CF 10.

_agx_

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?

D J

ASKER

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.

_agx_

(Edit) Maybe security settings? If you're not seeing any errors in the javascript console, I'm not sure what it could be...

_agx_

Does any jquery work from the local IP?

D J

ASKER

No, my sort jquery is not working.
We moved to a new server recently and I don't think Java is installed.

_agx_

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

D J

ASKER

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.

ASKER CERTIFIED SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION