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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -