Custom Reset Button

Forum Moderators: open

Message Too Old, No Replies

Custom Reset Button

foshae

2:59 pm on Feb 19, 2004 (gmt 0)

I have a form that I am building and would like to create a "custom reset button" that only resets a specific fieldset or fields - not the entire form. Is this possible and how would I do this? Thank you in advance for your help.

Alternative Future

3:06 pm on Feb 19, 2004 (gmt 0)

Hello and welcome to WebmasterWorld foshae,

You can use the onclick event from the submit button, and then reset and leave the values you wish using the DOM.

Something like this:
function resetOnlyThese(){
document.forms[0].elements["mytextbox"].value == "";
}

HTH,

-gs

foshae

4:09 pm on Feb 19, 2004 (gmt 0)

Thank you for your help, but for some reason the reset button actually submits the form instead of resetting the specified fields. Also, how do I specify several fields? I'm sorry for asking all of these questions - I am a novice at Javascript

:[smilestopper]o(

Alternative Future

4:14 pm on Feb 19, 2004 (gmt 0)

Oops sorry mistake on my part there...

function resetOnlyThese(){
document.forms[0].elements["textbox1"].value == "";
document.forms[0].elements["textbox2"].value == "";
document.forms[0].elements["textbox3"].value == "";
}

Let's know if that works for you?

-gs

Alternative Future

4:24 pm on Feb 19, 2004 (gmt 0)

Here is a working one, i had a few errors in the last ->

<html>
<head><title></title>
<script language=javascript>
function resetOnlyThese(){
document.getElementById('textbox1').value = "";
document.getElementById('textbox2').value = "";
document.getElementById('textbox3').value = "";
}
</script>
</head>
<body>
<form>
<input type="text" id="textbox1"><br>
<input type="text" id="textbox2"><br>
<input type="text" id="textbox3"><br>
<input type="text" id="textbox4">
<input type="button" value="Reset" onclick="resetOnlyThese()">
</form>
</body>
</html>

This example will clear the contents of the first 3 text boxes and leave the 4th one alone.

HTH,

-gs

foshae

6:18 pm on Feb 19, 2004 (gmt 0)

That works great! Thank you so much.
One more question, how would I reset radio buttons, check boxes and dropdown lists to their original sate?

Thanks again for your help!

-foshae

foshae

2:51 pm on Feb 20, 2004 (gmt 0)

Does anyone know how to reset specific radio groups, dropdown lists and check boxes? I do not want to use the standard reset button because it resets everything. Since my form is so long, I would like to give the end-user the option to reset certain sections of the form. I was able to targert specific text fields with the above script, but I am having trouble with the other form objects.

Thank you in advance for your help.

-foshae :o)

diades

4:44 pm on Feb 20, 2004 (gmt 0)

Hi foshae

To reset some to their "original" use the defaultValue property. For radio controls, you have to work with the radio "group" i.e., the radios that are collectively under the same name.


fumction resetRadios(oRadGrp){
 for(var i = 0;i < oRadGrp.length;iu++) oRadGrp[i].value = oRadGrp[i].defaultValue;
}

to do do for a select you wlll need to know the original "selected" value. The easiest way would be to store it in a global var and then just reference it:


var selOneIndex = 2
function resetSelect(oSel){
 oSel.selectedIndex=selOneIndex
}

sigh! I do wish these forums showed the previous messages when replying it would make life so much easier.

diades

4:46 pm on Feb 20, 2004 (gmt 0)

Thats the one that I forgot, checkboxes. They can ve handled as a single entity with the defaultValue property.

foshae

2:53 pm on Feb 23, 2004 (gmt 0)

Thanks for your help diades. I'm embarrassed to say this, but I am a novice at JavaScript. Would you be able write a working example of a form that can reset a specific dropdown list, radio group and check box? I just tried to implement your example and didn't have any luck.

:o(

Alternative Future

3:26 pm on Feb 23, 2004 (gmt 0)

<html>
<head><title></title>
<script language=javascript>
function resetOnlyThese(){
document.getElementById('textbox1').value = "";
document.getElementById('textbox2').value = "";
document.getElementById('textbox3').value = "";
document.getElementById('radio1').checked = false;
document.getElementById('radio2').checked = false;
document.getElementById('checkbox').checked = false;
document.getElementById('checkbox2').checked = false;
document.getElementById('select1').selectedIndex = 0;
}
</script>
</head>
<body>
<form>
<input type="radio" id="radio1" name="radiogroup">
<input type="radio" id="radio2" name="radiogroup"><br>
<input type="checkbox" id="checkbox">One <input type="checkbox" id="checkbox2">Two<br>
<select id="select1">
<option>Please Select</option>
<option>Selected</option>
</select><br>
<input type="text" id="textbox1"><br>
<input type="text" id="textbox2"><br>
<input type="text" id="textbox3"><br>
<input type="text" id="textbox4">
<input type="button" value="Reset" onclick="resetOnlyThese()">
</form>
</body>
</html>

Alternative Future

10:16 pm on Feb 23, 2004 (gmt 0)

Hi foshae,

Did the example work for you?

I was a little busy at work and didn't get a chance to add anymore to the example...

-George

mylungsarempty

12:10 am on Feb 24, 2004 (gmt 0)

i would never include a reset button on a form. i've never used one. i find it especially demeaning on extremely short forms. can't people just... reset things themselves? i use my 'delete' key...

just a thought =Z

don't mind me...

foshae

2:33 pm on Feb 24, 2004 (gmt 0)

Thanks George - your example works perfect. :o)

In responce to mylungsareempty, I agree that you do not need a "reset" button for short forms. However, the one I am creating is very long and has multiple sections to it. Giving the end-user the option to clear specific sections of the form creates a "user-friendly" interface. :o)

diades

3:04 pm on Feb 24, 2004 (gmt 0)

On the subject of reset buttons, they may well be required for even short forms as the components might have default values set for them. A reset button will reset to those values whereas a user may not remeber them. It also caters for the bone-idle:)

mylungsarempty

6:36 pm on Feb 25, 2004 (gmt 0)

good point.