webForumDet fria alternativet
Logga in / Bli medlem

Meddelande efter postat formulär

16 svar · 1 307 visningar · startad av devotion

devotionMedlem sedan jan. 20013 582 inlägg
#1

Hej!

Jag vet inte om detta är helt rätt forumdel... Är det inte det så får någon vänlig själ flytta.. :)

Jag har en kontakt sida:
http://peterpan.kontrollpanelen.se/sydostel.se/kontakt.asp

På sidan kan man även skicka ett meddelande med formulär.

Nu till frågan:

Hur kan man på något snyggt sätt göra för att visa han som skickat meddelandet att meddelandet har skickats?

Jag vill inte komma till någon annan sida utan vill att man står kvar på kontaktsidan..

Kloka idéer mottages tacksamt

Mvh
Henrik

Peter SMedlem sedan dec. 20025 483 inlägg
#2

Ett sätt är ju att sätta action till kontakt.asp och därmed göra en postback. Visserligen laddas sidan om, men (fel)meddelandet till besökaren hamnar ju på samma sida.

Ett andra sätt är att använda AJAX:

<script type="text/javascript">
function processForm()
{
  var elms = arguments[0].elements, hdr = "";
  for (var i = 1; i < arguments.length; ++i){
    hdr += arguments[i] + "=" + elms[arguments[i]].value + "&";
    elms[arguments[i]].value = "";
  }

  hdr = hdr.replace(/&$/,"");

  var xobj = null;
  if (window.ActiveXObject) xobj = new window.ActiveXObject("Microsoft.XMLHTTP");
  else if (window.XMLHttpRequest) xobj = new window.XMLHttpRequest();

  if (!xobj) return true;

  xobj.onreadystatechange = function()
  {
    if (xobj.readyState == 4 && xobj.status == 200){
      document.getElementById("message").innerHTML = xobj.responseText;
    }
  }
  xobj.open("POST", "form.asp", true);
  xobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xobj.send(hdr);

  return false;
}

function validate(...)
{
  //...
}

window.onload = function()
{
  document.forms["daForm"].onsubmit = function()
  {
    if (!validate(this)) return false;
    return processForm(this,"name","email");
  }
}
</script>
<form name="daForm" action="form.asp">
 <input name="name"><br>
 <input name="email"><br>
 <input type="submit">
</form>
<div id="message"></div>

Du validerar fälten i validate() och på servern i form.asp. Det kan se ut så här:

'form.asp
email = request.form("email")
if ... then
  response.write "Felaktig e-postadress"
end if
devotionMedlem sedan jan. 20013 582 inlägg
#3

Verkar coolt.... :)

Ska titta på det när jag kommer hem från jobbet...

Mvh
Henrik

devotionMedlem sedan jan. 20013 582 inlägg
#4

Hej igen! :)

Det fungerar inte riktigt... Jag får inte med mig formulärdatat...

Mailet skickas, men det är "tomt"!

Jag har en fil som tar emot informationen från formuläret och skickar via e-post!

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<%
Dim sName, sEmail, sMessageSubject, sMessage, sTo, sFrom, sSubject, sTextBody, objMail

sName = Request.Form("name")
sEmail = Request.Form("email")
sMessageSubject = Request.Form("subject")
sMessage = Request.Form("message")

sTo = "henrik@lindell-aberg.com"
sFrom = sEmail
sSubject = "Meddelande skickat från sydostel.se: "& sMessageSubject
sTextBody = sName & " har skickat följande meddelande från sydostel.se:" & vbcrlf & sMessage

Set objMail = Server.CreateObject("CDO.Message")

objMail.From = sFrom  
objMail.To = sTo 
objMail.Subject= sSubject 
objMail.TextBody = sTextBody 

objMail.Send 
Set objMail = Nothing

Response.write "medelandet har skickats!"

%>
</body>
</html>

Sidan med formuläret ser ut så här:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Kontakt - SydostEl i Karlskrona AB</title>
<link rel=stylesheet href=style.css>

<script type="text/javascript">
function processForm()
{
  var elms = arguments[0].elements, hdr = "";
  for (var i = 1; i < arguments.length; ++i){
    hdr += arguments[i] + "=" + elms[arguments[i]].value + "&";
    elms[arguments[i]].value = "";
  }

  hdr = hdr.replace(/&$/,"");

  var xobj = null;
  if (window.ActiveXObject) xobj = new window.ActiveXObject("Microsoft.XMLHTTP");
  else if (window.XMLHttpRequest) xobj = new window.XMLHttpRequest();

  if (!xobj) return true;

  xobj.onreadystatechange = function()
  {
    if (xobj.readyState == 4 && xobj.status == 200){
      document.getElementById("message").innerHTML = xobj.responseText;
    }
  }
  xobj.open("POST", "sendMail.asp", true);
  xobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xobj.send(hdr);

  return false;
}

function validate(frm)
{
  var elms = frm.elements;
  if (elms["name"].value.replace(/(^\s+)|(\s+$)/g,"") == ""){
    alert("Du måste ange ditt namn!");
    return false;
  }
  if (!/^[^\s@]+@(?:[\wåäö-]+\.)+[a-z]{2,6}$/i.test(elms["email"].value)){
    alert("Du har inte angett en korrekt e-poastadress!");
    return false;
  }
  if (elms["message"].value.replace(/(^\s+)|(\s+$)/g,"") == ""){
    alert("Du måste skriva ett meddelande!");
    return false;
  }
  return true;
}
window.onload = function()
{
  document.forms["mailForm"].onsubmit = function()
  {
    if (!validate(this)) return false;
    return processForm(this,"name","email");
  }
}

</script>
</head>
<body>
<div class=header>
 <h1><img alt="SydostEl i Karlskrona AB" src="images/logo.png"></h1>
</div>

<div class=article id=kontakt>
 <h2>Kontakt</h2>
 <h3>Adress</h3>
 <p>SydostEl i Karlskrona AB<br>
 Uranv&auml;gen<br>
 371 49 KARLSKRONA
 <p>Se <a href="http://kartor.eniro.se/query?&amp;what=map&amp;zl=5&amp;ms=0&amp;mapstate=5%3B1489544%3B6231830%3B0%3B1486768%3B6234218%3B1492322%3B6229444%3B&amp;mapcomp=19161317%3B%3BSydostEl%20AB%3BUranv.%3B%3B%3B37149%3BKARLSKRONA%3B0455%3B269%2055%3B%3B%3B1489544%3B6231831%3B1%3B1%3B0.0000%3B0.0000%3B&amp;stq=0&amp;click_id=GulaSidorna_ToMap&amp;imgmode=0">karta p&aring; eniro.se</a>.
 <h3>Telefon</h3>
 <ul>
  <li>Kontoret: 0455-269 55
  <li>Telefax: 0455-269 90
 </ul>
 <h3>Övriga uppgifter</h3>
 <ul>
  <li>Kontoret: <a href="mailto:kontoret@sydostel.se">kontoret@sydostel.se</a>
  <li>Postgiro: 14 22 70-8
  <li>Bankgiro: 5137-5509
  <li>Organisationsnummer: 556606-7343
 </ul>
 <p>F&ouml;r individuella kontaktuppgifter, se <a href=personal.asp>personalsidan</a>.
 <p>F&ouml;retaget innehar F-skattesedel.
 <h3>Kontaktformul&auml;r</h3>
 <form action="sendMail.asp" method="post" name="mailForm" id="mailForm" onSubmit="return validate(this)">
  <p><label>Namn: <input name=name></label>
  <p><label>Epostadress (obligatoriskt): <input name=email type=text></label>
  <p><label>Ärende: <input name=subject></label>
  <p><label>Meddelande (obligatoriskt): <textarea name=message></textarea></label>
  <p><input type=submit value=Skicka></p>
 </form>
 <div id="message"></div>
</div>

<div class=nav>
 <h2>Navigering</h2>
 <ul>
  <li><a href="default.asp">Start</a>
  <li><a href="foretaget.asp">F&ouml;retaget</a>
  <li><a href="personal.asp">Personal</a>
  <li><a href="projekt.asp">Projekt</a>
  <li><a href="nyheter.asp">Nyheter</a>
  <li class=current><span>Kontakt</span>
  <li class=login><a href="#">Logga in</a>
 </ul>
</div>

<div class=secnav>
 <h2>Verksamhet</h2>
 <ul>
  <li><a href="elinstallationer.asp">Elinstallationer</a>
  <li><a href="tele.asp">Tele</a>
  <li><a href="data.asp">Data</a>
  <li><a href="sakerhet.asp">S&auml;kerhet</a>
  <li><a href="styr.asp">Styr &amp; regler</a>
 </ul>
</div>

<div class=ads>
 <h2>Annonser</h2>
 <ul>
  <li><a href="#"><img alt="Uppdrag Nu v3" src="images/ad-uppdrag.png"></a>
  <li><a href="#"><img alt="EIO" src="images/ad-eio.png"></a>
 </ul>
</div>

<div class=footer>
 <p>Copyright &copy; Sydostel i Karlskrona AB 2006
</div>
</body>

Mvh
Henrik

Peter SMedlem sedan dec. 20025 483 inlägg
#5

Några ändringar gjorda (rött):

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Kontakt - SydostEl i Karlskrona AB</title>
<link rel=stylesheet href=style.css>

