javascript - Jquery focus/submit acting weird in Chrome-Browser -
actually ( on website ) have form in box.
not exhaust limited place in box, contact-form pops full size, when inputs (textarea, select, too) gets focused.
when submit button gets hit, ajax request gets fired up.
under firefox works great. in chrome:
when click submit button, form gets usual size , no ajax-request gets fired.
please feel free check out self:
http://jsfiddle.net/uugaz/
the actuall code-parts involved:
js
$('#helpkontakt').submit(function(){ alert('on way!'); }); $("#helpkontakt textarea, input, select").focus(function() { $("#helpkontakt").css("height", "auto"); }); $("#helpkontakt textarea, input, select, #submit").focusout(function() { $("#helpkontakt").css("height", "200px"); });
html
<form action="" accept-charset="utf-8" role="application" class="ym-form ym-columnar clearfix" method="post" enctype="application/x-www-form-urlencoded" id="helpkontakt" style="height: 200px;"> <div class="ym-fbox-text"> <input type="text" placeholder="ihr name" class="full" value="max mustermann" id="name"name="name"> </div> <div class="ym-fbox-text"> <input type="text" placeholder="ihre email" class="full" value="test@test.de" id="email" name="email"> </div> <div class="ym-fbox-text"> <input type="text" placeholder="telefonnr. für rückruf" class="full" value="" id="tel" name="tel"> </div> <div class="ym-fbox-select"> <select class="full" id="topic" name="topic"> <option label="ideenvorschlag" value="ideenvorschlag">ideenvorschlag</option> <option label="verbesserungsvorschlag" value="verbesserungsvorschlag">verbesserungsvorschlag</option> <option label="fehlermeldung" value="fehlermeldung">fehlermeldung</option> </select> </div> <div class="ym-fbox-msg"> <textarea cols="80" rows="24" placeholder="[die erste zeile ist für den betreff] ab hier ihre nachricht" class="full" id="nachricht" name="nachricht"></textarea> </div> <div style="clear: both;"> <input type="hidden" id="hiddentyp" value="ausschluss kriterien für artikel" name="hiddentyp"> </div> <div style="margin: 0; padding: 0 1.5em 0 0;" class="ym-fbox-button"> <input type="submit" class="submit" value="absenden" id="submit" name="submit"> </div> </form>
your focusout function running before able click on submit button, solve this. http://jsfiddle.net/uugaz/2/
basically, added this:
var submitclicked = false; $('#submit').on("mousedown", function() { submitclicked = true; }).on("mouseup", function() { submitclicked = false; });
and modified focusout
this:
$("#helpkontakt textarea, input, select, #submit").focusout(function() { if(!submitclicked) { $("#helpkontakt").css("height", "200px"); } });
so if focusout
happens because mouse down on submit button, wont execute. wont cause pause in focusout
execution , wont require user click speed (to happen within pause).
Comments
Post a Comment