Posta formulär med ajax

Hej

Om jag ska göra ett ajax anropa och hämta en sida i bakgrunden utan att uppdatera sidan, går det då posta ett formulär som finns på sidan?

Som jag gjort nu så har jag ju satt ihop en querystring till den asp fil jag anropar men detta blir lite jobbigt och nu har jag långa listor med fält som jag behöver posta?

Mvh

Hej, klart det går! :)

Här är en tutorial där man använder jQuery för att göra just det.
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Här finns dokumentationen om jQuery's Ajax: http://docs.jquery.com/Ajax

Edit: Eller vänta nu, menade du att du skulle hämta sidan med formuläret i med ajax? Då vart det lite annorlunda..

Är det: http://voigt.se/sandbox/ajaxForm/ du är ute efter?

voigtann1: Precis det jag söker, kllade koden och du postar ju faktiskt formuläret, hur går det till ??

Tidigare har jag hållt på, på detta sätt:

 UseAjax(document.getElementById('week').value,'listOrders.asp?door='+document.getElementById('door').value+'&ordernr='+document.getElementById('ordernumber').value+'&week=','showResult','img/waiting2.gif');

Och ibland ruskigt långa querystring...

Koden som jag har, har jag för mig den kollar URL:en på formuläret, hämta vad den har för method och hämta ut alla input data från formuläret. och sen lägger den in ett Querystring värde med AJAX=true så man kan ta hand om AJAX specifika requests (du kan även bara kolla headern som skickas till din ASP kod och se om den är ett AJAX anrop).

plugin:et"kräver jquery vet inte riktigt vad din metod UseAjax gör men förmodligen inte svårare än att lägga in det i jquery koden heller.

$("#AjaxForm").ajaxPost({
loadingMessage: "Laddar....<img .../>";
});

Kan du också skriva för att ändra "laddnings"-texten

funkar den koden även om du inte fördefinierat exakt dom fält som finns.. Jag vet ju aldrig hur många input fält mitt formulär består av utan jag loop ju igenom hela request.form() ?

finns det begränsningar med querystrings eller kan dom vara hur långa som helst?

Den kommer ta alla inputs i formuläret som finns när du postar ditt formulär så det är inga problem.

Querystrings eller URL:er kan inte vara hur långa som helst.. Kommer inte ihåg riktigt men varför skulle du använda det på ett formulär som kanbli sjukt stort?

Men om du vill köra med querystring så kör method till GET pluginet skall klara det

Haha vi får nog definiera sjukt stort: har gjort en produktionslista med mellan 50-100 poster där man ändra turordning och även sätta status för varje post, nu vill jag uppdatera denna lista lite snyggt.
men 100 rader och två "variabler" til varhje rad är inte stort då?

IE8 har en gräns på 2083 tecken. Och det känns inte direkt optimalt att skicka sån data du verkar vilja få in med ett GET anrop, makes no sence.

Däremot kan du ju postar till ett QS:

<form action="minurl.asp?id=1" method="post">
<input>
</form>

Och hämta upp id med request.querystring men alla andra fält med request.form

Dock skall man nog skriva om plugin:et lite känns det som, ge lite mer frihet än vad den ge dig just nu, få fixa det på söndag när man har tillgång till en dator ;)

Jag tror inte jag hänger med riktigt.. Det här jquery "köret" verkar ju skapa en querystring till den fil som anropas om jag fattat det rätt..

Men hur menar du att jag från den filen som anropas ska kunna hämta något via request.form?

Förstå inte vad du menar...

När du postar ett formulär så postar du den till ett dokument.

Om vi ha formuläret ovan så kommer slut resultatet ge dig två querystring värden ett ID och ett AJAX, resten av formuläret kommer ligga i Request.Form.

men om du ska skicka ett formulär med ajax, hur går det til.. När jag använt ajax då anger man den fil som ska anropas och som returnerar någon form av data..
Hur anropar man själv ajax funktionen så att formuläret postas till den fil som anropas??

Så här se min ajax funktion ut

//AJAX
function UseAjax(SendTxt,File,FieldToShowIn,img,FieldToView)    {
//alert(File+SendTxt);
document.getElementById(FieldToView).innerHTML="<img src='"+img+"' align='center'>";
var xmlhttp
{
if (SendTxt.length==0)
  {
  document.getElementById(FieldToShowIn).innerHTML="";
  return;
  }
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support XMLHTTP!");
  return;
  }
var url
url=File+SendTxt
url=url+"&randomid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById(FieldToShowIn).innerHTML=xmlhttp.responseText;
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
      return new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
  }
if (window.ActiveXObject)
  {
      return new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
  }
return null;
}
}

AJAX behöver inte retunera något om du inte vill, men mitt plugin kommer ersätta formuläret med inget då.

På din sida som du postar till:

<%
If Request.QueryString("ajax") = "true" Then
Response.Write "Tack, eller vad som helst som skall ersätta formuläret"
Response.End
End If
%>

Nate.A har länkat till jquery AJAX vilket borde vara tillräckligt att modifiera mina koder.

Jodå ja är med på returen och den biten.. Har inte varit hemma så jag kunnat prova koden men jag förstår inte hur själv funktion kan posta formuläret så att den anropade filen kan hämta inputs via request.post()??

Din method postar inte POST data(request.Form) men min kod gör det, skapar ett formulär som postar till en ASP fil och i din ASP fil så ser kör du bara:

<%
Response.Write("QueryString:<br>")
For each item in Request.QueryString
Response.Write(item & " = " & Request.QueryString(item) & "<br>")
Next

Response.Write("Form:<br>")
For each item in Request.Form
Response.Write(item & " = " & Request.Form(item) & "<br>")
Next

Så ser du vad du postar i både din QueryString och i din Form data. Om du vill förstå dig på AJAX med jquery så ladda ner deras källkod(developer version och inte deras packade version eller på github) och se vad dom gör, är inte direkt något avancerad.