Cannot reset this form. Weird!

php form reset javascript

[kristo5747]

Greetings!

I created this form that works like a charm, captures data in my db and sends email.

Suppose user Joe hits the RESET button before he clicks SUBMIT, all fields are reset. If Joe hits the RESET button AFTER he clicked SUBMIT (e.g. to make a new submission)...nothing gets reset.

Here's my code...

...  <form enctype="multipart/form-data" method="post" name="webform" onsubmit="return validate(this)" action="<?php echo $_SERVER['PHP_SELF'];?>">
   <h2>Title of request:</h2>
   <input type="text" tabindex="0" name="request_title" maxlength="255" size="62"
     value='<?php echo $_POST['request_title'];?>'
     ><br><br>
   <h2>Please describe your request in detail:</h2><br>
   <textarea tabindex="1" name="request_description" cols="87" rows="10" ><?php echo $_POST['request_description'];?></textarea>
   <table border="0" cellspacing="3" cellpadding="3">
    <tbody>
     <tr>
      <td><fieldset id="output"><legend>Output Options: </legend>
        <input type="checkbox" tabindex="2" id="chb0" name="check_output[]" value="CSV" <?php if(isset($_POST['check_output']) && in_array('CSV', $_POST['check_output'])) echo ' CHECKED ';?>>CSV<br>
        <input type="checkbox" tabindex="3" id="chb1" name="check_output[]" value="Excel" <?php if(isset($_POST['check_output']) && in_array('Excel', $_POST['check_output'])) echo ' CHECKED ';?>>Excel<br>
        <input type="checkbox" tabindex="4" id="chb2" name="check_output[]" value="Email" <?php if(isset($_POST['check_output']) && in_array('Email', $_POST['check_output'])) echo ' CHECKED ';?>>Email<br>
        <input type="checkbox" tabindex="5" id="chb3" name="check_output[]" value="HTML" <?php if(isset($_POST['check_output']) && in_array('HTML', $_POST['check_output'])) echo ' CHECKED ';?>>HTML<br>
        <input type="checkbox" tabindex="6" id="chb4" name="check_output[]" value="None" <?php if(isset($_POST['check_output']) && in_array('None', $_POST['check_output'])) echo ' CHECKED ';?>>None<br>
        <input type="checkbox" tabindex="7" id="chb5" name="check_output[]" value="PDF" <?php if(isset($_POST['check_output']) && in_array('PDF', $_POST['check_output'])) echo ' CHECKED ';?>>PDF<br>
       </fieldset></td>
      <td><fieldset> <legend>Frequency: </legend>
        <input type="radio" id="rad0" tabindex="8" name="Frequency" value="One Time" <?php echo ($_POST['Frequency']=="One Time")?"CHECKED":""; ?>>One Time<br>
        <input type="radio" id="rad1" tabindex="9" name="Frequency" value="Daily" <?php echo ($_POST['Frequency']=="Daily")?"CHECKED":""; ?>>Daily<br>
        <input type="radio" id="rad2" tabindex="10" name="Frequency" value="Weekly" <?php echo ($_POST['Frequency']=="Weekly")?"CHECKED":""; ?>>Weekly<br>
        <input type="radio" id="rad3" tabindex="11" name="Frequency" value="Monthly" <?php echo ($_POST['Frequency']=="Monthly")?"CHECKED":""; ?>>Monthly<br>
        <input type="radio" id="rad4" tabindex="12" name="Frequency" value="Ongoing" <?php echo ($_POST['Frequency']=="Ongoing")?"CHECKED":""; ?>>Ongoing<br>
       </fieldset></td>
      <td><fieldset> <legend>Request Type: </legend>
        <table border="0" cellspacing="3" cellpadding="3">
         <tbody>
          <tr>
           <td><fieldset id="myfieldset"> <legend>Data: </legend>
             <input type="radio" id="req0" tabindex="13" name="request_type" value="Add Data" <?php echo ($_POST['request_type']=="Add Data")?"CHECKED":""; ?>>Add<br>
             <input type="radio" id="req1" tabindex="14" name="request_type" value="Extract Data" <?php echo ($_POST['request_type']=="Extract Data")?"CHECKED":""; ?>>Extract<br>
             <input type="radio" id="req2" tabindex="15" name="request_type" value="Update Data" <?php echo ($_POST['request_type']=="Update Data")?"CHECKED":""; ?>>Update<br>
             <input type="radio" id="req3" tabindex="16" name="request_type" value="Validate Data" <?php echo ($_POST['request_type']=="Validate Data")?"CHECKED":""; ?>>Validate<br>
            </fieldset></td>
           <td><fieldset id="myfieldset"> <legend>Report: </legend>
             <input type="radio" id="req4" tabindex="17" name="request_type" value="New Report" <?php echo ($_POST['request_type']=="New Report")?"CHECKED":""; ?>>New<br>
             <input type="radio" id="req5" tabindex="18" name="request_type" value="Modify Report" <?php echo ($_POST['request_type']=="Modify Report")?"CHECKED":""; ?>>Modify<br>
            </fieldset></td>
           <td><fieldset id="myfieldset"> <legend>Table: </legend>
             <input type="radio" id="req6" tabindex="19" name="request_type" value="New Table" <?php echo ($_POST['request_type']=="New Table")?"CHECKED":""; ?>>New<br>
             <input type="radio" id="req7" tabindex="20" name="request_type" value="Modify Table" <?php echo ($_POST['request_type']=="Modify Table")?"CHECKED":""; ?>>Modify<br>
            </fieldset></td>
          </tr>
         </tbody>
        </table>
       </fieldset></td></tr>
    </tbody>
   </table>
   <br>
   <input type="hidden" value="Created" name="status">
   <input type="submit" id="sd" tabindex="24" value="submit" name="submit">
   <input type="reset" onclick="resetform();" id="rs" tabindex="25" name="reset" value="reset">
  </form>...

