2 page form with Aweber

[HairyHun]

Hi,

I want to have a form split in two, have the transition without reloading the page, and use aweber.

• So there would be the first page.
• User clicks continue. The 2nd part of the form appears. ( but without reloading)
• The user fills out the second form.
• User clicks continue.
• Then it's all sent using aweber.

Could someone help with that part that the 2nd part of the form appears without reloading? Do I need to use ajax? Or can some javascript do?

I thought of using a form that would save information, then on the 2nd page, use the aweber form and prepopulate the fields with the data saved in 1 ( and keep it hidden) then the user fills out the rest.

Or is there a simpler solution.

Thanks
HH

 

[megalomaniac]

Hi HH,

No need to get too fancy. Make your <form> tag, and put two divs in it, say, div#first and div#second. Put the first part of the form, and a next button, in div#first and the second part of the form, and the form submit button, in div#second.

In your CSS, set div#first { display: block } and div#second { display: none; }. Have the button "next" do something like this on click:

document.getElementById(first).style.display = "none";
document.getElementById(second).style.display = "block";

I'm not a JS expert so you should test this!

You could make a "back" button in the second page that does the reverse, if you want users to be able to go backwards.

The page won't reload, and the form's data is held in the page, just hidden

 

[audax]

That'll work. Simple and easy.

 

[HairyHun]

Thanks guys!

When the user presses the Submit on the second form, do I need to show both quickly before the submit script is launched, or will the script take into account even the hidden part of the form?

HH

 

[bobsoap]

Thanks guys!

When the user presses the Submit on the second form, do I need to show both quickly before the submit script is launched, or will the script take into account even the hidden part of the form?

HH

display:none doesn't do anything to the data or the sourcecode, it is only a CSS attribute which hides the div from the viewer. So the form will be submitted as a whole with all input data in it, from both parts.

Great tip btw, megalomaniac! Simple and easy.

EDIT:

When the user presses the Submit on the second form,

If you make two forms, you can only submit one of them. There is no 2nd form - you just make one form and split it in half using the two divs, like so:

<form>
   <div id="first">
      ...your input fields + the "next" link
   </div>

   <div id="second">
      ...your input fields + the submit button
   </div>
</form>

 

[HairyHun]

I set up the two divs. The second is hidden.

When I try to put that code in the onclick, and it's not working.

At first I set the type to "button" for the continue button. (otherwise it triggers then form)
Then I put into the onclick of the continue button:

<input type="button" name="continue" id="Continue" value="Continue" onclick=" document.getElementById(first).style.display = "none";
document.getElementById(second).style.display = "block"; "/>

Nothing happenned. Then I created a function in the HEAD. and launched it in the onlick. Still nothing.

<script type="text/javascript">
function switchForm()
{
document.getElementById(first).style.display = "none";
document.getElementById(second).style.display = "block";
}
</script>

What am I doing wrong?

HH

 

[bobsoap]

At first I set the type to "button" for the continue button. (otherwise it triggers then form)

Make the continue button a link instead. You can use the button image for the link, somewhat like this:

<a href="#" onClick="switchForm();"><img src="button.png" alt="Continue" /></a>

...or you include the image via CSS if you want to give it a hover state, for example.

 

[HairyHun]

turns out i was missing the 's

Before GetElementById(first).style.display

After GetElementById('first').style.display

Thanks for all the help
HH

 

[HairyHun]

I set up the two divs. The second is hidden.

When I try to put that code in the onclick, and it's not working.

At first I set the type to "button" for the continue button. (otherwise it triggers then form)
Then I put into the onclick of the continue button:



Nothing happenned. Then I created a function in the HEAD. and launched it in the onlick. Still nothing.



What am I doing wrong?

HH

I was using this trick happily, but now I have a form where the actual is lower. Basically it means that you need to scroll down to see it in full.

When i use this trick, the page jumps up while changing the part of the form beeing shown. Any ideas on how to keep the page the same way?

HH