[php] Submitting a form in AJAX?

[toString]

I have my datatable with one hidden row (display:none) , and I was planning on updating this empty row with new data.
The new data is inserted from a small form just above the datatable.

So far I have an AJAX function that updates the top hidden row with the last record inserted, and displays the row.
However, when I submit the form (to post the data) it just obviously reloads the whole page (defeating the point of AJAXing the last row)....

Am I going about this all wrong? I don't see how I can submit the form without reloading the page, and when the page is reloaded, what's the point in AJAX.

The only thing I can think is to put the form into an iframe, but this seems wrong, and also I don't think it's supported by strict XHTML.

Any help would be greatly appreciated!

 

[psyr33n]

e.g.

onsubmit="AJAXfunc(); return false;"

?

 

[toString]

Hmm, so I what page do I call in that AJAX function? i.e. how do I post my values to my insert query?

 

[psyr33n]

Post the form code you're using. I guessed that form submission was causing your page to reload which you didn't want, in which case returning false would stop it from doing so.

 

[toString]

Well there's shed loads of code, which I think will just confuse the issue, but it's in the usual manner (I think)..

if (!empty($_POST)) {
//insert to db here
}

<form action="<?=$scriptName?>" method="post">
[textboxes and stuff here]
</form>

I see what you mean about the form action, that is causing the unwanted reload. But how do I get the AJAX to do the insert process?

i.e.

<form action="<?=$scriptName?>" method="post" onsubmit="ajaxcall(); return false;">
[textboxes and stuff here]
</form>

 

[psyr33n]

By calling a remote script; I would have thought that is the very base of the script you are making... do you fully understand how "AJAX" (quoted because it is rarely asynchronous or featuring the utilisation of XML these days) works?

 

[toString]

Yeah I understand it basically. But I can't work out how by calling another script I will be able to send the post information to that.
Or am I supposed to pass the input information as parameters into the ajax function?


i.e. for example sometihng like this?

<form onsubmit="ajaxcall(<?=$_GET['firstName']?>,<?=$_GET['lastName']?>); return false;">

And then in the ajax function...

function ajaxcall(f,l) {
	
		var url = 'insert_script.php?firstname='+f+'&lastname='+l+'';
		
		XMLHttpRequestObj.open("GET", url, true); 
                    ..............
}

Untested obviously, but is how it should be done?
I've just not done anything along these lines before so I wanted to make sure I got the 'proper' way.

 

[psyr33n]

To me it seems as if you're out of your depth.

You're calling insert_script.php with GET params of 'firstname' and 'lastname'.

Your form should look something like this, which you seem to have:

<form action="makeTheScriptDegradeNicely.php" method="get" onsubmit="ajaxcall(<?php echo $_GET['firstName']; ?>, <?php $_GET['lastName']; ?>); return false;">
 <input name="firstname">
 <input name="lastname">
</form>

(BTW, shorttags are evil. Also, if you're not already, sanitise the user input.)

insert_script.php will then go on to process the results, and you can display its output with XMLHttpRequestObj.responseText. Seemingly, this response should echo the updated row, which you can prepend/append to the table using the Document Object Model.

 

[toString]

lol
Yes I am out of my depth with AJAX, that's why I'm asking for help!
But you're not telling me if what I'm suggesting is correct or not? Which is all I need.

I'm asking about the process in general. So I'm obviously missing out lots of details such as escaping input... Listing all the input fields in my form... The fact that my script I haven't created (yet) called 'insert_script' - will process the variables from the querystring (get) and insert them into the DB. And of course the eventual return of this record.

If you're saying thiis is the 'correct' way of going about things, then I'll do that But I'm not sure if what you're saying is that I'm doing it wrong...

Thanks for your help so far though!

 

[psyr33n]

Yes correct, the process will probably be such:

HTML form -> GET/POST values sent to Javascript -> sent to processing page -> return information relayed back to Javascript -> displayed.

 

[Dj_Jestar]

Security flaws ahoy cap'n..

 

[toString]

What's so bad about it?

 

[Dj_Jestar]

Your script is vulnerable to session fixation and/or identity (cookie) hijacking.

 

[toString]

Oh right!

Any idea how I/someone would go about doing that? And fixing it?

 

[Dj_Jestar]

There's a lot you need to consider.

Firstly, are you defining $scriptName or is it using register_globals?

Secondly, you are submitting a form to itself, then submitting via AJAX.. why? Just submit directly with AJAX.

To best avoid session hijacking and fixation, require a new login everytime the user changes user-level (e.g. changing from "Guest" to "Logged in" is a user-level change) and at this same point, regenerate the sessionid.