Refresh and action button Html - javascript

I would like to add a button which enables to do an action and also refresh the current webpage. I don't understand why the following code doesn't work. In fact the action is performed but not the refresh.
<form class="form-search" action="#Url.RouteUrl("xx")" method="post">
<button type="submit" class="btn" onClick="window.location.reload();"></button>
</form>
Any advice?

That doesn't make any sense. The action is actually a request for another page. The refresh is a request for the same page. Just choose one.

If you just want to just give the user a refresh button, it's simple:
refresh
this is extremely simple, so it does come with its share of downsides, the main one being that you lose any URL parameters and fragments. If you don't use these, then it's just fine.

Related

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?

location.reload(true) starts an infinite loop [duplicate]

I have a page, to which I POST information via form method="post". I would like to relaod it with JavaScript, but location.reload(true) and location.reload() makes browsers ask if I want to send the POST data again.
I would like to make JavaScript reload the page with GET instead of POST to skip the POST data.
How can I achieve that?
window.location.href = window.location.href
try
To reload a page without post data using javascript the easiest way I've found is to use an extra form to submit - this works regardless of whether the url is # or anything.
<form name="reloadForm">
<button type="submit">
Continue
</button>
</form>
<script>
document.reloadForm.submit() ;
</script>
That will show a button briefly on screen that the user can click continue on but the script will automatically submit it - this method sorts out a number of problems - the form is empty so it will not submit any post data (the button isn't named so even that won't submit a value). It works even if the url is set to #, and finally it gives a backup in case the user has disabled javascript (or the javascript doesn't work for some reason) they've still got a continue button available to click.

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>

PHP Javascript Change Browser Back Button behaviour Laravel

I know there are various threads that ask for nearly the same but none of them seems to really satisfy my needs....
On my site, I implemeneted a search form. A simple form with an input field, called searchQuery and a submit button. The form is sent with POST method.
I'm using Laravel btw.. The search result are then loaded into a view from the controller. Those are shown in a table. Now comes the interesting part: The found elements are clickable and you get on a page with more details about that element. Then the problem comes: When I now click the browsers back button or my back button on the mouse, I get a window asking to send the form information again and I have to confirm that.
This is not what I want, I want to just get back to the search results I had before....
Now I read a lot, but am still not knowing, how to do that.
I read before onbeforeunload where you can display a message, but thats not useful for me (I want to get back to the search results)...
So there are some alternatives that would be possible (if technically possible):
just prevent the dialog asking to submit the information again and just submit it again without asking for
Somehow go back in the history to the page before (cached maybe or something similiar, search results won't change in that time)
if I wanted to, I could include the search them in the url like http://servername/search/searchquery, then pass this searchquery into the deatil view and have a button to go to that url that then does the search again or something like that. Then you could (maybe) override the browsers back button to "press" that button instead of going back in history...
Is one of these options possible and if yes how? Or is there any other way you can advise?
As per your comment in the question above, you can do it like this:
First of all your form should be like:
<form action="/search" method="GET">
<input type="text" name="searchQuery" value="Type keywords here...">
<input type="Submit" value="Search">
</form>
Then after submitting your form, the route / url would be like this:
http://localhost:8000/search?searchQuery=any_search_keyword
Route::get('search', 'SearchController#handleSearch'); // Laravel route
And you can handle your search in your controller like this:
function handleSearch() {
$searchQuery = request()->get('searchQuery');
// ... Handle your search here ...
}
In this way you can use GET method to handle searches, this also prevents the unnecessary submission dialog over and over again on going back and forth...
As per my understanding this would be the solution you're looking for

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.

Categories