I created a small javascript that I called the head() section of my page.

function resetform(form) {
 // resets title
document.forms[0].request_title.value = "";
...
}

Nothing happens! What am I doing wrong?

[Readie]

Well, reset is actually working. Reset reverts the form to how it was when the page loaded, so you've echoed " checked" into the end of the checkbox input, that's the default to reset to.

Anyways, you've gone about the JavaScript wrong:

<input type="button" onclick="emptyform(document.getElementById('check'))" value="Clear form">

function emptyform(field) {
for (i = 0; i < field.length; i++) {
field[i].checked = false;
}
}

And have id="check" referenced in all your checkboxes.

Alternativley, you can individually reference each checkbox.

onclick="emptyform()"

function emptyform() {
document.getElementById('firstid').checked = false;
document.getElementById('secondid').checked = false;
}

[rocknbil]

I think something's been editied since Readie's post . . .don't see anything about checkboxes . . . . but

<input type="reset" onclick="resetform();" id="rs" tabindex="25" name="reset" value="reset">
</form>
....
function resetform(form) {
// resets title
document.forms[0].request_title.value = "";
}

For this specific problem, I am guessing that, as Readie mentioned, people don't understand reset, it doesn't clear, it resets to initial values. So this particular function may be working, it's just that the actual function of RESET is overriding it, re-populating it after it clears the field.

Try returning false from the function, this would stop that. Like so:

<input type="reset" onclick="return resetform();" id="rs" tabindex="25" name="resetButton" value="reset">
</form>
....
function resetform(form) {
// resets title
document.forms[0].request_title.value = "";
return false;
}

That will stop reset from . . . resetting.

Note how I've renamed the reset button. Repeat after me:

I will not name objects or functions reserved words that may conflict, like submit, reset, or search.

:-)

If you ever get the Javascript error "object does not support this property or method" this will be why if you're in this habit.

[Readie]

I think something's been editied since Readie's post

Nope, just me being fail. Helped Kristo where was having problems with checkboxes, so I just assumed it was checkboxes again, rather than read through all the code :P :/

[kristo5747]

Sigh....I edited my code from

<input type="reset" onclick="resetform();" id="rs" tabindex="25" name="reset" value="reset">

to

<input type="BUTTON" onclick="resetform();" id="rs" tabindex="25" name="reset" value="reset">

Of course, it worked. Changing the input type was all I needed to do.

Thanks guys!

PS: I gotta go. I need some private time to smack myself..

[rocknbil]

Well, that makes it work if Javascript is enabled, but if it's not, the reset function itself is completely lost. Buttons have no inherent action, the first solution is better.

[kristo5747]

I agree.

My app has a disclaimer in which I require that my users have Javascript enabled.

If they don't...oh well.

[Readie]

My app has a disclaimer in which I require that my users have Javascript enabled.

If they don't...oh well.

Bit of a bad philosophy really, when you could get the same functionality without JavaScript here.

--

"Clear form" - a seperate form that posts to the same location, contained within <noscript> tags. (Submit for the button, hidden elements if required? Intent is to be equivilent to just re-typing in the URL)

If JS is enabled use element.innerHTML to create the "Clear form" button for the JS solution.

[kristo5747]

I won't argue that this is not perfect.

In my neck of the woods, I am only a one-man team: as coder, analyst, dba etc...

Though I hate to do it, I have to make drastic decisions like that & do my job and support my users in the most satisfactory way.

[CyBerAliEn]

Though generally I agree with almost everything I see Readie/rocknbil post... I must digress/discuss/point-out (a little):

I would not be concerned (today) regarding someone having Javascript disabled.

I'm sure some disagree... but the fact is, most (all) users today have Javascript enabled, as it is practically "required" to run almost all of the major public websites (gmail, youtube, facebook, etc; most users use these sites, most/~all have JS enabled). I would even argue that the vast majority of internet users (note: "typical users", not developers) today do not even know what Javascript is, let alone how to disable it.

Though disabling Javascript was an incredible fad of the 1990's... it really died out as any type of motion/trend by the early/mid 2000's. And now that we're in 2010+, the notion is increasingly "ancient". Javascript was a "toy" (mostly) in the ~90s, where disabling JS meant disabling lots of "crap"... but today it has become increasingly a "tool" for websites to deliver increased functionality.

When I hear "You must/should do this in case Javascript is disabled." It just sounds to me like "You must/should make sure your site design works correctly in IE5."

(I'm sure we've all left IE5 behind by now; and I've already moved on from IE6 support.)

I considerably agree that making everything "degradable" is important. Certainly you should try to make sure your sites primary functions will work without Javascript... but if Javascript is an important aspect of your site's functionality (which is increasingly happening)... I believe a "Javascript is required" notice is sufficient enough --- "JS is disabled" support be damned.

Though in this specific case/post... using the normal "reset" button is a ~good idea... I just jumped into this mood...

**Ranting over.** lol

[Readie]

I agree with the points you make Cyber, but not the conclusion you draw.

I've just become of the opinion that it's good practice to make sure the functionality exists without JavaScript, I know it's going to be a tiny percentage of people who don't use JavaScript, but if a visitor can't use a website with their own preferences in effect then they're less likely to visit again, or give the link out to other people.

Every person has some degree of liklihood of bringing a friend, so try and keep them all in my opinion :)

[rocknbil]

First, kristo5747, review the simple solution I posted, its not that hard. Return false on click of the reset button, and it's good. The progressive degradation is only that it doesn't clear the field. No big loss.

OK, my soapbox. :-)

I've been a one man band for 10 years or so. :-) When you begin to look at the whole picture - SEO, cross browser compatibility, semantics/tableless layouts, accessibility, usability (among which is, NEVER rely on the user to perform an action, they will disappoint you every.single.time), efficiency in your pages and applications, you will look back on all these as excuses for not doing it right the first time. I've done it myself . . . as we know, recovered addicts are the worst evangelists. :-)

The sooner you learn to form the philosophy that you are generating documents meant to be accessible to ALL users, regardless of the viewing device, the easier it gets to swallow this simple concept: it must work when all your bells and whistles are taken away. And this includes style sheets.

My app has a disclaimer in which I require that my users have Javascript enabled.

Problem one: this relies on users to actually read it. People seem to have a hard time reading, especially if it's an important message. :-) Compare it to these:

This page best viewed on Internet Explorer.

To find what you're looking for, scroll down the page. Way down. I mean waaaaay down.

To buy our products, find what you want, payPal us the money, and indicate the items in the comments in payPal.

It's on the same level. Overall, any message like this says, I'm still learning, work with me here. Bad.

it is practically "required" to run almost all of the major public websites ( .... facebook, etc;

I just did a spot check to make sure. Facebook is running fine without Javascript. Some of the features have different ways of accessing them, but it still works. I didn't try the others, but suspect they probably do.

When I hear "You must/should do this in case Javascript is disabled." It just sounds to me like "You must/should make sure your site design works correctly in IE5."

You're off the hook in the context of this project, but . . . you're still thinking in terms of presentation and user experience. Let's put it in terms of something that will make a difference to you. Search engines don't execute Javascript, and much of what is "ajax based" is not properly coded with fallbacks. And guess what search engines are? You may be able to work around this (which is what most do to justify lack of graceful degradation, build workarounds) but aligning with a semantic document philosophy makes it all easier.

In the long run, it makes LESS work for you. And that's important.

You use IE5 as an example, but there's a new wave of products coming that will give you the same grief - all the hand held devices that don't execute JS. I have even seen people scrambling to create an entire second site, a mobile version of their site, for these devices. This is insane. If you program so that it progressively degrades, you don't have to worry about it.

Your comment that "all users have Javascript on" is colored by two things you may not know. If your entry pages rely on Javascript, that's as far as they get, so of course your stats won't show any JS users. Second, nearly all safe browsing sites recommend two things in their lists for the unaware: Disable Flash, disable Javascript. Even techies do this simply because they don't need the annoyance, "Javascript" has become associated with "annoying ads."

This is the nature of the world you must deal with. Making excuses to justify decisions is dangerous.

I got a comment on one of my sites the other day, built with the philosophies I'm speaking of. He was able to look it up on his cell phone, and he was amazed, it was completely navigable and worked perfectly. His comment was that most sites he can't even make sense of.

And guess what? I refuse to own a cell phone (yet.) I've never seen it on one. I just know it will work . . . and it did.

[kristo5747]

With respect to all of you guys who are waaayyy more experienced than me...

I got your point the first time.

Good coding is coding that supports all possibles users in all possible scenarios e.g. Javascript AND no Javascript.

Quit beating a dead horse, pleeeeasssssseeee! x-(

[jatar_k]

it's dead kristo5747 :)