Develop Reference

How to prevent multidocument form page from reloading?

I'm working on a web app that takes the user through multiple forms with simple interface of a 'back' button, form, 'save' button and a 'next' button.
Clicking 'save' only calculates a number from given answers and sends it to localStorage.
When I then click 'next', it opens the next html file I prepared, constructed the same way, just with a different form. The problem is that if I press 'back', the form on the first page is empty, but when I use the browser's 'back' button, it's all there. How do I get this result with my 'back' and 'next' buttons? I'd like the user to be able to browse their answers as well as see a certain form already completed if they encounter it on a different path (there are various paths through 3 to 5 of 11 forms created, depending on what the user wants to calculate).
I understand it's opening the html file every time I click an 'a href', but I don't know how to change it. I tried searching for html form reloading prevention etc. but it doesn't seem to yield any answers. I'm not sure I know how to formulate my problem in a simple enough way.

Best simple solution would pretty much be what "Manolo" suggested.
Put all the forms you need in one HTML doc
Set all the form's style to "display: none" except the first
Create a simple JS function that changes the "display" style accordingly and attach it with the "onclick" attribute to your buttons.
Sorry for the lack of code. Typed this on mobile and hoped it would be straight forward enough. Hope this helped.

Load the forms as you need them using javascript to request them to your server. Use fetch api.
Other solution is to add all the forms to one page and hidde them all from the user. When the user click next you hide firstForm and show secondForm.

You can use History_API of DOM to manipulate the history
let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
And can catch thee event of back and next button of navigator with
WindowEventHandlers

Javascript element hiding not working

I tried to hide elements in my html form by defining a javascript function at the beginning of my page and calling it through a button's onclick attribute. It seems like the browser (firefox 4.x) tries initially to hide the given element when I click the button, but then quickly reloads it. Without the script, obviously, no attempt is made by the browser to hide the element. Here is the pertinent code:
function showHide() {
document.getElementById('search').style.display = 'none';
}
<button onclick="showHide()">Advanced</button>
Does firefox default to what it finds in the css file instead of using the javascript modifications?
Edit #1:
First off, I am trying to get an text edit field to disappear. When I click on the "Advanced" button, it does disappear for a fraction of a second and then reappears. I tried returning false at the end of showHide(), but that did nothing, and I tried onclick="return showHide();" but that didn't work as well. I checked the css file, and there are no display: settings that could conflict with this. I'll see if I can't get this up on my server in a few minutes and post the link.
Edit #2: Thanks for the help. Changing the type attribute of the button fixed the issue by preventing the button from defaulting to "submit," as suggested below. This kept the form from being reloaded, which was causing the element to reappear every time it tried to go away. Not something a beginner like me would have known.

The html <button> element supports a type attribute. If omitted, it defaults to type="submit". This causes the button to work exactly like an <input type="submit" />.
So... if your button is located inside a form, then clicking the button causes the click handler to run (calling showHide()), but then it submits the form. It is the form submission that is causing the page reload.
To fix this, simply add the proper type to your button:
<button type="button" onclick="showHide()">Advanced</button>

There has to be something else going on in your page because the basic code works fine in Firefox and other browsers. You can try the demo for yourself here: http://jsfiddle.net/jfriend00/LpC36/.
I'd suggest you describe what else might be going on the page? Other code? CSS? Other objects and interactions? Form submission? Try showing us the HTML.
For example, if the button is a submit button, it could be submitting a form and reloading the page.

I suspect it has to do with scope. Try this out:
<button onclick="document.getElementById('search').style.display = 'none';">Advanced</button>
if it works you didn't declare your showHide() function in the right place. For example i can break #jfriend00 's example like this:
http://jsfiddle.net/NYZrX/1/
this is one of this reasons it is bad practice to mix javascript in html code, it all needs to be in the global scope...

Selectively POST to new browser window

I've got a form that has three submit buttons for posting back data for different scenarios.
Each one POSTs to different actions on a controller, however for one of them I need to POST back to a new browser window.
Is this possible? I know I can add a target="_blank" to the form, but that will open a new window for all of the submit buttons...
UPDATE:
Currently, I've tried several methods to get this working and I've completely failed, my current non-working code looks like this:
$("input[type=submit]").click(function (e) {
var form = $("form.filter-execution-form");
if ($(this).hasClass("run-report"))
$("form.filter-execution-form").attr("target", "_blank");
else
$("form.filter-execution-form").removeAttr("target");
});
Does anyone have any ideas to get this working?
Thanks,
Kieron

See this post - use the same method to dynamically add the attribute for the submit button you want it for (ie add it to the onclick event of your submit button you want to add this support to)
How do I add target="_blank" to a link within a specified div?

There are probably a number of different ways to do this. The easiest I can imagine is when the submit button is pressed in the first window, you open a new window with a URL (on the same domain) that has the desired form in it (may have to watch out for pop-up blockers). Then, transfer the data that has been entered from your existing form to the form in the new window. Call a javascript function in the new page that tells it to submit the form.

In the form set target="postWindow" or any other name that is the same throughout, and it will always post to that popup (if it was not closed).

The best way I can think of doing this (and it might not be the best way of doing it) would be using JavaScript.
When you click the button, prevent it doing anything but run some javascript instead, open a new window on a blank page, with a hidden form in it, use javascript to transfer values from your form to the new pop-up form, submit the pop-up form & do something with original page to show an action was taken.

JavaScript auto-POST with NAME

I have an OnBase e-Form that I'm building. There are three buttons on the form that all submit. OnBase does different things based on the name of the button used to submit the form. If the button has a name of OBBtn_CrossReference it opens another window with a cross referenced document. I need to programmatically 'click' that button.
I've read several posts about how to use JavaScript to submit a form, but none seem to accomplish my goal. I just need to POST and to have it appear to come from a button named OBBtn_CrossReference.
I don't need to submit any data. The way the page is currently set up, the entire page is already a form and since I don't want to break the functionality of the other form buttons it seems I must leave it that way.
UPDATE:
The suggestion below was tested as a call from the onload event in the body tag and since the button posts the page reloads and the call is made over and over again spawning unlimited child windows. I would appreciate a suggestion on how to get the button to only be clicked the first time the page is loaded and not on postback.

There's a click() method on links, buttons, checkboxes. For example , I submitted this comment by running document.getElementById('submit-button').click() from chrome's command line.

I know I am a little late to this post, but you can try and leverage a cookie to get this done:
if (document.cookie.indexOf('xref=true', 0) < 0) {
// Set the xRef cookie, so we do not fire it again for this form.
document.cookie = 'xref=true';
//alert(document.cookie);
document.getElementById("OBBtn_CrossReference").click();
}
else {
document.cookie = "xref=false";
//alert(document.cookie);
}
I tested this on the Thick and Thin clients in 10.0 and it worked fine.
The postings on this site are my own and don't necessarily represent my company's positions, strategies or opinions.

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?

You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.

It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?

I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.