How to Submit a form and load target page inside a Div on the Current page?

Since you provided no code, I'll have to guess, either.

Since you provided no code, I'll have to guess, either: 1) You have the AJAX code to load the php response into a division but the page still refreshes, in which case - when the form is submitted you need to prevent the default event triggering, do this with: event.preventDefault(); Stick that as the first thing inside the function that get's executed inside the onClick(). It should all work now. Incidentally, you probably want onSubmit() instead, in case someone hits 'Enter' instead of clicking the 'submit' button (although I'm not sure if it's part of the standard javascript/DOM).

Check out a javascript library called JQuery, it makes javascript a breeze. 2) You actually want AJAX, in which case go to jquery. Com, download their javascript library and go through some tutorials on ajax requests.

The basics are something like: $("#id_of_your_form"). Submit(function(event){ event.preventDefault(); $. Post( url_of_php_file, $("#id_of_your_form").serialize(), function(data){ $("#id_of_your_div").

Html(data); }); }); This code is basic, but should work, provided you remember to include the library file in your . Html file. #UPDATED Is there any particular reason you're using the JSON object?

I just haven't used it before myself, so my input here might be limited. Try this: ajax. Html Name: Password: ajax.

Php $name, 'password'=>$password); $c = json_encode($list); echo $c;? > (Note: I haven't checked the php code as such, since as I said, I'm not too familiar with JSON objects) If you don't specifically need the json object, you could try using standard text/xml for simplicity. Also, consider using $.

Post instead of $. Ajax, it should make things easier. Also, don't forget to use the form tags around your input or your html won't be valid(citation needed) and finally, if you're working with html in your javascript it might be a good idea to use single quotes instead of double quotes to indicate your strings.

Hope that helped. #UPDATE 2 Okay, since you don't need JSON for basic stuff(leave JSON for later), use text/xml instead. Also, have a look at the comments.

This should all work, provided WAMP is running and both files are in the same folder. Here's the code: ajax. Html Name: Password: ajax.

Php If this doesn't work...check if you have skype running, for some reason WAMP will not work with skype on at the same time, it's weird.

Thank you very much for the code, it is exactly what I was looking for, however it is not working for me ( I changed: id_of_your_form twice and id_of_your_div, and url_of_php_file) for the rest I left it the same. I also tried the tutorial as you said but it is also not working. I've put the code as an update in my question.

If you have any ideas what went wrong I'd be very thankfull. (I tested in chrome firefox and IE) – Bastiaan Westeinde Aug 11 at 20:32 I edited my original answer, see if that helps you! :-) – Nisk Aug 12 at 9:40 Thanks Nisk!

I tried the script with both the json object and text/html but it is still not working. There is no special reason why I used Json, I used it because it was used in the youtube tutorial. Also I don't understand what you mean by don't forget to pass the event as an argument, what should I do?

– Bastiaan Westeinde Aug 12 at 10:10 The form is being submitted and the input appears at the end of the address: localhost/scripts/divform/… – Bastiaan Westeinde Aug 12 at 10:45 The part with $("#form_id"). Submit( function(EVENT){}); You pass EVENT as a function parameter, is what I mean. Okay, I had another look, it should work now.

:-) – Nisk Aug 12 at 10:49.

You can use Ajax. The run of the mill Ajax will let you refresh parts of the page w/out reloading the page, which in your case is submit the form and load the target on the current page. I will suggest you to start with jQuery.

Thank you very much for your answer. I've started with jquery and ajax requests – Bastiaan Westeinde Aug 12 at 7:55 Glad I was able to help you :-) – Kumar Aug 12 at 8:05.

The problem is the form is still submitting, when I do what your trying to do, I do it slightly different. Try this Name: Password.

Thank you very much for your answer. I tried your code and yet it is still not working.. Could it be that there is some setting wrong on my WAMP server or that I have to install some additional software? – Bastiaan Westeinde Aug 12 at 7:35 I changed 'type=' to 'type:' but still not working.

I'm using this jquery javascript library: code.jquery. Com/jquery-1.6.2.min. Js Is that the right one?

– Bastiaan Westeinde Aug 12 at 7:53.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions