Loading forms from a drop down box

Mar 12th, 2014 at 02:03 PM
User 2657606 Photo

Impalaman
Registered User
11 posts

Hello,
I need to load a selected form below the drop down box. I figured out how to load the selected page, but it's loading a new page. I need it to load in to something like <div id="div1">Form Loads Here</div>. Here is the form. http://www.dtproperties.com/Start.htm
Any help would be appreciated.

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Start</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function gotosite()
{
var URL = document.gotoform.url_list.options[document.gotoform.url_list.selectedIndex].value; window.location.href = URL;
}
</script>

</head>

<body>

<form name="gotoform" method="post">
<noscript>
<!-- use noscript to only show this if no javascript is available -->
<input type="submit" name="submit_button" value="Go">
</noscript>
<select name="url_list" size="1" onChange="gotosite()">
<-- Value of first option is default, usually current page -->

<option id="item1_0_option" selected value="http://www.dtproperties.com/Start.htm">
Choose one
</option>
<option id="item1_1_option" value="http://www.dtproperties.com/deposit.htm">
Rental Application U.S. Resident
</option>
<option id="item1_2_option" value="http://www.dtproperties.com/deposit.htm">
Rental Application Non U.S. Resident
</option>
<option id="item1_3_option" value="http://www.dtproperties.com/deposit.htm">
Pay rent with E-Check
</option>
<option id="item1_4_option" value="http://www.dtproperties.com/deposit.htm">
Pay rent with Credit Card
</option>
<option id="item1_5_option" value="http://www.dtproperties.com/deposit.htm">
Pay deposit with E-Check
</option>
<option id="item1_6_option" value="http://www.dtproperties.com/deposit.htm">
Pay deposit with Credit Card
</option>
<option id="item1_7_option" value="http://www.dtproperties.com/deposit.htm">
Submit your move-out notice
</option>
<option id="item1_8_option" value="http://www.dtproperties.com/deposit.htm">
Rental Information
</option>
<option id="item1_9_option" value="http://www.dtproperties.com/deposit.htm">
Maintenance Request
</option>
<option id="item1_10_option" value="http://www.dtproperties.com/deposit.htm">
Contact Us
</option>
</select>
</div>
<div id="div1"></div>
</div>

</form>
</body>
</html>

Mar 12th, 2014 at 08:19 PM
User 12358 Photo

JamesD
Registered User
55 posts

Hello Impalaman
You can try using jQuery's ajax 'get' function.
Would put something along the lines of this in your javascript area:
$.get( YOUR_URL, function( data ) {
$( YOUR_DIV_ID ).html( data );
});

With YOUR_URL being the URL to the page and YOUR_DIV_ID with the div you would like the data to be placed.

Here's the reference page:
http://api.jquery.com/jQuery.get/
Mar 13th, 2014 at 02:28 PM
User 2657606 Photo

Impalaman
Registered User
11 posts

JamesD wrote:
Hello Impalaman
You can try using jQuery's ajax 'get' function.
Would put something along the lines of this in your javascript area:
$.get( YOUR_URL, function( data ) {
$( YOUR_DIV_ID ).html( data );
});

With YOUR_URL being the URL to the page and YOUR_DIV_ID with the div you would like the data to be placed.

Here's the reference page:
http://api.jquery.com/jQuery.get/


Hi James,
That looks like it would only load the url the was specified in the script. I need the script to pull from the drop down that was selected and then load the correct value in the div. Still scouring the net looking for an example that will help me.
Mar 13th, 2014 at 03:24 PM
User 12358 Photo

JamesD
Registered User
55 posts

Is this what you're looking for?
<SCRIPT LANGUAGE="JavaScript">
function gotosite()
{
var URL = document.gotoform.url_list.options[document.gotoform.url_list.selectedIndex].value;
$.get( URL, function( data ) {
$( '#div1' ).html( data );
});
}
</script>

Note: Sorry, was under the impression that you knew where to put it.... that's if I'm understanding the question correctly. :-)
Mar 13th, 2014 at 04:33 PM
User 2657606 Photo

Impalaman
Registered User
11 posts

JamesD wrote:
Is this what you're looking for?
<SCRIPT LANGUAGE="JavaScript">
function gotosite()
{
var URL = document.gotoform.url_list.options[document.gotoform.url_list.selectedIndex].value;
$.get( URL, function( data ) {
$( '#div1' ).html( data );
});
}
</script>

Note: Sorry, was under the impression that you knew where to put it.... that's if I'm understanding the question correctly. :-)


Thanks James, that did the trick. The only problem is now the form that loads doesn't work. Any way to allow the other script to process? This is how the form should work. http://www.dtproperties.com/deposit.htm
http://www.dtproperties.com/Start.htm
Mar 13th, 2014 at 04:39 PM
User 12358 Photo

JamesD
Registered User
55 posts

Impalaman wrote:

Thanks James, that did the trick. The only problem is now the form that loads doesn't work. Any way to allow the other script to process? This is how the form should work. http://www.dtproperties.com/deposit.htm
http://www.dtproperties.com/Start.htm

Heh... well, what this function does is pull all of the contents from the requested url (the page source). More than likely, the div became filled with the whole page, including all of the html tags, headers, scripting... etc.

Unless you need those to be actual separate pages for other uses, then all you should need to do is remove everything except your form code. Do this for each of the forms that can be included in the div.
One other thing.. any styling/scripting you need to do will need to be done in the page with the dropdown.

Hope that makes sense.
Mar 13th, 2014 at 05:11 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

No need to alter any of your forms.;)
http://ericrohloff.com/coffeecup/ccforu … index.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mar 13th, 2014 at 05:29 PM
User 12358 Photo

JamesD
Registered User
55 posts

Eric Rohloff wrote:
No need to alter any of your forms.;)
http://ericrohloff.com/coffeecup/ccforu … index.html

Thanks for mentioning that Eric. I usually try to avoid iframes in situations like this myself, so I didn't even think about using them.
Mar 13th, 2014 at 05:42 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Iframes are the backbone of the form builder already and lots of users my get into trouble doing any heavy altering of pages to make other solutions work.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mar 17th, 2014 at 10:19 AM
User 2657606 Photo

Impalaman
Registered User
11 posts

I removed the extra html from the form and it works again. I should be able to put this all together now. I will see if Iframes will work out better. Thanks for the help. Kevin

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.