Reset a field after submitting text (HTML)

Discussion in 'Web Design & Coding' started by Glaanieboy, Jun 12, 2003.

  1. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Code:
    <FORM target="right" action="right.php" name="submit_message" method="GET">
    <INPUT type="hidden" name="showrows" value="15">
    <?php 
    print "Name: <INPUT type=\"text\" name=\"name\" maxlength=\"25\" size=\"25\" ><BR>";
    ?>
    Message: <INPUT type="message" name="text" maxlength="255" size="25" value=""><BR>
    <INPUT type="submit" value="SHOUT!"></FORM>
    This is how it looks like currently (please don't pay attention to the PHP code). What I want is that after the form has been submitted, that it clears the 'Message' field. I found one piece of javascript code (onClick="reset(this.form)" placed in the final INPUT), but that resets the field before the string has been submitted.
    Can anyone help me?

    edit: removed some code to correct the posts' width.
     
  2. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    I don't think it's possible without some tricks. You could make a hidden box.

    PHP:
    [...] onClick="submitIt()" [...]

    function 
    submitIt(){
      
    document.submit_message.theHidden.value document.submit_message.message.value;
      
    document.submit_message.message.value "";
      
    document.submit_message.submit();
    }
    This way the same effect should be reached. The message will now be in theHidden instead of message though so you might want to rename them a bit.
     
  3. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    OK, I have put the document.bla part in SCRIPT tags and onClick=bla in my INPUT submit button. Is that correct? Either way, nothing happens, I click the button, but no text is submitted to the db. Also the text stays put.

    click here for a demo (this is not the shoutbox in my sig)
     
  4. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    You seem to have removed the code again. You may need to have a type="button" instead of type="submit".
     
  5. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    LOL, yeah. I shall try it now.
     
  6. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Hmm, nothing happens. Unfortunately I can't show the code properly atm, because I can't edit the file anymore somehow. I'll let you know when it's fully online again
     
  7. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Weee, I done it! This is how:
    First, I made the button a 'reset' type, instead of submit.
    Added a Javascript (place between the <head></head> tags):
    Code:
    <SCRIPT language="JavaScript"><!--
    function submitIt(){
    document.submit_message.submit();
    return true;
    }
    //--></SCRIPT>
    Then, added this piece of code in the <FORM> declaration: onReset="return submitIt()".

    With this code, it first sends out the form values, and then it resets the fields :D (Because Name is cookied, Name is always filled in)
    Thank you Zedric for pointing me in the right direction and thank you Google for the inspiration (I made this script myself with bits and pieces I found with Google).
     
  8. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    I had a problem with submitting the text properly. Now that I made the submit button a reset button, I can't press enter - while in the message field - to submit the text. I found a javascript that checks if the Enter key is pressed (while in the message box) and if so, it executes some commands (which is, in this case, submit the form and reset the message field). Here's the script:
    Code:
    function onKeyPress (){
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    else return true;
    if (keycode == 13) {
    document.submit_message.submit();
    window.document.submit_message.message.value = '';
    return false;
    }
    return true;
    }
    document.onkeypress = onKeyPress;
    I test all my stuff in Mozilla, because it is most compatible with HTML and javascript. I thought. I just couldn't get this script to work, until I opened it in IE... it worked.
    Now is my question, can someone look at this code and tell me what to change to make it work in Mozilla AND in IE? (and the rest of the browsers of course, but these are most widely used)

    To see the script working: http://allhope.geffychan.co.uk/~glennhof/shout/test/shout.php
     
  9. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    This can be a bit tricky as I noticed in my HTPC interface project.
    Mozilla does this one way, IE another and Opera a third. Well almost anyway.

    PHP:
    <SCRIPT language="JavaScript">
    if((
    navigator.appName == "Netscape")&&(parseInt(navigator.appVersion) >= 4)) NS true;
    else 
    NS false;

    if(
    NS){
        
    document.captureEvents(Event.KEYDOWN);
        
    document.onkeydown getKey;
    }

    function 
    getKey(e){
        if(
    NSkey String.fromCharCode(e.which);
        else 
    key String.fromCharCode(event.keyCode);
        if(
    key == 13document.submit_message.submit();
    }
    Netscape will do nicely on this code (captures whole document though!). IE needs the onKeyDown="getKey()" in the appropriate tag. Opera seems to use Unicode (or something), but that only applies to some buttons (the ones I wanted to use...). The enter button has the same code though.
     
  10. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Nope does not work, not even in IE. I already put { and } at 'if (bla) { bla }' but that didn't work also. Do you have another suggestion?
     
  11. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    That's extremely odd... I've tested this code in Mozilla, Opera and IE.

    The
    PHP:
    if(NS){
        
    document.captureEvents(Event.KEYDOWN);
        
    document.onkeydown getKey;
    }
    may have to be
    PHP:
    if(NS){
        
    document.submit_message.message.captureEvents(Event.KEYDOWN);
        
    document.submit_message.message.onkeydown getKey;
    }
    in your case...
     
  12. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    PHP:
    if(escape(key) == "%0D")
    seems to help a whole lot too... :)
    if(key == 13) didn't cut it at all...
     
  13. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Do I have to replace if (key == 13) with that line?
     
  14. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Nevermind, got it to work! But it only works when you have document.captureEvents(Event.KEYDOWN); and document.onkeydown = getKey; and not the submit_message shiz in it.
    Now I can sleep well ( :) :) :)) and finish the rest of the script.
    Thank you very, very much!
     
  15. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    Sweeet :)
     
  16. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Javascript is crap.
     
  17. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    OK, X-Istence, then tell me a better way to do what I want.
     
  18. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    I don't believe there is unless you count VBScript... He's just being like he always is.

    But he's right, Javascript is crap... :D

    [edit]Unless you do everything an entirely different way with the frames and all of course...
     
  19. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    How? I don't understand what you mean :huh:
     
  20. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Well, do what all shoutboxes do, put the submit new message box inside the iframe, so that when its refreshed, it is empty ;).