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 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts

    cannot submit form with "enter"

    i'm using this shoutbox script since a while and it is really annoying because we can't submit the form just by pressing "enter" on the keyboard...

    could anyone help me to fix the problem please ? i have tryed everything

    here is the full script:
    Code:
    /*  
     * Project: QShout - Shoutbox Widget for jQuery
     * Version: v1.0 (03/01/ā€ˇ2010, ā€¸ā€ˇ12:02:23 PM)
     * URL    : http://qshout.borisding.com
     * License: MIT  (http://www.opensource.org/licenses/mit-license.php)
     *          Copyright (c) 2010, Boris Ding P H
     */
    
    
    (function($){
          //public QShout
          $.QShout = function( uSettings ){                   
          //default settings    
           settings = {
            //misc.
            qsId        : "qsId",
            serverPage  : "qshout.php",
            loader      : "Chargement...",
            timer       : 50000,
            maxRow      : 50,
            //shoutbox's body
            bwidth      : "320px",
            bheight     : "320px",
            bBorderWidth: "1px",
            bBorderStyle: "solid",
            bBorderColor: "#000000",
            bFontSize   : "11px",
            bFontFamily : "Verdana, Calibri, Arial",
    		blinkColor  : "#008000",
            //shoutbox's content
            evenRowColor: "#202020",
            oddRowColor : "#404040",
            rowPadding  : "4px",
            ipCursor    : "help",
            dUrlColor   : "#c0c0c0",
            //shoutbox's footer
            fFieldHight : "auto",
            fFieldSize  : 20,
            fFontSize   : "11px",
            fBorderWidth: "1px",
            fBorderStyle: "solid",
            fBorderColor: "#000000",
            fBgColor    : "#191919",
    		username    : ''
           };
          //merge/overwrite with user's settings
           settings = ( uSettings )? $.extend( settings, uSettings )
                                   : settings;
    
          if( settings.qsId ){
          //init shoutbox
            $.QShout.init();
          }     
       };
    
       $.QShout = $.extend( $.QShout, {
          //load html content
          init: function(){
          //qShout's html      
          var qShoutHtml = "<table cellpadding='0'>" +
                           "<tr><td>"                +
                           //shoutbox's content
                           "<div id='qShout'></div>" +
                           "</td></tr>"              +
                           //shoutbox's footer
                           "<tr><td>"                +
                           "<div id='qFooter'>"      +
                           "<table>" +
    //                       "<tr><td>"                +
    //                       "<label>Name: </label>"   +
    //                       "</td><td>"               +
                           "<input type='text' id='qName' maxlength='30' value='"+ settings.username +"' style='display:none;'>" +
    //                       "</td></tr>"              +
    
    //                       "<tr><td>"                +
    //                       "<label>URL: </label>"    +
    //                       "</td><td>"               +
                           "<input type='text' id='qUrl' value='http://www.pirate-punk.net/camarade.php?username=' style='display: none;'>" +
    //                       "</td></tr>"              +
    
                           "<tr><td>"                +
                           "<label><font color='#FFFFFF\' face=\'verdana\'>Message:</font> </label>"+
                           "</td><td>"               +
                           "<input type='text' id='qMessage'  maxlength='250'>" +
                           "</td></tr>"              +
    
                           "<tr><td></td>"           +
                           "<td><input type='button' value='Envoyer' onClick='$.QShout.validatePost();' id='qPostBtn'> "+
                           " <a href='javascript:void(0);' onClick='$.QShout.init();' style='font-face: verdana'><font face='verdana'>Rafraichir</font></a>"+
                           "</td></tr>" +
                           "</table>"   +
                           "</div>"     +
                           "</div>"     +
                           "</td></tr>" +
                           "</table>";
    
          $("#" + settings.qsId ).html( qShoutHtml )                       
                                  .each(function(){
         
                 $(this).find("#qFooter table").css({
                   'border-style'    : settings.fBorderStyle,
                   'border-width'    : settings.fBorderWidth,
                   'border-color'    : settings.fBorderColor,
                   'width'           : '100%',
                   'background-color': settings.fBgColor,
                   'font-size'       : settings.fFontSize
                  });
    
              $(this).find("#qShout").html( settings.loader )
                                     .each(function(){
                   $(this).css({
                   'border-style': settings.bBorderStyle,
                   'border-width': settings.bBorderWidth,
                   'border-color': settings.bBorderColor,
                   'height'      : settings.bheight,
                   'width'       : settings.bwidth,
                   'overflow'    : 'auto'
                   });
              });
           });
    
           //style footer's form
           this.styleFooterEle();
    
           //get content of shout box
            setTimeout( function(){
             $.QShout.loadContent();
            }, 300 );
          },
         
          styleFooterEle: function(){
           var inputs = $("#qFooter: input");
    
          //iterate to check each element type
            inputs.each(function() {
              var currentEleType = this.type;
              switch(currentEleType){
               case "text":
                $(this).css({
                 'border-width' : settings.fBorderWidth,
                 'border-style' : settings.fBorderStyle,
                 'border-color' : settings.fBorderColor,
                 'font-size'    : settings.fFontSize,
                 'height'       : settings.fFieldHeight
                });
                //set the size of textfield
                this.size = settings.fFieldSize;
                break;
                case "button":
                 $(this).css({
                  'font-size': settings.fFontSize,
                  'height'   : settings.fFieldHeight
                 });
                  break;
              }//end switch
            });
          },
    
          loadContent: function( action ){
           var act = {load: "load"};
           if( action ) { act = $.extend( act, action ) };
    
           var maxRow = ( settings.maxRow < 0 ) ? 30 
    	                                    : settings.maxRow;
    											
           var param = "maxRow="+ maxRow +"&action=get";
           var url   = settings.serverPage + "?" + param;
           $.getJSON(url,
            function( data ){
             var arrayMessage = data.chat.message;         
             var content = "<ul style='margin:0; padding:0px; list-style: none;'>";
              $.each( arrayMessage, function(i){
                if( arrayMessage[i].url != "" ){
                 arrayMessage[i].user = "<a href='"+ arrayMessage[i].url + arrayMessage[i].user +"' target='_parent'>"+ arrayMessage[i].user + "</a>";
                }
               content += "<li>"+
                          "<span>"+
                          arrayMessage[i].user +
                          "</span>"+
                          ": "+
                          arrayMessage[i].text +
                          "<div id='dateUrl'>" +
                          arrayMessage[i].time +
                          " "+
                          "<a title='IP: "+ arrayMessage[i].ip +"' id='qIp'>&equiv;</a>"+
                          "</div>"+
                          "</li>";
              });
               content += "</ul>";
               
               //manipulate content's css
                  $("#qShout").html(content)
                              .each(function(){
                    $(this).scrollTop( settings.bheight );
    
                    $(this).find("ul").css({                                           
                      'font-size'  : settings.bFontSize,
                      'font-family': settings.bFontFamily
                    });
    
                    $(this).find("ul>li:even").css({
                      'background-color' : settings.evenRowColor,
                      'padding'          : settings.rowPadding,
    'color'            : '#fff'
                    });
    
                    $(this).find("ul>li:odd").css({
                      'background-color' : settings.oddRowColor,
                      'padding'          : settings.rowPadding,
    'color'            : '#fff'
                    });
    
                    $(this).find("ul>li a#qIp").css( 'cursor', settings.ipCursor );
    
                    $(this).find("ul>li div").css({
                      'text-align': 'right',
                      'color': settings.dUrlColor
                    });
    
                    $(this).find("ul>li span").css({
                      'color': '#c0c0c0',
                      'font-weight': 'bold'
                    });
    
                    $(this).find("ul>li span a").css({
                      'color': '#c0c0c0',
    'text-decoration': 'none',
                      'font-weight': 'bold'});
    
                  //apply animation for newly added
                   if( act.load === "inserted" ){
                     var oriColor = $(this).find("ul>li:first").css('background-color');
                     $(this).find("ul>li:first").css('background-color', settings.blinkColor);
                        $(this).find("ul>li:first").animate({
                          opacity: 0.4
                          },'slow',function(){
                           $(this).css({
                             'background-color': oriColor,
                             'opacity': 1
                         });
                        });
                       }
                  });
    
              //reload the content after interval time
              setTimeout( function(){
    			settings.timer = ( settings.timer < 0 )? 60000
    			                                       : settings.timer;
                  $.QShout.loadContent();
              }, settings.timer );
            });
          },
          //inputs validation
          validatePost: function(){
           var name    = $("#qName").val();
           var url     = $("#qUrl").val();
           var message = $("#qMessage").val();
    
           if( name == "" || name == null ){
             alert("Name is emtpy!");
             $("#qName").focus();
             return false;
           }
           if( message == "" || message == null ){
             alert("Entre d'abord quelque chose ą dire!");
             $("#qMessage").focus();
             return false;
           }
           if( url != "" ){
             var checkURL = new RegExp();
             checkURL.compile("^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$");
             if( !checkURL.test(url) ){
               alert("Invalid URL!");
               $("#qUrl").focus();
               return false;
             }
           }
           this.postShout();
          },
         //post inputs
         postShout: function(){
           var user    = this.encURI( $("#qName").val() );
           var url     = this.encURI( $("#qUrl").val() );
           var message = this.encURI( $("#qMessage").val() );
           //disable post button
           $("#qPostBtn").attr("disabled", true);
    
          var inputs = "user=" + user + "&url=" + url + "&message=" + message + "&action=send";
          $.post(settings.serverPage, inputs, function( result ){
            if( result === "done" ){
                clearInterval( settings.timer );
    			//load inserted
                $.QShout.loadContent({
                  load: "inserted"
                });
                //clear all textfield value
      $("#qFooter: input").each(function(i){
                 if( this.type === "text" && i != 0 && i != 1){
                   this.value = "";
                 }else if( this.type === "button" || this.type === "submit" ){
                   $(this).attr("disabled", false);
                 }
              });
            }
          });
         },
    
        encURI: function( string ){
          return encodeURIComponent(string);
         }
        });
    
    })(jQuery);

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm giving this a quick hit since I'm about out for the day, but see what happens if you update this line:
    Code:
    "<td><input type='button' value='Envoyer' onClick='$.QShout.validatePost();' id='qPostBtn'> "+
    to this instead:
    Code:
    "<td><input type='submit' value='Envoyer' onClick='$.QShout.validatePost();' id='qPostBtn'> "+
    Unless they're capturing the "enter" keystroke (in addition to using the "button" type) to prevent submission this should work...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts
    no, not working

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by ungovernable View Post
    no, not working
    In that case the enter key is probably disabled.

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts
    how can i re-activate it ? i can't find the part of the code where it desactivate enter key..

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts
    bump..

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It don't seems like you have a <form></form> around your input fields.
    If thats the case, the enter button wont work to submit.

  • #8
    New Coder
    Join Date
    Jan 2008
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts
    it works now with the form tag

    but now after the shout is sent, the username will be lost

    here's how it works: there is a "name" text field that is automatically filled up with a script so the username from the forum will be automatically entered in the text field

    the first time it works, but with the <form> tag, after the shout is sent the username is lost... i don't understand why

    here's the part of the script related to sending username to the text field (i think):
    Quote Originally Posted by index.php
    <script type="text/javascript">
    $(function(){
    $.QShout({
    username: $("#username").val()
    });
    });
    </script>
    Quote Originally Posted by javascript
    //clear all textfield value
    $("#qFooter: input").each(function(i){
    if( this.type === "text" && i != 0){
    this.value = "";
    }else if( this.type === "button" || this.type === "submit" ){
    $(this).attr("disabled", false);
    }
    });
    the part in bold is supposed to prevent the "name" field from being cleared

    but with <form> tags it doesnt work anymore


  •  

    Posting Permissions

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