<script type="text/javascript">
function processForm()
{
  var elms = arguments[0].elements, hdr = "";
  for (var i = 1; i < arguments.length; ++i){
    hdr += arguments[i] + "=" + encodeURIComponent(elms[arguments[i]].value) + "&";
    elms[arguments[i]].value = "";
  }

  hdr = hdr.replace(/&$/,"");

  var xobj = null;
  if (window.ActiveXObject) xobj = new window.ActiveXObject("Microsoft.XMLHTTP");
  else if (window.XMLHttpRequest) xobj = new window.XMLHttpRequest();

  if (!xobj) return true;

  xobj.onreadystatechange = function()
  {
    if (xobj.readyState == 4 && xobj.status == 200){
      [red]document.getElementById("msg").innerHTML = xobj.responseText;[/red]
    }
  }
  [red]xobj.open("POST", arguments[0].action, true);[/red]
  xobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xobj.send(hdr);

  return false;
}

function validate(frm)
{
  var elms = frm.elements;
  if (elms["name"].value.replace(/(^\s+)|(\s+$)/g,"") == ""){
    alert("Du måste ange ditt namn!");
    return false;
  }
  if (!/^[^\s@]+@(?:[\wåäö-]+\.)+[a-z]{2,6}$/i.test(elms["email"].value)){
    alert("Du har inte angett en korrekt e-poastadress!");
    return false;
  }
  if (elms["message"].value.replace(/(^\s+)|(\s+$)/g,"") == ""){
    alert("Du måste skriva ett meddelande!");
    return false;
  }
  return true;
}
window.onload = function()
{
  document.forms["mailForm"].onsubmit = function()
  {
    if (!validate(this)) return false;
    [red]return processForm(this,"name","email","subject","message");[/red]
  }
}

</script>
</head>
<body>
<div class=header>
 <h1><img alt="SydostEl i Karlskrona AB" src="images/logo.png"></h1>
</div>

<div class=article id=kontakt>
 <h2>Kontakt</h2>
 <h3>Adress</h3>
 <p>SydostEl i Karlskrona AB<br>
 Uranv&auml;gen<br>
 371 49 KARLSKRONA
 <p>Se <a href="http://kartor.eniro.se/query?&amp;what=map&amp;zl=5&amp;ms=0&amp;mapstate=5%3B1489544%3B6231830%3B0  %3B1486768%3B6234218%3B1492322%3B6229444%3B&amp;mapcomp=19161317  %3B%3BSydostEl%20AB%3BUranv.%3B%3B%3B37149%3BKARLSKRONA%3B04  55%3B269%2055%3B%3B%3B1489544%3B6231831%3B1%3B1%3B0.0000%3B0  .0000%3B&amp;stq=0&amp;click_id=GulaSidorna_ToMap&amp;imgmode=0">karta p&aring; eniro.se</a>.
 <h3>Telefon</h3>
 <ul>
  <li>Kontoret: 0455-269 55
  <li>Telefax: 0455-269 90
 </ul>
 <h3>Övriga uppgifter</h3>
 <ul>
  <li>Kontoret: <a href="mailto:kontoret@sydostel.se">kontoret@sydostel.se</a>
  <li>Postgiro: 14 22 70-8
  <li>Bankgiro: 5137-5509
  <li>Organisationsnummer: 556606-7343
 </ul>
 <p>F&ouml;r individuella kontaktuppgifter, se <a href=personal.asp>personalsidan</a>.
 <p>F&ouml;retaget innehar F-skattesedel.
 <h3>Kontaktformul&auml;r</h3>
 [red]<form action="sendMail.asp" method="post" name="mailForm" id="mailForm">[/red]
  <p><label>Namn: <input name=name></label>
  <p><label>Epostadress (obligatoriskt): <input name=email type=text></label>
  <p><label>Ärende: <input name=subject></label>
  <p><label>Meddelande (obligatoriskt): <textarea name=message></textarea></label>
  <p><input type=submit value=Skicka></p>
 </form>
 [red]<div id="msg"></div>[/red]
</div>

<div class=nav>
 <h2>Navigering</h2>
 <ul>
  <li><a href="default.asp">Start</a>
  <li><a href="foretaget.asp">F&ouml;retaget</a>
  <li><a href="personal.asp">Personal</a>
  <li><a href="projekt.asp">Projekt</a>
  <li><a href="nyheter.asp">Nyheter</a>
  <li class=current><span>Kontakt</span>
  <li class=login><a href="#">Logga in</a>
 </ul>
</div>

<div class=secnav>
 <h2>Verksamhet</h2>
 <ul>
  <li><a href="elinstallationer.asp">Elinstallationer</a>
  <li><a href="tele.asp">Tele</a>
  <li><a href="data.asp">Data</a>
  <li><a href="sakerhet.asp">S&auml;kerhet</a>
  <li><a href="styr.asp">Styr &amp; regler</a>
 </ul>
</div>

<div class=ads>
 <h2>Annonser</h2>
 <ul>
  <li><a href="#"><img alt="Uppdrag Nu v3" src="images/ad-uppdrag.png"></a>
  <li><a href="#"><img alt="EIO" src="images/ad-eio.png"></a>
 </ul>
</div>

<div class=footer>
 <p>Copyright &copy; Sydostel i Karlskrona AB 2006
</div>
</body>
devotionMedlem sedan jan. 20013 582 inlägg
#6

Det blir kanonsnyggt!

:D

Mvh
Henrik

devotionMedlem sedan jan. 20013 582 inlägg
#7

Men vad händer om man inte har javascript?

Hur ska man hantera det?

//Henrik

@ndersMedlem sedan juni 200032 969 inlägg
#8

Utan javascript är du helrökt, så du får nog validera / kontrollera / meddela på serversidan också. Där kan du ju veta om formuläret postats med javascript eller inte.

Peter SMedlem sedan dec. 20025 483 inlägg
#9

Du kan rökas hel även med JS, skulle inte XMLHTTP gå att använda. Men fiffigt nog skickas formuläret ändå precis som i fallet då JS ej är aktiverat.

Peter SMedlem sedan dec. 20025 483 inlägg
#10

Inlägg #1274197 uppdaterat enligt http://www.webforum.nu/showthread.php?p=1274500#post1274500.

devotionMedlem sedan jan. 20013 582 inlägg
#11

Det fungerar finfint nu....

Men, vad händer om användaren inte aktiverat Java script?

Och om det blir problem, hur kan man lösa det?

Mvh
Henrik

@ndersMedlem sedan juni 200032 969 inlägg
#12

Om användaren har javascript inaktiverat postas formuläret precis som vanligt. Du kan ju alltid testa så du ser hur det blir, så du kan anpassa så det åtminstone fjungerar. :)

mvh

Peter SMedlem sedan dec. 20025 483 inlägg
#13

Om användaren ej aktiverat JS kommer denne navigeras till sendMail.asp. För att ta reda på huruvida JS använts för att skicka formulärdatat, kan du lägga till ett input.hidden-fält

<input type=hidden name=jspost value=0>

...ändra processForm() till

function processForm()
{
  var xobj = null;
  if (window.ActiveXObject) xobj = new window.ActiveXObject("Microsoft.XMLHTTP");
  else if (window.XMLHttpRequest) xobj = new window.XMLHttpRequest();

  if (!xobj) return true;

  var elms = arguments[0].elements, hdr = "";
  
  elms["jspost"].value = 1;
  
  for (var i = 1; i < arguments.length; ++i){
    hdr += arguments[i] + "=" + encodeURIComponent(elms[arguments[i]].value) + "&";
    elms[arguments[i]].value = "";
  }

  hdr = hdr.replace(/&$/,"");

  xobj.onreadystatechange = function()
  {
    if (xobj.readyState == 4 && xobj.status == 200){
      document.getElementById("msg").innerHTML = xobj.responseText;
    }
  }
  xobj.open("POST", arguments[0].action, true);
  xobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xobj.send(hdr);

  return false;
}

...och i sendMail.asp kontrollera request.form("jspost")

'sendMail.asp
if request.form("jspost") = "1" then
  'skickat med JS
else
  'ej skickat med JS
end if
devotionMedlem sedan jan. 20013 582 inlägg
#14

Hmmm... okej!

Men, vad har jag för nytta av att veta om det postas med JS eller inte?? :)

Menar du att jag ska använda värdet för att göra kontroll på indatat?

Mvh
Henrik

Peter SMedlem sedan dec. 20025 483 inlägg
#15

Jag tänkte snarare på presentationen. Används ej JS har du en hel sida att visa upp (sendMail.asp) - annars importerar du bara en liten mängd text till en <div> eller så på kontakt.asp.

devotionMedlem sedan jan. 20013 582 inlägg
#16

Aha! Ok! Jag fattar... :)

//Henrik

web00132Medlem sedan maj 2001797 inlägg
#17

Jag använder detta scriptet tillsammans med PHP och det fungerar alldeles utmärkt. Men om jag vill tanka upp en fil (i detta fall en jpg-bild), går det att modifiera javascriptet på ett enkelt sätt så det funkar också?
Jag har testat men lyckas inte få till det. Vore ju fantastiskt om jag kunde tanka upp bilden och sen visa den direkt när den är upptankad också.

Editerat: Jag sket i det och använde den här istället: http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

133 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)