AJAX for Added Elegance?

Status
Not open for further replies.
H

HairyHun

Masturbating Bandit
Oct 11, 2007
576
2
0
Hi,

I want to be able to have a two part form on a landing page. At first it would be a few fields, then one the user clicks continue, it saved those entries and loads the rest of the field.

All this without reloading the rest of the page.

Most ajax codes I found where rather complicated. Any easy & simple reuseble code that someone can suggest. I don't need bells and whistles.

Thanks
HH
 


This is how I would do it:

1. the first and the second form would be both on the same page, in the same HTML code, but the second one will be hidden via CSS (style=display:none)
2. onSubmit of form1 - gather the data from form1 and send it to PHP script. The PHP script will save the data to session and return. Upon return, the first form will be hidden via CSS and the second one displayed.
3. When user submits form2, the data already saved in session will be combined with the data from form2 and processed as needed.

I know it sounds rather complicated, I'll try to make an actual code.
 
Houdas said:
This is how I would do it:

1. the first and the second form would be both on the same page, in the same HTML code, but the second one will be hidden via CSS (style=display:none)
2. onSubmit of form1 - gather the data from form1 and send it to PHP script. The PHP script will save the data to session and return. Upon return, the first form will be hidden via CSS and the second one displayed.
3. When user submits form2, the data already saved in session will be combined with the data from form2 and processed as needed.

I know it sounds rather complicated, I'll try to make an actual code.
Click to expand...


In this case, the page will have to reload, right?
I need something where there is no reload, so it's very seamless and fast

Thanks
Peter
 
jQuery UI Tabs / Tabs 3

Callbacks should do what you need to do. You could create 2 tabs at the top of the form and label them Step 1, Step 2.

In that example -
Select means that they clicked a tab (first second or third). Put your basic form validation in there (aka just that required fields were filled out, any real validation needs to be done in step 2 when the form is submitted). If the form isn't validated return false and put an alert message saying they need to fill in all form fields.

Show means that the div is about to show. I can't think of why you would use this one for your form though.


To be honest, [i hate] Flash would probably be the easiest method to use because any javascript method is going to require a lot of validation crap and testing for weirdness and testing on what happens when javascript is disabled. But jQuery is so OMG COOL I think everyone should learn it.
 
HairyHun said:
In this case, the page will have to reload, right?
I need something where there is no reload, so it's very seamless and fast

Thanks
Peter
Click to expand...

No, the page will not reload. Fuck I am horrible when it comes to explaining things... You know, I want to help but I dont find the right words. Fuck it, I'll make an example HTML page, standby.
 
Here it is. I know it's far from being perfect, its just a quick hack. I am drunk and I really need some sleep right now lol.
 

Attachments

Status
Not open for further replies.
Top Bottom