Pre-fill form fields via button

[Sven_Price]

Hi guys,

After some help! I have created a web form for a travel company to use for bookings.It has specific fields for location, accomodation and date of travel.

I would like to know the best way to pre fill these fields if someone clicks through from an avaiability list on an accommodation page?

For example if there is a 'Book Now' link on the 17/11/2012 at Hotel De Velle in France, how would I then make it so that if someone clicked 'book now' they then go to a form where their can fill in their details with the relevant information pre-filled for the date they selected.

eg:

Name : (empty, to enter)

Address : (empty, to enter)

Phone : (empty, to enter)

Email : (empty, to enter)

Date: 17th November 2012

Country: France

Accomodation: Hotel De Velle

Nights : (empty, to enter)

Any help would be much appreciated, Thanks!

S

[Liam Dilley]

Hey there, is this all within the same form I take it?
If how you build up the date and location and country element if each element of the text of these was wrapped in a span with id or class so.... <span id="country">France</div>
You would use class if you have multiple elements (5 france location 2 Germany locations with dates etc) and all wrapped in a div and the book now button inside part of that div.

You now have association because the book now has siblings and they all belong to the parent element div.

With jquery there is several ways you can set a .val() (value) of an input field (with id say your country input field has id="FinalCountry" for example).

You can do a .click() function in jQuery for a button and say along the lines of....  val theCountry =  $(this).parent().find('#country').text(); for example.

Hope that sets you on the right path.

[Sven_Price]

Hi Liam,

Thanks for the reply bud.

Sorry, I should have specified - I was looking to access the form from a click-through from another page ( a hotel specific page) and then to land on the form (booking) page with the appropriate info pre-filled.

What do you reckon, is this doable or is it a js/jquery code link for every possible date/ venue/ country?

[Liam Dilley · Accepted solution]

All you need to do is have paramaters in the URL and populate them based on the options.

So... nextpage.html?country=&date=

And with jQuery have that populate those paramaters on click/hover/change etc.

Just ensure they have values before going on to the next page.

On the next page all you do is use module_url.

So for a input field for the country you se the value as {module_url,country} where country is the paramter in the URL and the system will fetch its value.

So the latter part is dead easy, you just need to get the url paramaters set when clicked through to the next page.

If it is a form you just add these to the end of the form action.

[Sven_Price]

Cool,

Thanks again Liam. We're getting stuck in to test pages now.

Have a good one and cheers for the info, you're a master.

[11 Eleven Creatives]

@ Sven Price.  Can you possible expand this string to explain how you accomplished this a bit further for a JS/Jquery novice?  I am working on a site for a magazine subscription and they offer several discounts and special offers so I need to be able to have the form populate the promotional code in the suscription form based on the special offer they clicked on.  The special offers are in the ad rotator modual and change reguraly.  Any advise is appreciated. Thank you.

[mario_gudelj]

Hi amgmarketing,

You can use the same method Liam described and you don't need to use JavaScript.

Simple format your link to include the discount code as a query e.g. /somelink.html?discount=AGDRYD and then read that code from the URL using {module_url,discount} and add it to the form field with value="{module_url,discount}".

Cheers,

-mario

[scottdouglas999]

Will this work with WebApps?