Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery.form resetForm() isn't resetting a select box to default selection

Tags:

jquery

I have a function that clears all the elements inside a span id. clearForm() works but resetForm() does not.

`<script type="text/JavaScript">`  
`    $(function hideMe() { ` 
`        for(i=0;i<arguments.length;i++) {`  
`        $("#"+arguments[i]).clearForm().fadeOut();`  
`    }`  
`    });`  
`</script>`  
`<html>`  
`...<td><input type="radio" name="third_party" id="third_partyNo" value="No" onClick="hideMe('party_integ');" />No</td>`  
'...'  
`<span id="party_integ" style="display:none">`  
`<table>`  
`    <tr>`  
` <td width="25%">System Type:</td>`  
` <td width="22%"><select name="system_type" id="system_type" class="style3" onChange="popCat(this.value);">`  
` <option value="" selected="selected">Select one</option>`  
` <option value="first">first</option>`  
` <option value="second">second</option>`  
` <option value="third">third</option>`  
` </select></td>`  
`    </tr>`  
`</table>`  
`</span>` 
like image 715
rojoartwork Avatar asked Dec 21 '25 00:12

rojoartwork


2 Answers

There's a lot wrong with your code.

  1. You're declaring your "hideMe" function in a way that won't work in browsers other than IE, and the IE behavior it relies on is badly broken anyway. You're setting the function up as a jQuery "ready" handler, not a global function. What you should do instead is bind an anonymous function to the "click" event for your radio button. You can do that in the "ready" handler.

  2. The "clearForm" function — what is that? Where is it defined?

  3. As noted in the comment, putting a table inside a span is wrong. Use a <div> if you need a container for the table.

  4. To reset a form, there's a native "reset" function on <form> elements. That said, there is no <form> element in your page. It's not really correct to have input elements without a form element, and you won't be able to do a reset without a form anyway.

like image 149
Pointy Avatar answered Dec 22 '25 13:12

Pointy


$("#"+arguments[i]).clearForm()

clearForm isn't the same thing as resetForm.

resetForm sets form fields back to the value​s they had when the page was loaded, ie. the same as were set in the value="x" attribute. It only works on <form> elements (not the <span> you have at the moment) as it is a largely pointless wrapper for the JavaScript form.reset() method.

(One could potentially re-write resetForm to work on non-forms by manually setting value back to defaultValue on form fields, and the same with defaultChecked and defaultSelected. But that's not what it's doing at the moment.)

clearForm, on the other hand, sets the values of all inputs inside the element to blank, whatever element it is. But how can you remove the value of a <select> box? It doesn't make any sense; you can't have ‘no option selected’ in a single-select drop-down, unless it contains no options at all.

jQuery.form does seem to be trying to get ‘no option selected’, but it'll never work. line 610:

    else if (tag == 'select')
        this.selectedIndex = -1;

You can't set selectedIndex to -1. You could try changing this code to set it to 0 to select the first option instead. (This would still be insufficient for select-many boxes though.)

From this quick look at the jQuery.form code, my suspicion is that it isn't really very good.

like image 28
bobince Avatar answered Dec 22 '25 13:12

bobince



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!