one form button click for two actions - javascript

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?

Related

Navigate to Url or Url.Action in Javascript

This may have already been answered somewhere but I cannot find any information that makes sense to me.
I have a Cancel button in my cshtml that contains a href='#Url.Action("Index"). It looks like this:
Cancel
Now, if changes have been made, I need to confirm whether to leave the page or save changes before leaving.
So, I've added an event on the button click to present a popup to confirm to continue or save. Of course, leaving the button code in the cshtml file as it is, acts exactly as one would expect. It's a link and my event never fires.
I changed the cshtml button to the following code:
<input type="button" class="navigationButtons" id="btnCancel" value="Cancel" title="Return to Home Page" />
Now, my event gets fired and I display my popup to confirm continue or save.
The save works great because it's another method that performs a save to the db. I can't make the Confirm button into a link button, because it is used in another place in the code that just continues without leaving the page.
I have found answers for window.location, $.get and $.ajax. But I cannot figure out how to put into the JavaScript code that will go to my Index page.
PLEASE! Does anyone know how to do this and help me understand what I obviously do not know. :-(
Provided that your JavaScript is included in your .cshtml file, you can write Razor code inside your script:
window.location.replace('#Url.Action("Index")');
If you're having trouble with that, you could try creating a hidden link on your page and having your JavaScript trigger a click:
<a id="my-hidden-url" href="#Url.Action("Index")" hidden></a>
<script>
$('#my-hidden-url').trigger('click');
</script>

How to update 2 forms with one submit button

I have 2 forms on my page that I'm looking to update with one submit button.
I am able to successfully update each form individually, however, I haven't been able to update them concurrently using the same button.
The first form is updated via the php code located on the same page (say page1.php) that I'm putting the button.
The second form is updated via redirection to another page (let's say page2.php) where an event is called/handled (after completion, the page redirects back to page1.php where the changes can be viewed) and I achieve this using the onclick="page2.php".
I was wondering how I should go about getting both of these forms to update when I click the button.
Code example:
<form id="form" method="post" action="page1.php">
<input type="submit" class="button" value="Submit" onclick="form.action=\'page2.php\';" />
</form>
Assuming by updating a form, you mean submitting, there is no way you can submit two forms at once since you can't have two redirections at the same time (it just won't make sense).
But, one of the options is to submit the first form via an AJAX call, and if the response is correct, do the normal submit of the other form. This also makes sense since you said that you're submitting the first form to the current page you're on, which means no layout changes, etc...
Ideally, you'd make a new landing page for the AJAX call (no need to render the whole page behind the curtains) which would just output the result of whatever you're doing there (for example, updating database, and if success, just echo 'ok'). Then just check if the response is the expected one ('ok' in the case above, though you might want to return some more info, like an id or something), and if so, submit the second form regularly.
Hope this wasn't too confusing.
The other method I can suggest is simpler, but involves changing the app flow.
You can try to combine the two forms into a single form and just submit it to page2. It's something worth thinking about, altough it might require a lot of rewriting of the existing code.

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

Opening a window from an iFrame to its parent using a post

I have found similar problems on this site, but none of the solutions seem to work for my specific problem.
I have an iFrame embedded on my site. Inside this iFrame is a form with an input field that uses a 3rd party mailing service. When this form is submitted, a confirmation message pops up.
I need this message to appear in the main page inside of a different iFrame with an ID of mailingIframe. Below is the code I have at the moment:
<form action="http://blockdot.us4.list-manage.com/subscribe/post?u=434e0b545d0c86c1ccd5aee9c&id=5a445105c5" method="post" id="mc-embedded-subscribe-form" class="validate" **target="parent.document.getElementById('mailingIframe')"**
You need to replace your form action with action="javascript:;" and then make a javascript function which is called on the onclick event of your submit button. This function will basically do the validation and the data submission and its return will be to put your validation/procedure message to the contents of your "mailingIframe" area, like $("#mailingIframe").html('YOUR MESSAGE!');

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.

Categories