Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  8 535
Hei.

Prøver å få til noe AJAX-funksjonalitet på noen former og checkboxes som skal sende informasjon videre til ett PHP-script, uten at hele siden trenger å lastes på nytt.

Formen ser slik ut:

HTML-kode

<form>
	<fieldset>
		<legend>Bill: </legend>
		Title: <input type="text" name="title" id="title" /><br />
		Store: <input type="text" name="store" id="store" /><br />
		Amount: <input type="text" name="amount" id="amount" /> Kr.<br />
	</fieldset>
	<fieldset>
		<legend>Payers: </legend>
		<input type="checkbox" name="payer[]" value="Eivind" /> Eivind<br />
		<input type="checkbox" name="payer[]" value="Erik" /> Erik<br />
		<input type="checkbox" name="payer[]" value="Daniel" /> Daniel<br />
		<input type="checkbox" name="payer[]" value="Sigbjorn" /> Sigbjørn<br />
	</fieldset>
	<input type="button" value="Submit" onclick="ajaxFunction();"/>
</form>
JavaScriptet ser slikt ut:

Kode

	// Create a function that will receive data sent from the server
	var amount = document.getElementById('amount').value;
	var postdata = "amount="+ amount +"&payer[0]=Eivind";
	ajaxRequest.open("POST", "serverTime.php", true);
	ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var response = ajaxRequest.responseText;
			document.getElementById('responseText').innerHTML = response;
		}
	}
	ajaxRequest.send(postdata);
Det jeg lurer på er om det virkelig er eneste måte å bruke funksjonen send(string), som må ha alle variabler kodet i en lang streng? Kan jeg ikke sende over hele arrays eller lignende?

Problemet er med checkboxene, som jeg ikke helt vet hvordan jeg skal sende videre.. Med PHP kan jeg hente inn de valgte checkboxene som ett array. Er dette mulig med JavaScript? Eller må jeg virkelig ha en unik ID på hver checkbox, sjekke om verdien er null eller ikke, for så å kode det inn i postdata-strengen? Dette virker som en dårlig løsning for å overføre data til en server.. Finnes det andre måter å gjøre dette på?
nso
popålol
nso's Avatar
Administrator
Vurder å bruke et rammeverk som JQuery eller lignende.

I JQuery kan sende JSON struktur som følger;

Kode

var params = { name: "John", time: "2pm" };
$.post("test.php", params, function(data){
     alert("I got data back!")
});
Sist endret av nso; 26. juni 2010 kl. 20:47.
nso
popålol
nso's Avatar
Administrator
For å vise hvor mye greiere slikt er å knote sammen i JQuery skrev jeg kjapt ned et script som gjør det samme som ditt.
Må nevnes at jeg bare har skrevet dette "from the top of my head" og den er ikke testet. Logikken burde forøvrig være noenlunde rett.

Kode

document.ready(function() {
  // form onsubmit event handler.
  $("#formets_id").submit(function { 
    var payers[];
    
    // finn alle checked checkboxes og putt verdi inn i payers-variabelen
    $("input[name=payer] :checked").each(function(){
      payers.push($(this).val());
    });

    var params = {
      payers: payers,
      amount: $("#amount").val()
    };

    $.post("serverTime.php", params, function(response){
      $("#responseText").html(response);
    });

    return false;
  });
});
Sist endret av nso; 26. juni 2010 kl. 21:02.
Ser ikke hvordan det gjør det enklere egentlig, siden jeg må fortsatte dytte alt inn i den ene variabelen.. og litt av problemet er hvordan jeg skal sende med checkbox-verdiene? Altså kun de som har blitt valgt. Må jeg hente en og en med unik ID, for så å gjøre en if-sjekk om de er null eller ikke? Virker unødvendig tungvint.
nso
popålol
nso's Avatar
Administrator
Koden jeg la ved i det andre innlegget mitt putter kun verdiene til de valgte checkboxene inn i payers-arrayet som så blir sendt til serveren.

"input[name=payer] :checked" er en selector som velger alle input med name="payer" og som er checked.

Arrayet blir seende slik ut: ["Eivind", "Sigbjorn"], gitt at det er de du har valgt.
Sist endret av nso; 26. juni 2010 kl. 20:53.
Skrev svaret mitt før det andre innlegget ditt. Ser veldig fint ut.. Tror jeg skal ta en titt på JQuery.

Tusen takk for hjelpen.
Kan være nyttig å huske på å spesifisere dataType i post request fra jQuery til serverside. Har selv opplevd trøbbel i bla. IE dersom dette ikke er gjort.

Kode

$.post("serverTime.php", params, function(response){
dataType: 'json',
// blabla
nso
popålol
nso's Avatar
Administrator
I så tilfelle ville man spessifisert det slik som dette;

Kode

$.post("test.php", params, function(data){
     alert("I got data back!")
}, "json");
Du tenker sikkert på .ajax, og ikke på .post
Man kan også spesifisere det slik, ja Usikker på om det er .post eller .ajax, men det er en god tommelfingerregel å alltid spesifisere datatypen likevel.
Sist endret av Exmagician; 26. juni 2010 kl. 21:57.