Form and Anchor - Onclick #gohere help!! [Archive]

View Full Version : Form and Anchor - Onclick #gohere help!!

manga101

10-02-2002, 08:10 PM

hi js gurus..

i have a form with the usual form and such. however within the middle of the form i have 3 options for users to choose.

now depending on what optional button they choose like..

1. car form 2. house form 3. schoo form.

if they click on choice number 1. the page refreshes..and loads taht form.

it all works fine.. but my question is:

how can i make it so that when the page rehresh or reloads the page with the correct form.. it goes to the start of the selected form and not the top of the index page ...

basically.. when they click a form option..it reloads and goes to the begining of that form

thanks in advance..

RadarBob

10-02-2002, 09:15 PM

How about... just place focus on the first field in the form?

zoobie

10-02-2002, 09:26 PM

You haven't said if the forms are all on one page or seperate pages.

<input type="button" value="Schoo" onclick="scrollTo(0,200);">

or this:

<input type="button" value="Car" onclick="location.href('yourPage.html#anchor');">

with <a name="anchor"></a> at the actual location :D

manga101

10-02-2002, 10:00 PM

thx guys..

hey zoobie.. the form is on the same page..

its a two part form.. the second part will reload after the first part..depending on what the user chooses...

the first part's info will be pass during the click...

when the second part of the form is refresh/reload..

all part 1 is filled already.. and i want it to focus on the second part of the form... ..

thx guys..

much love..

manga101

10-02-2002, 10:01 PM

Originally posted by zoobie
You haven't said if the forms are all on one page or seperate pages.

<input type="button" value="Schoo" onclick="scrollTo(0,200);">

or this:

<input type="button" value="Car" onclick="location.href('yourPage.html#anchor');">

with <a name="anchor"></a> at the actual location :D

does the "scrollTo works on both IE and NS? especially older NS..

manga101

10-02-2002, 11:21 PM

Originally posted by RadarBob
How about... just place focus on the first field in the form?

i cant put focus on the form field.. cuz its not there yet..until the choice form is selected...

for example...

i cant do a

onClick="document.agreeform.paypal.focus()"

paypal.. is on the second part of the form.. which is not visible yet in the first part..

manga101

10-02-2002, 11:51 PM

Originally posted by zoobie
You haven't said if the forms are all on one page or seperate pages.

<input type="button" value="Schoo" onclick="scrollTo(0,200);">

or this:

<input type="button" value="Car" onclick="location.href('yourPage.html#anchor');">

with <a name="anchor"></a> at the actual location :D

ok.. i did the scrollTO.....

onclick it scrolls to coordinate..but when the page reload/refresh..with the second part.. it goes back to the top..

so u get a jump glithcy effect..

adios

10-03-2002, 01:04 AM

You need to work a bit on your descriptions...

No idea if this is what you need:

<html>
<head>
<title>untitled</title>
</head>
<body>
<form>
<input type="button" value="CAR FORM"
onclick="window.location='formpage.htm#carForm'"><br>
<input type="button" value="HOUSE FORM" onclick="window.location='formpage.htm#houseForm'"><br>
<input type="button" value="SCHOO FORM" onclick="window.location='formpage.htm#schooForm'">
</form>
</body>
</html>

[formpage.htm]

<html>
<head>
<title>untitled</title>
</head>
<body>
<a name="carForm">
<form name="carForm">
<input type="text" value="car form">
</form>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<a name="houseForm">
<form name="houseForm">
<input type="text" value="house form">
</form>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<a name="schooForm">
<form name="schooForm">
<input type="text" value="schoo form">
</form>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

manga101

10-03-2002, 02:50 AM

sorry if my description wasnt clear..i apologize..

thanks for all the help, much gratitude...

the thing is is... there is only 1 form with 2 part.

part 1. - user info like name, address, etc

part 2. - the choice buttons for the 3 forms.. they are just button..no actual form.

so what you actually see is the user nfo part and the 3 button of each form on that signup.html page.

upon clicking a form in part 2 will result in reloading the signup.html page agian.. but this time.. has both part of the form as well as the form which was selected..and the focus is at the begining of this form.

in summary:

one form with 3 hidden element.
the button click will determine which form element to show whether it be school, house, car, or whaterver else..

adios

10-03-2002, 02:59 AM

Getting clearer....:)

Still: are you passing the hidden data to the server to build the new page dynamically - or did you want to do this client-side entirely?

Unclear: "one form with 3 hidden element."

What are they? Do you mean <input type="hidden"> or <input style="visibility:hidden;">

adios

adios

10-03-2002, 03:40 AM

How 'bout:

<html>
<head>
<title>untitled</title>
</head>
<body>
<script type="text/javascript" language="javascript">

var toggleIDs = new Array('carForm','houseForm','schooForm');
var els_above = 4; //number of form elements above the first hide/show section

function toggleDisplay(disp_id) {
for (var el,i=0; i<toggleIDs.length; ++i) {
el = document.getElementById(toggleIDs[i]);
if (toggleIDs[i] == disp_id) {
el.style.display = '';
document.forms[0].elements[i + els_above].focus();
}
else el.style.display = 'none';
}
}

</script>
<form>
<h4>User Info</h4>
<input type="text" value="blah" /><hr /><hr /><hr />
<input type="button" value="CAR FORM"
onclick="toggleDisplay('carForm')" />
<br /><br />
<input type="button" value="HOUSE FORM"
onclick="toggleDisplay('houseForm')" />
<br /><br />
<input type="button" value="SCHOO FORM"
onclick="toggleDisplay('schooForm')" />
<hr />
<div id="carForm" style="display:none;">
<h5>CAR FORM</h5>
<input type="text" />
</div>
<div id="houseForm" style="display:none;">
<h5>HOUSE FORM</h5>
<input type="text" />
</div>
<div id="schooForm" style="display:none;">
<h5>SCHOO FORM</h5>
<input type="text" />
</div>
</form>
</body>
</html>

manga101

10-03-2002, 07:03 PM

thx adios..

imma try that..