...

View Full Version : cannot submit form with "enter"



ungovernable
07-22-2010, 07:51 PM
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:

/*
* 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);

Rowsdower!
07-22-2010, 11:21 PM
I'm giving this a quick hit since I'm about out for the day, but see what happens if you update this line:

"<td><input type='button' value='Envoyer' onClick='$.QShout.validatePost();' id='qPostBtn'> "+


to this instead:

"<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...

ungovernable
07-23-2010, 11:42 PM
no, not working :(

Philip M
07-24-2010, 01:45 PM
no, not working :(

In that case the enter key is probably disabled.

ungovernable
07-25-2010, 02:34 AM
how can i re-activate it ? i can't find the part of the code where it desactivate enter key..

ungovernable
07-26-2010, 09:38 PM
bump..

Swon
07-26-2010, 09:49 PM
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.

ungovernable
07-27-2010, 05:56 PM
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):

<script type="text/javascript">
$(function(){
$.QShout({
username: $("#username").val()
});
});
</script>


//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 :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum