Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    Onblur event not allowing form to submit

    I have an onfocus event that makes a textarea large and then an onblur event that sets it back to a smaller textarea. If I click the textarea the onfocus event is triggered but if I go straight to submit the form the onblur event is triggered and the form is not submitted unless i hit submit twice. How can i get the form to submit? Can i put an "if" statement in the onblur event to see if the form is being submitted then just submit the form otherwise run the onblur event?



    Code:
    <style type="text/css"> 
     
     
      .textarea {
              background-color: #ffffff;
              color: black;
              font-family: Arial, sans-serif;
              font-size: 8pt;
              font-weight: normal;
              border-style: solid;
              border-width: 1px;
              border-color: aaaaaa;
              height: 18px;
              width: 50%;
              overflow: hidden;
                
     
              }   
              
      .textarea2 {
              background-color: #ffffff;
              color: black;
              font-family: Arial, sans-serif;
              font-size: 8pt;
              font-weight: normal;
              border-style: solid;
              border-width: 1px;
              border-color: aaaaaa;
              height: 100px;
              width: 50%;
              overflow: auto;
              
              }                
      
      
    
    
    </style>
    
    </head>
    
    <body>
    
    <script>
    
    function enlargeBox(v,n,c){
     
    document.theForm.elements[n].className='textarea2';
    
     
    
     
     
    }
    
    
    </script>
    
    
    <form method="POST" name="theForm" action="newProcess.php">
    
    
    
    site<br>
            <textarea 
        class = "textarea" 
        name  = "site" 
        onblur  = "this.className='textarea'" 
     
        onfocus = 'enlargeBox(this.value,this.name,this.className)' rows="1" cols="20"> this is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textarea</textarea> 
     <br>
     
     Contact:<br>
     
    <input type="text" onclick="this.select();" name="contact" value="" class="textfieldlp" size="50">
    
    <p>&nbsp;</p>
    <p><input type="submit" value="submit" name="B1"></p>
    
    </form>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    You are going to love this one.

    Move your <input type="submit"> to *ABOVE* your textarea.

    Now try it.

    Presto, it works.

    Why the difference?

    Because when you click on the submit button and it is below the textarea and the textarea is enlarged, the onblur occurs first and shrinks the area.

    BUT NOW THE BUTTON HAS MOVED! And the mouse is no longer focussed on the button and so the click is just sent to the <body> and *not* to the submit button.

    Ain't that fun?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    but what if I need the button at the bottom of the form.

  • #4
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    Can I change the onblur to an "if" statement to see if the user submitted the form??

    onblur = "if (form submitted) {submit the form }else {this.className='textarea' }"
    Last edited by nikko50; 10-12-2011 at 05:47 AM.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try this:
    Code:
    <input type="submit" value="submit" name="B1" onfocus="this.form.submit()">
    Should work.
    Last edited by Kor; 10-12-2011 at 12:52 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by nikko50 View Post
    but what if I need the button at the bottom of the form.
    Then use position: absolute; to make sure it doesn't get moved by the expanding textarea.

    Better would probably be to put the textarea inside a <div> and have the <div> be the same size as the smaller textarea. Then allow the larger one to overflow the div, but make sure that the div stays fixed size so the button doesn't get moved by the resize.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •