Avatar billede benzon Praktikant
12. maj 2012 - 00:17 Der er 4 kommentarer og
1 løsning

[jQuery] - Form Submit virker, dog er der 1 ord den ikke må sende hjæælp!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    function doImageFader(){
        var images=$('>ul>li',this),
            imageTimeout,
            next
        images.hide().eq(0).show()
        imageTimeout=setTimeout(imageTimer,5000)
        $(this).on('stop',function(){
            clearTimeout(imageTimeout)
        })
        images.hover(function(){
            clearTimeout(imageTimeout)
        },function(){
            imageTimeout=setTimeout(imageTimer,1000)
        })
        function imageTimer(){
            next=images.filter(':visible').fadeOut(500).next()
            if (next.length==0) next=images.eq(0)
            next.fadeIn(500)
            imageTimeout=setTimeout(imageTimer,5000)
        }
    }
    function doTicker(){
        var ticker=$('>ul',this),
            tickerItems=ticker.children().get(),
            tickerTimeout
        tickerTimeout=setTimeout(tickerTimer,1000)
        $(this).on('stop',function(){
            clearTimeout(tickerTimeout)
        })
        ticker.hover(function(){
            clearTimeout(tickerTimeout)
        },function(){
            tickerTimeout=setTimeout(tickerTimer,1000)
        })
        function tickerTimer(){
            var top=tickerItems.shift()
            $(top).animate({opacity:0},500)
            ticker.animate({top:"-="+$(top).height()},500,function(){
                $(top).css({opacity:1})
                ticker.append(top).css({top:0})
                tickerItems.push(top)
                tickerTimeout=setTimeout(tickerTimer,5000)
            })
        }
    }
    $(function(){
        $('#imageFader').trigger('stop').addClass('fader').load('featured_profile.php',{},doImageFader)
        $('#ticker').trigger('stop').addClass('ticker').load('statusupdate_feed.php',{},doTicker)
        $('#statustext').submit(function(e){
            e.preventDefault()
            var form=this
            $('#ticker').trigger('stop').addClass('ticker').load('statusupdate_feed.php',{
                text:form.text.value,
                Submit2: form.Submit2.value
            },doTicker)
            setTimeout(function(){
                form.reset()
            },200)
            alert('x')
            return false
        })
        $('[name=text]').on({
            focus:function(){
                if(this.value==this.defaultValue)this.value=''
            },
            blur:function(){
                if(this.value=='')this.value=this.defaultValue
            },
        })
    })
    </script>
    <style type="text/css">
        .fader ul
        {
            list-style-type: none;
            list-style-position: outside;
            margin: 0;
            padding: 0;
            width: 10000px;
            position: relative;
            height: 150px;
        }
        .fader li
        {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }
        .ticker
        {
            height: 90px;
            overflow: hidden;
            width: 500px;
        }
        .ticker ul{
            position: relative;
            list-style-type: none;
            list-style-position: outside;
            margin: 0;
            padding: 0;
            width: 500px;
        }
        .stylebg {
            background-color: #F4F5F7;
        }
        .bokstekst {
            text-align: left;
            font-family: Arial,Verdana;
            text-dcoration: none;
        }
        .style1 {
            text-align: left;
            font-size: 11px;
            font-family: Arial,Verdana;
            text-dcoration: none;
        }
        .bokstekst_gray {color: #808080;font-size: 11px;font-family: Arial,Verdana;text-dcoration: none;}
        .styleaktiv1 {
                font-size: 12px;
        }
        .styleaktiv2 {
                font-family: Arial, Helvetica, sans-serif;
        }
        .styleaktiv3 {
                font-size: 12px;
                font-family: Arial, Helvetica, sans-serif;
        }
        .alternate{background-color: #F4F5F7;text-align: left;font-size: 12px;font-family: Arial,Verdana;}
        #statustext .text
        {
            width: 97%;
            border: 1px solid navy;
            text-align: left;
            color: #666666;
            font-size: 11px;
            font-family: Arial,Verdana;
            text-decoration: none;
        }
        #statustext .submit
        {
            width: 100%;
            border: 1px navy solid;
            text-align: center;
            font-size: 11px;
            font-family: Arial,Verdana;
            text-decoration: none;
        }
    </style>
    <title>Denmark</title>
</head>
<body>
    <form  id="statustext" method="post">
            <input name="text"class="text" maxlength="140" value="Fortæl hvad du laver / tænker lige nu" type="text" />
            <input name="Submit2" class="submit" type="submit" value="send" />
    </form>
    Some Stuff
    <div id="imageFader">
    </div>
    <div id="ticker">
    </div>
    More stuff
</body>
</html>

Har sidet og bøvlet med det her lidt tid nu, som standart kan i se ordet i input er Fortæl hvad du laver / tænker lige nu, som automatisk fjernes når boxen bliver klikket på, mit problem er vis folk trykker på Send knappen uden og skrive noget i fæltet, så ville jeg helst undgå at den sender sætningen (Fortæl hvad du laver / tænker lige nu) - men har sidet og luret på det et stykke tid nu, syntes ikke lige jeg kan finde svaret.

En venlig sjæl der vil hjælpe, er til et godt formål :)
Avatar billede olsensweb.dk Ekspert
12. maj 2012 - 12:19 #1
kunne du ikke sætte disabled="disabled" på din submit knap og først enable den når der er skrevet noget i indput boxen ??
<form name="frm" id="statustext" method="post">
    <input name="text"class="text" maxlength="140" value="Fortæl hvad du laver / tænker lige nu" type="text" />
    <input id="Submit2" name="Submit2" class="submit" type="submit" value="send" disabled="disabled"/>
</form>


og checke sådan her i js   
$('[name=text]').on({
    focus:function(){
        if(this.value==this.defaultValue)this.value=''
    },
    blur:function(){
        // if(this.value=='')this.value=this.defaultValue
        document.frm.Submit2.disabled =  (this.value=='' || this.value=='Fortæl hvad du laver / tænker lige nu')? true : false;
    },
})


js testen kunne gøres kortere hvis man anvendte attributen "placeholder" men den virker ikke i IE læs evt http://www.eksperten.dk/spm/961987
Avatar billede olsensweb.dk Ekspert
12. maj 2012 - 12:46 #2
demo uden brug af placeholder http://experten.olsensweb.dk/962795/index_v0.html
demo med brug af placeholder http://experten.olsensweb.dk/962795/index_v1.html

jeg har lagt din CSS externt afh genbrug, og dermed gøre coden mindre

placeholder js hentes her https://github.com/NV/placeholder.js
Avatar billede benzon Praktikant
07. oktober 2012 - 23:22 #3
det hjalp desværre ikke.
Avatar billede benzon Praktikant
28. oktober 2012 - 20:30 #4
lukker
Avatar billede benzon Praktikant
28. oktober 2012 - 20:30 #5
jeg lukker den her tråd
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester