Avatar billede JJ77 Juniormester
04. januar 2007 - 17:22 Der er 11 kommentarer og
1 løsning

Vis loading mens annonce oprettes.

Jeg har en submit-knap som aktiverer en form (se begge nederst). Når denne er aktiveret bliver en annonce oprettet. Nogle gange er der et billede tilknyttet annoncen hvilket gør at det kan tage lidt tid før den er oprettet. For at undgå at en bruger klikker på et nyt link, og på den måde kommer til at afbryde annonceuploads-processen vil jeg høre om det ikke er muligt at enten LÅSE siden til den er færdiguploadet, eller få den til at skrive Loading..., hvor Punktummerne skifter mellem .. og ...

<input type="submit" name="mySubmit" value="Opret erhvervsannonce">

<form action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="form" enctype="multipart/form-data" onsubmit="return validering(this)">
Avatar billede htm Nybegynder
04. januar 2007 - 21:29 #1
i toppen af din valudering funktion skriver du bare:

document.forms['form'].elements['mySubmit'].disabled = true;

Husk bare at enable submitknappen igen, hvis valideringen fejler.
Avatar billede JJ77 Juniormester
04. januar 2007 - 21:43 #2
dette medfører bare at en bruger ikke kan komme til at trykke to gange på submit, ikke?
som det er nu bliver submitknappen også disabled mens der uploades. Jeg har dog det problem at en bruger godt kan klikke på andre links på siden, og dermed skifte til en ny side så uploadningsprocessen bliver stoppet inden den er færdig.. Dette medfører at annoncen bliver oprettet uden billedet.

Ved nærmere eftertanke kan det med at låse siden, til annoncen er helt uploadet, vel ikke lade sig gøre, så det er nok smartere hvis der vises "Loading..".
Avatar billede JJ77 Juniormester
04. januar 2007 - 21:47 #3
Men hvordan gøres dette på en smart, pæn, browser- og brugervenlig måde?
Avatar billede htm Nybegynder
04. januar 2007 - 22:07 #4
Du kan ligge en div henover dom du viser når du trykekr submit, hvor du skriver vent venligst...

din div:
<div id="pleasewait">Please wait...</div>

og så din css til div'en: (placeres i head mellem <style> og </style>

#pleasewait {
  position: absolute;
  z-index: 200;
  top: 200px;
  left: 100px;
  height: 100px;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  display: none;
}

Så inde i din validering funktion skriver du:
document.getElementById('pleasewait').style.display = 'block';

Hvis du vil skjule den igen så er det bare:
document.getElementById('pleasewait').style.display = 'none';

Du kan så lige rette størrelse og placering til i CSS'en.

noget i den stil du tænker på?

Hvis du vil have prikkerne til at bævæge sig kan du bruge denne javascript (utested) Bare kald waitMsg() fra din validering

var dots=0;
function waitMsg()
{
  if(dots>3) dots=0;
  dots++;
  var txt = "please wait";
  for(i=0;i<dots;i++) txt += ".";
  document.getElementById('pleasewait').innerHTML = txt;
  setTimeout(waitMsg,1000);  //Tid i milisekunder før næste prik
}
Avatar billede JJ77 Juniormester
05. januar 2007 - 11:08 #5
Hmm.. er lidt forvirret.. kan du venligst uddybe det en anelse :-)
Avatar billede htm Nybegynder
05. januar 2007 - 19:09 #6
Avatar billede JJ77 Juniormester
05. januar 2007 - 22:44 #7
Nedenfor kan du se min kode.. jeg kan altså ikke lige finde ud af hvordan jeg skal sætte det ind... måske jeg kunne lokke dig til det... Så slipper du også for flere spørgsmål :-)



<?PHP
session_start();
?>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<script type="text/JavaScript" src="dk_pns.js"></script>

<script type="text/JavaScript">

function validering(f){
  if( f.gruppe.value=='Vælg produktgruppe' || f.gruppe.value==''){
      alert("Der skal vælges en produktgruppe!");
      f.gruppe.focus(); 
      return false;
      } 
  if( f.kategori.value=='Vælg kategori' || f.kategori.value==''){
      alert("Der skal vælges en kategori!");
      f.kategori.focus();   
      return false;
      }
  if( f.produkt.value==''){
      alert("Produkt/overskrift skal udfyldes!");
      f.produkt.focus(); 
      return false;
      }
  if( f.pris.value==''){
      alert("Pris skal udfyldes!");
      f.pris.focus();
      return false;
      }
  if( /[^\d]/.test( f.pris.value ) ) {
        alert("Pris skal være et heltal!");
        f.pris.focus();
        return false;
    }
  if( /[^\d]/.test( f.tlf1.value ) ) {
        alert("Telefonnr. 1 skal være et heltal!");
        f.tlf1.focus();
        return false;
    }
  if( /[^\d]/.test( f.tlf2.value ) ) {
        alert("Telefonnr. 2 skal være et heltal!");
        f.tlf2.focus();
        return false;
    }
  if( f.email.value == '' && f.tlf1.value == ''){
      alert("Telefonnr. 1 eller e-mail skal udfyldes!\nLæs evt. under hjælp nederst!");
      f.tlf1.focus();
      return false;
      }
  if( f.postNr.value==''){
      alert("Postnr. skal udfyldes!");
      f.postNr.focus();
      return false;
      }
  if( !pn["p"+f.postNr.value] ){
      alert("Postnr. synes ikke at eksistere!");
    f.postNr.focus();
    return false;
      }
  if(f.checkbox.checked==false){
      alert("Jeg har læst og forstået vedtægter for annoncering, skal afkrydses!");
      f.checkbox.focus();
      return false;
      }
   
  var t = "\\wáàãââæåçéèêëìíîïñòóôõöøùúûüýÿ";
      var regexp = new RegExp("@["+t+"]["+t+"\\.\\-]*\\.[a-z]{2,6}","i");
      tekst=f.email.value.toLowerCase();
      if ((!regexp.test(tekst)||tekst.match(/\.\.|@\.|-@|--/))&&tekst.length>0){
          alert ("Det lader til at din e-mail ikke er gyldig!");
          f.email.focus();
          return false;
    }
  var elm = f.elements["imagefile[1]"];
  if(!elm.value.toLowerCase().match(/\.jpe?g$|^$/)){
      alert("Du kan kun uploade billeder af typen jpg eller jpeg!\nLæs evt. under hjælp nederst!");
      elm.focus();
      form.mySubmit.disabled = false;
      return false;
    }

  f.mySubmit.disabled = true;
  return true; 
}
</script>

<script type="text/JavaScript">
<!-- Begin
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
countfield.value = maxlimit - field.value.length;
}
// End -->
</script>

    <style>
          <!--
                .speciel{
                        color:#DD0000;
                        font:16px "Times New Roman",helvetica,tahoma,Georgia,verdana,arial,"Courier New";
                        text-decoration: none;
                        font-style: normal;                   
                        font-weight: bold;
                }
                .mellem{
                        color:#0066cc;
                        font:15px "Times New Roman",helvetica,tahoma,Georgia,verdana,arial,"Courier New";
                        text-decoration: none;
                        font-style: normal;                   
                        font-weight: bold;
                }
                .lille{
                        color:#000000;
                        font:15px "Times New Roman",Arial,Helvetica,sans-serif;
                        text-decoration: none;
                }
                .lilleLink{
                        color:#0000CD;
                        font:15px "Times New Roman",Arial,Helvetica,sans-serif;
                        text-decoration: none;
                }
            body     
                { 
                border: #92BCE6; scrollbar-3dlight-color: #E4E9EC; scrollbar-arrow-color: #FEC820; scrollbar-darkshadow-color: #92BCE6; scrollbar-highlight-color:#92BCE6; scrollbar-shadow-color: #E4E9EC; scrollbar-track-color: #F1F6F9 
                }
        -->
</style>

    <title>Opret bortgivesannonce</title>   

</head>

<body link="#0000cc" vlink="#0000cc">

<?PHP
require_once("../members/common.php");

function resize( $filename, $newfilename, $maxw, $maxh )
{
    $result = false;
    $srcim = imagecreatefromjpeg( $filename );
    $ow = imagesx( $srcim );
    $oh = imagesy( $srcim );
    $wscale = $maxw / $ow;
    $hscale = $maxh / $oh;
    $scale = ( $hscale < $wscale ? $hscale : $wscale );
    $nw = round( $ow * $scale, 0 );
    $nh = round( $oh * $scale, 0 );
    $dstim = imagecreatetruecolor( $nw, $nh );
    imagecopyresampled( $dstim, $srcim, 0, 0, 0, 0, $nw, $nh, $ow, $oh );
    $result = imagejpeg( $dstim, $newfilename, 85 );
    imagedestroy( $dstim );
    imagedestroy( $srcim );
    return $result;
}

$allowPics = array("jpg","jpeg","jpe","JPG","JPEG","JPE");

if($userId = is_logged())
{
    $userName = get_name();   
}
else
{
    echo' <body scroll="no" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
            <tr>
                <td width="100%">
                    <div align="center">
                    <img src="../NewFiles/ikkeLoggetInd.gif" alt="" border="0"><br> 
                </div>
                </td>
            </tr>
            <tr>
                <td width="100%">
                    <div align="center">
                    </div>
                </td>
            </tr>
        </table>
    </body> ';
    break;
}

if(!empty($_POST['produkt']))
{
    //Strip tags er sat på inputfelter for at undgå html-tags. htmlentities er sat på for at undgå at databasen sætter \\ foran ""
    $userId = mysql_real_escape_string($_POST['userId']);
    $gruppe = mysql_real_escape_string($_POST['gruppe']);
    $kategori = mysql_real_escape_string($_POST['kategori']);
    $produkt = htmlentities(strip_tags($_POST['produkt']));
    $supplerendeTekst = htmlentities(strip_tags($_POST['supplerendeTekst']));
    $pris = mysql_real_escape_string(strip_tags($_POST['pris']));
    $loebetidForAnnonce = mysql_real_escape_string($_POST['loebetidForAnnonce']);
    $tlf1 = mysql_real_escape_string(strip_tags($_POST['tlf1']));
    $tlf2 = mysql_real_escape_string(strip_tags($_POST['tlf2']));
    $email = mysql_real_escape_string(strip_tags($_POST['email']));
    $postNr = mysql_real_escape_string(strip_tags($_POST['postNr']));
    $checkbox = mysql_real_escape_string($_POST['checkbox']);
   
    mysql_query ("INSERT INTO bortgivesAfProdukt (Id,userId,gruppe,kategori,produkt,supplerendeTekst,pris,loebetidForAnnonce,tlf1,tlf2,email,postNr,checkbox)
    VALUES ('','".$userId."','".$gruppe."','".$kategori."','".$produkt."','".$supplerendeTekst."','".$pris."', DATE_ADD(NOW(),
    INTERVAL ".$loebetidForAnnonce." DAY),'".$tlf1."','".$tlf2."','".$email."','".$postNr."','".$checkbox."')");
   
    if(mysql_affected_rows()>0)
    {
        $errmsg = "";
        $artikelID = mysql_insert_id();
        for($i = 1; $i <= 1; $i++)
       
        {
            if($_FILES['imagefile']['size'][$i] > 2048000)
            {
                echo " <script type=\"text/javascript\">
                    alert(\"Dit billede var for stort, og kunne \nderfor ikke komme med i annoncen!\");
                    </script>";
            }
            else
            {
                $extension = strtolower(end(explode(".",$_FILES['imagefile']['name'][$i])));
                if(!in_array($extension,$allowPics))
                {   
                    $errmsg .= "Billede " . $i . " er forkert type, kun jpeg!<br>";
                }
                else
                {
                    $dato = date("y-m-d h:i:s");
                    resize($_FILES['imagefile']['tmp_name'][$i],"latest.img",350,350);
                    $instr = fopen("latest.img","rb");
                    $image = addslashes(fread($instr,filesize("latest.img"))); 
                               
                    mysql_query ("insert into billeder_bortgivesAfProdukt (id, artikelid, pic, oprettetDato)
                    values ('', ".$artikelID.",'".$image."','.$dato.')") or die(mysql_error());
                }
            }
        }
        echo "<b><span class=\"speciel\">Annoncen er oprettet!</span></b><br>
        <span class=\"lille\">- Det er kun tilladt at oprette &eacute;n annonce pr. vare/produkt.</span><br>
        <span class=\"lille\">- Du kan slette, redigere eller forlænge dine annoncers løbetid under &quot;Min konto&quot;</span>";
    }
    else
    {
      echo "Fejl: " . mysql_error() . "<br>";
    }
}
?>

<?PHP
if($userId = is_logged())
{
    $userId = is_logged();
}
$query=mysql_query("SELECT userId FROM `users` WHERE userId = '".is_logged()."'");
$row=mysql_fetch_assoc($query);
?>

    <form action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="form" enctype="multipart/form-data" onsubmit="return validering(this)">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
            <tr>
                <td width="100%">
                    <div align="center">
                        <table width="534" border="0" cellspacing="2" cellpadding="0">
                            <tr>
                                <td width="530">
                                    <p><span class="mellem"><b><u>Her har du mulighed for at oprette en GRATIS bortgives annonce</u> </b></span></p>
                                    <p><span class="lille"><b>Bem&aelig;rk</b>: det er ikke tilladt at skrive firmanavn, din hjemmeside ol. i annoncen! </span></p>
                                    <p></p>
                                </td>
                            </tr>
                            <tr>
                                <td width="530">
                                    <table width="530" border="0" cellspacing="2" cellpadding="0">
                                        <tr>
                                            <td width="200"></td>
                                            <td><input type="hidden" name="userId" value="<? echo $row['userId']; ?>" readonly size="5"></td>
                                        </tr>
                                        <tr>
                                            <td width="200"><span class="lille">Produktgruppe</span></td>
                                            <td><select name="gruppe" onchange="add_kategori(this.selectedIndex);">
                                                    <option>V&aelig;lg produktgruppe</option>
                                                </select> <font color="#ee0000">* <a onclick="window.open('../kategoriopbygning.html','win3', 'height=550,width=480,top=150,left=100,screenY=150,screenX=100,scrollbars=yes')" href="#"><img src="../NewFiles/question.gif" alt="" height="16" width="11" border="0"></a></font></td>
                                        </tr>
                                        <tr>
                                            <td width="200"><span class="lille">Underkategori</span></td>
                                            <td><select name="kategori">
                                                    <option value="0"></option>
                                                </select> <font color="#ee0000">*</font></td>
                                        </tr>
                                        <tr>
                                            <td width="200"><span class="lille">Produkt/overskrift</span></td>
                                            <td><input type="text" name="produkt" size="25" maxlength="33"> <font color="#ee0000">*</font></td>
                                        </tr>
                                        <tr>
                                            <td valign="top" width="200"><span class="lille">Supplerende tekst<br>
                                                    (maks 650 tegn)</span></td>
                                            <td><textarea onkeydown="textCounter(this.form.supplerendeTekst,this.form.remLen,650);" onkeyup="textCounter(this.form.supplerendeTekst,this.form.remLen,650);" name="supplerendeTekst" rows="4" cols="34" wrap="physical"></textarea><br>
                                                <input type="text" name="remLen" value="650" readonly size="3" maxlength="3"> <span class="lille">tegn tilbage</span></td>
                                        </tr>
                                        <tr>
                                            <td width="200"><span class="lille">Pris i hele kroner</span></td>
                                            <td><input type="text" name="pris" value="0" readonly size="15" maxlength="5" border="0"> <font color="#ee0000">*</font></td>
                                        </tr>
                                        <tr>
                                            <td width="200"><span class="lille">L&oslash;betid for annoncen</span></td>
                                            <td><span class="lille">30 dage</span><input type="radio" name="loebetidForAnnonce" value="30" border="0"> <span class="lille">| 60 dage</span><input type="radio" name="loebetidForAnnonce" value="60" border="0"> <span class="lille">| 90 dage</span><input type="radio" name="loebetidForAnnonce" value="90" checked border="0"> <span class="lille">| 120 dage</span><input type="radio" name="loebetidForAnnonce" value="120" border="0"></td>
                                        </tr>
                                    </table>
                                    <p></p>
                                    <table width="530" border="0" cellspacing="2" cellpadding="0">
                                        <tr>
                                            <td>
                                                <hr>
                                                <span class="mellem"><b><u>Tilf&oslash;j evt. billede til din annonce</u></b></span>
                                                <p><span class="lille">Billedtypen skal v&aelig;re jpg ell. jpeg, og filst&oslash;rrelsen m&aring; max v&aelig;re 500 kb. Klik p&aring; sp&oslash;rgsm&aring;lstegnet for en udf&oslash;rlig guide og f&aring; et gratis billedeprogram.</span> <a onclick="window.open('../billedGuide.html','win15', 'height=480,width=580,top=150,left=100,screenY=150,screenX=100,scrollbars=yes')" href="#"><img src="../NewFiles/question.gif" alt="" height="16" width="11" border="0"></a></p>
                                            </td>
                                        </tr>
                                    </table>
                                    <p></p>
                                    <table width="530" border="0" cellspacing="2" cellpadding="0">
                                        <span class="lille">
                                            <tr>
                                                <td width="200"><span class="lille">Billede</span></td>
                                                <td><input type="file" name="imagefile[1]"></td>
                                            </tr>
                                        </span>
                                    </table>
                                    <p></p>
                                    <table width="530" border="0" cellspacing="2" cellpadding="0">
                                        <tr>
                                            <td>
                                                <hr>
                                                <span class="mellem"><b><u>Dine oplysninger, som skal vises i annoncen</u></b></span>

                                                <p><span class="lille">Telefonnr. eller e-mail skal udfyldes.</span></p>
                                            </td>
                                        </tr>
                                    </table>
                                    <p></p>
                                    <table width="462" border="0" cellspacing="2" cellpadding="0">
                                        <span class="lille">
                                            <tr>
                                                <td width="200"><span class="lille">Telefonnr. 1</span></td>
                                                <td><input type="text" name="tlf1" size="25" maxlength="8" border="0"></td>
                                            </tr>
                                            <tr>
                                                <td width="200"><span class="lille">Telefonnr. 2</span></td>
                                                <td><input type="text" name="tlf2" size="25" maxlength="8" border="0"></td>
                                            </tr>
                                            <tr>
                                                <td width="200"><span class="lille">E-mail</span></td>
                                                <td><input type="text" name="email" size="25" maxlength="40" border="0"></td>
                                            </tr>
                                            <tr>
                                                <td width="200"><span class="lille">Postnr.</span></td>
                                                <td><input type="text" name="postNr" size="10" maxlength="4" border="0"> <font color="#ee0000">*</font></td>
                                            </tr>
                                            <tr>
                                                <td width="200"></td>
                                                <td></td>
                                            </tr>
                                        </span>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td width="530"><span class="lille">Jeg har l&aelig;st og forst&aring;et vedt&aelig;gter for annoncering</span> <input type="checkbox" name="checkbox" value="1" border="0">
                                    <p><input type="submit" name="mySubmit" value="Opret bortgivesannonce">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="window.open('../hjaelpTilAnnonce.html','win1', 'height=480,width=440,top=150,left=100,screenY=150,screenX=100')" href="#"><span class="lilleLink"><u>Hj&aelig;lp</u></span></a> | <a onclick="window.open('../vedtaegterAnnoncering.html','win2', 'height=500,width=500,top=150,left=100,screenY=150,screenX=100,scrollbars=yes')" href="#"><span class="lilleLink"><u>Vedt&aelig;gter for annoncering</u></span></a></p>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
Avatar billede htm Nybegynder
06. januar 2007 - 12:51 #8
1. Smid følgende ind efter f.mySubmit.disabled = true;

document.getElementById('pleasewait').style.display = 'block';
waitMsg();

2. Indsæt var dots=0; og waitMsg funktionen ind lige før din validering funktion
3. Indsæt #pleasewait css'en ind i bunden af din CSS lige før "--></style>"
4. Indsæt <div id="pleasewait">Please wait...</div> i bunden lige før "</body>"

Er du i tvivl, så se i mit eksempel.

Då kan du bare ændre på størrelsen og placering etc. i CSS'en
Avatar billede JJ77 Juniormester
07. januar 2007 - 19:50 #9
super.. jeg prøver det lige en af dagene. har super travlt lige pt..
Avatar billede roenving Novice
22. januar 2007 - 05:29 #10
-- og så er det vel tid til at lukke ?-)
Avatar billede JJ77 Juniormester
04. februar 2007 - 23:59 #11
Hej igen... smider du ikke lige et svar, saa du kan faa dine point...
.. og tak for hjaelpen..
Avatar billede htm Nybegynder
05. februar 2007 - 06:02 #12
OK, glad for jeg kunne hjælpe :-)
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