PHP Javascript Change Browser Back Button behaviour Laravel - javascript

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

Related

How can data be submitted to server without triggering a page refresh?

I have two form elements; a SELECT drop down list which serves as an input for a javascript function, and a TEXTAREA which also is an input to the same javascript function. The textarea input needs to be submitted to PHP on the server more or less simultaneously with its use by the local javascript. Ideally, both the javascript function and the $_POST submission to the server would be triggered by the same button click, but I have not been able to get this to work because use of the textarea input by the javascript function prevents it being submitted to the server and vice versa (both these actions need the same data apparently causing interference. I have successfully worked around this problem by triggering the DOM submit() to the server with an onmouseout attribute on the input button.
The problem I now have is that the page refreshes wiping away the input values when the textarea input is submitted to the server. I don't want this to happen: I want the selection from the dropdown list to remain selected, and the text that was input to the textarea to remain in the textarea to ramain after submission. I have tried with the elements inside FORM tags and outside - page gets refreshed wiping away the values either way. There are many similar questions and suggested solutions posted on StackExchange, but after spending many hours trying many of them, I have yet to find one that works for me. Basically, they fall into to categories: ones that prevent the submit such as preventDefault and return false, and ones that don't prevent the refresh or don't work at all such as various javascript/jquery submit methods. To me, such submit methods beg the question of how does the server know anything about the method used to send the submit (other than whether it is GET or POST)? Doesn't the php code on the server receive the same $_POST array regardless of the method used to send it? How would it know the difference between an html form submit, a DOM submit or a javascript/jquery submit? It is not surprising that they all trigger the same page refresh in response.
It seems like there surely should be some simple way to retain the form values after submit because surely there are many times one would want to do this.
P.S. I am no fan of jquery, I found ajax to be much easier before jquery was created. That said, at this point I would appreciate anything that works. I have almost no familiarity with jquery so please, for any responses that use jquery, please give an example of how it would be implemented in my case (where it would be placed and how it would be triggered).
PreventDefault, return false, all manner of javascript and jquery submits, removing the FORM tags, sending the return to a hidden iframe
<select id="thisselection" class="sameline"><option selected>Select this</option></select>
<script>
function sendTextarea() {
document.getElementById("pform").submit();
}
</script>
<form action="" name="pform" id="pform" method="post">
<textarea id="text" class="sendbox" name="text" cols="45" rows="10">Hello world</textarea>
</form>
<input type="button" value="Send" id="pform" onclick="myFunction.speak($('#text').val(),$('#thisselection').val());" onmouseout= "sendTextarea();"
/>
Everything works OK but I have not found a way to send the textarea input to the server without triggering a page refresh.
I wish I could simply prevent the page refresh, but lacking a means to do so, it is possible to save and restore the form values after submit (as suggested by ADyson. There is something in html5 called localStorage or sessionStorage, and there are ready-made scripts that make it easy to use, including savy.js and formsaver.js There are several of them at https://www.jqueryscript.net/tags.php?/localStorage/ savy.js works for my purpose

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

HTML/CSS FORM: Data submitted though required field not valid or entered

This is my first time using HTML/CSS to create a form:
While trying to switch from google form to html form for the sake of having an upload button, I've found this very useful answer: Upload file/stackover
Then I looked at improving the design, so I'v found this:
CSS HTML Form Designs Template; (I've used Form Style 10).
So after trying and trying I've managed to do this:
JSFIDDLE
the Thanks.html file is missing (as on the original example post)
I'm almost done except few thing to sort out, if anyone can help me out that will be great:
I'd like all the required values to be checked upon submission
I've tried to add required Name: <input type="text" name="name" required /> nevertheless it sends the form data to the spreadsheet then display error message in the 1st required field (basically I'd like nothing to be sent until everything is ok in the form) (I read few things about onclick/onsubmit and type="button or submit"
but couldn't sort it out)
in the Thanks file, I've removed everything and wrote only:
<div>
<p><blink>Thank you <?= name ?>, your application has been received.</blink></p>
</div>
How can I center this message under the form, increase size and change colour to red please
I've tried to add the inner-wrap (grey colour around fields) as the template (Form Style 10) by adding: <inner-wrap> instead, but it doesn't work (any idea?)
Thanks you for your help
The reason why it doesn't do what you want is because the button still submits and you have no preventDefault event on submit because they assume you handle it on the backend. But will still display error messages to let the user know something is wrong.
There are several ways you can attack this problem:
you could use a 3rd party plugin like jquery validate
you can handle it to not submit until you check all the fields and then call
form.submit() (via this method you have the final one on the bottom not be input with type='submit' and handle click event and call a validate form method then submit if everything is alright)
on the backend you can check the fields to make sure they're all filled out and not even save to whereever
as for your text-centering: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
Edit:
For form validation, import the jQuery Validate at the top of your page either with the CDN/local js file and then call:
$("#commentForm").validate();

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.

Switch to POST from GET, need to submit a form to two different locations

[I did see the similar problems solved with AJAX/jQuery, so please read on].
I have a form that a user can fill out - but one of the options on the form allows selection of an image, and when the user goes to do that they are brought to a new page.
This was originally done via get, but my problem is... I need to save all of the information on the form to the session so that I can restore it when the user selects an image and goes back to the first page that had the form.
A HTTP GET may not hold enough data for all the information on my form, so I need to switch to post.
So, here's my problem... I need the form to POST to one page when I click "Select Image" and another when I click "Submit". How can I get the form to POST to a different page depending on which button was clicked?
PS: I'd prefer to just use standard javascript/html here. I plan on learning AJAX and moving over to jQuery after a while, but I'm not there yet :)
onclick, let each button call different functions. Within these functions, change the action attribute of the form dynamically.
document.forms['yourform'].action = 'your intended page';
Then submit the form.
document.forms['yourform'].submit();

Categories