We Keep Coding

one form button click for two actions

I have a web page whose principle use is to capture data in a form, and then onSubmit the page should spawn another window or tab where a program processes the form data. However, once a job is launched in its own window, I don't want to block the user from filling out a new form and submitting another job.
In other words, as soon as the new page is being loaded in the new window, I want the current window and page to reload and be immediately ready for the user to enter new data into the form.
I tried code that looked like this:
<form action="launch.php" method="post" target="newwindow">';
<fieldset>
<button onClick="window.location.reload();">Launch</button>
</fieldset>
</form>
On clicking the button the code does successfully open the launch.php program in the new window, but it does not reload the current page.
I then reviewed an answer to a similar question here: https://stackoverflow.com/a/44823571/2708519 by https://stackoverflow.com/users/6087092/isac
Upon reading sac's answer I then rewrote my code to look like this:
<form action="launch.php" method="post" onsubmit="return window.location.reload()" target="newwindow">';
<fieldset>
<button>Launch</button>
</fieldset>
</form>
On clicking the button the code again successfully opens the launch.php program in the new window, but it does not reload the current page.
I suspect it might be best to replace the form action parameter or onClick button parameter with a single call to a javascript function call that effects both actions based on that single event. Maybe that would require an ajax call for one of them? If so, can someone give me an example of what that javascript function call including ajax would look like?
What is a best practice in this case? Is there a particular event that I should be binding to? Or is it immaterial?

Is there a workaround to submitting a form by clicking on a div without using JavaScript

This is the idea, there is a limited number of users, each has their own "box", when they click it, if they chose not to have a password they should be auto logged-in, if they do have a password a form will popup and they can type their password, click the submit button, and log in the normal way.
I know I could achieve this by using JavaScript and posting the hidden form, but then what if someone disabled JavaScript in their browser.
I could wrap the div in <a> tags and target another method in my controller that could use GET parameters for those auto-logins, but I do not want to use GET.
Am I missing an obvious way to achieve this? Or is there a way to use JavaScript if enabled and doing something close enough if disabled?

Wrap each box with a form. Post the form when user click the box. On server side depending upon user need authenticated or not load the same page in client but this time with the popup(if need authentication), you can control the popup by setting a session variable in server and access it on asp page.
Not sure if this make sense .
Edit :
<form action="server side url " method="post">
<input type="submit" value="Submit">
</form>
Now use css to make the "Submit" button look like the "box" you want
So when use hit the "box" it calls the action from the form

Extract data from one html form and display it another page

I am building a page to conduct survey. I have an HTML page wherein the surveyor enters the questions and choices to the corresponding questions. The page contains two buttons, one is the preview survey and other submit. What I want is that when the user clicks on "preview survey"button, the user should be directed to another page which only displays the questions and the choices entered by the surveyor. How do I do this functionality?
Basically, it is extracting data from an HTML form and displaying it in another page.
Something like this:
http://www.surveymonkey.com/s.aspx?PREVIEW_MODE=DO_NOT_USE_THIS_LINK_FOR_COLLECTION&sm=3sP%2fucxKJsI57gtum0mLXhMpuD4LqWiUaSkI8eVytnk%3d

There are tons of tutorials on how to handle form input in web applications on the web. Just pick one for your programming language of choice.

You have a few options:
1. Open up the preview in an overlay-dialog
You can use stuff like Jquery UI dialog for that, or any other library like Twitter Bootstrap or Wijmo. This way you don't need to direct to another page and do not have to juggle with variables (you do need some javascript to fetch the options and insert them in the dialog
2. Post a form to the other page
This will also, most probably, needs some javascript. But assuming you have the survey in a form already this won't be that difficult. You can, example given, use the jQuery.serialize() function to serialize form input and send it over to some other page. You can either construct an Ajax/XHR request, or send it directly to a popup window (needs you to alter the action type though when you want to finally submit the form). Example here
3. Open up a popup and let it directly speak to it's parent window
With the window.parent property you can talk to the window/page that opened the popup. Than you can read out properties, like form values, and use them in the pop-up. It works pretty much like this:
survey_page.html
<script type="text/javascript">
var popup = window.open('popup.html', 'width=300, height=200');
if(window.focus) popup.focus();
return false;
</script>
<form name="testform" id="testform">
<input type="text" name="atextfield" value="" />
</form>
Open popup
popup.html
<script type="text/javascript">
function alertParentValue() {
alert(window.opener.document.forms['testform'].atextfield.value);
}
</script>
Also click me!
If you click the open pop-up link and then click on the other link, you'll be alerted the value which you filled in in the text field.
Other options are most probably available, choose whichever suits you!

On preview button you can use the popup only due to this page wouldn't redirect to the other page

Adding onsubmit to a form via javascript

How would you go about inserting an OnSubmit attribute to a form via Javascript only?
I'm pretty new to javascript so if you're able to provide detailed example code, that would be most helpful!
Here's the situation: I'm using a hosted signup page through Chargify (a payments platform) in order to process credit cards for my app, and then send the user back to my own thank you/confirmation page.
Tracking the entire funnel through google analytics is proving quite elusive due to changing domains (my domain -> Chargify.com -> my domain), since the credit card page is hosted by Chargify on their own domain.
I'm getting close: I've been able to get cross-domain tracking working (chargify.com page gets logged in Google Analytics), and can link from my domain to chargify by adding the following onclick attribute to my signup link:
onclick="_gaq.push(['_link', 'http://my-domain.chargify.com/subscriptions/new']); return false;"
However, I cannot do the same thing on the way back (Chargify -> Confirmation page) because I do not have access to the Chargify hosted payment page code, and because the user is taken to my confirmation page via a form submission, not a normal link.
Partial Solutions (need your help to finish this up):
Chargify allows several options for their hosted pages, one of them being to add custom javascript that gets inserted right before the </body> tag in a <script> tag.
I found some resources in the Google Analytics documentation on how to link pages, and adding the following to the Chargify form tag might work: onsubmit="_gaq.push(['_linkByPost', this]);"
(source: https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._linkByPost)
The form tag does not currently have an onsubmit attribute, it's just this: <form action="/my_product/subscriptions" class="new_submission" id="hosted_payment_form" method="post">
Is there a way to use Javascript to simply append this attribute to the form tag? If you'd be able to provide a detailed example of what code I should insert inside of the <script> tag, that would be extremely appreciated.

window.onload = function() {
var form = document.getElementById('hosted_payment_form');
form.onsubmit = function() {
_gaq.push(['_linkByPost', this]);
}
}
I believe the above example is similar to what you need. We use document.getElementById to grab a reference to your form. Then set the onsubmit property to the code you want executed before the form is submitted. Remember to put this inside the window onload event if this JavaScript is executed before the page is rendered to ensure the form is built.

Submit button on nested form submits the outer form in IE7

I have the following code on my Home.aspx page:
<form id="frmJump" method="post" action="Views/ViewsHome.aspx">
<input name="JumpProject" /><input type="submit" value="Go" />
</form>
However, when I click the "Go" button, the page posts back to Home.aspx rather than going to ViewsHome.aspx.
I even tried adding some script to force the form to submit:
<input name="JumpProject" onkeypress="if(event.keyCode == 13) { this.form.submit(); return false; }" />
But still even if I press ENTER, the Home.aspx page is reloaded.
The only thing I can see that might be borking things is this form is actually a child form of the main POSTBACK form that ASP.NET injects into the page.
I'm sure there's something stupid I'm missing and this post will get 800 downvotes instantly banishing me back into the n00b realm, but perhaps I haven't gotten enough sleep lately and I'm missing something stupid.
This is on IE7 and an ASP.NET 4.0 backend. I also have jQuery libraries loaded on the page incase jQuery can improve this somehow. Thanks!

The most simple explanation is that forms cannot be nested.
You might consider revising your submit logic to appropriately handle the scenario server side (via the single postback form.) Otherwise you might have to consider a route that deviates from the standards ASP.NET Webforms postback model.

You can't nest forms in HTML, so the browser will ignore the inner form tag. When you submit the form, it will submit the only form that is on the page.
If you need to post a form to a different page, you can use Javascript to either change the current form before it's sent (onclick on the button), or create a new form element, add it to the page and submit that instead.

You're not allowed to nest forms in HTML. It's not supported by most browsers anyway.
What you can do instead, since you're suffering through .net webforms, is to just have a Button_Click event in the C# corresponding to the submit button you're clicking, and have it do the project jump from there.