Javascript Code Example Needed

[lufc]

Tweet

Hi guys,

I will admit I cannot code any javascript what so ever so this could be the simpliest thing ever and could make me look dopey for asking , nowt new there then!

I have seen it on a lot of sites and would like to include it on my remake of one of my sites but i cannot find an example of the code needed anywhere.

What I want to do is be able to switch between different forms without changing the page, for example on the search form at travelsupermarket.com - the travel comparison site where you can select flights, hotels, car hire, holidays.

I don't need the code for the form just for the bit where you can switch instantly between options.

I hope that makes sense and if any body can point me the direction of an example script that would be brilliant,

Thanks in advance,

Darren

[jonsp]

What I want to do is be able to switch between different forms without changing the page, for example on the search form at travelsupermarket.com - the travel comparison site where you can select flights, hotels, car hire, holidays.

Hi,
Start with your form page, eg

<div id="FormWrapper" style="width:300px;">
    <a href="#Form1" id="l1">Form 1</a> <a href="#Form2" id="l2">Form 2</a> <a href="#Form3" id="l3">Form 3</a> <a id="l4" href="#Form4">Form 4</a>
    <div id="f1"><a name="Form1"></a>put form 1 here</div>
    <div id="f2"><a name="Form2"></a>put form 2 here</div>
    <div id="f3"><a name="Form3"></a>put form 3 here</div>
    <div id="f4"><a name="Form4"></a>put form 4 here</div>
    </div>

then add some javascript to make it switch

<script type="text/javascript">
var formOpen = 'f1';
var a = document.getElementById("FormWrapper").getElementsByTagName("a");
for(b=0;b<a.length;b++){a[b].onclick = function() { doForm(this.id); return false; }  }
document.write("<sty" + "le>#f2,#f3,#f4{display:none;}</st" + "yle>");
function doForm() {
var a = arguments;
if (formOpen) document.getElementById(formOpen).style.display = 'none';
var b = a[0].replace('l', 'f');document.getElementById(b).style.display = 'block';
formOpen = b;}
</script>

Obviously you'd want to make it look a bit nicer

Cheers,
Jon

[lufc]

Thanks Jon,

I wont be able to try it till Monday but Im sure its perfect,

Thanks again,

Darren

[JackieBolinsky]

Hello...

Your code is great and actually i have copied it from somewhere else too but the problem is POST does not work, even though the form method="post". The data is actually send using GET method. Do you know there is a restriction on POST using Javascript. May be this point needs to be cleared out for new commers.

Thanks,
Jackie

Javascriptbank.com

[tim_gregg]

Hi Darren,

You may find that JQuery (javascript library) is a better fit if you haven't used much Javascript before you can do the tabs you want very easily.

see - jQuery UI - Tabs Demos & Documentation

your jQuery code would only be

<script type="text/javascript" src="yourpath/jquery.js"></script>
<script>
	$(document).ready(function() {
		$( "#tabs" ).tabs();
	});
</script>

you can even use the jquery themeroller to control the style.

Tim

[tim_gregg]

Hello...

Your code is great and actually i have copied it from somewhere else too but the problem is POST does not work, even though the form method="post". The data is actually send using GET method. Do you know there is a restriction on POST using Javascript. May be this point needs to be cleared out for new commers.

Thanks,
Jackie

Javascriptbank.com

Hi Jackie,

If you can post your code I can have a look at it for you.

Tim