I have a little problem here. Actually, more of an annoyance.
I have a form on my index page that has a small search form:
<form action="search.php" method="post">
<input name="search" type="text" />
<input type="submit" name="submit">
now on the search.php file I just use the $_POST['search'] to retrieve the value that I'm searching. This file also displays the actual search results, which I can click on to go to that page.The search is actual done on the database. Also, because my search returns the top 10 random results from the DB, if I hit the 'back' button and confirm the warning, the search will be executed again, and will return a different set of results.
The problem, as you know, is that when you click on one of the search results and then hit 'back' on the browser, you get that browser warning about 'To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.'.
What's the easiest way to prevent this from happening? I looked into that PRG technique but I'm not sure how to implement that.
Any help would be great.
Thanks.
Bruno.
Is it OK to use GET method here, users won't see warning if form sent by GET method.
Related
I'm trying to scrape prices from this site:
https://www.pensketruckrental.com/quote/start.html
I can easily enter the form data, and I can activate the "Get A Quote" button and click it.
What I can't seem to do is get the form data to submit using a web scraper (I'm just doing it in VBA). When I input text using the scraper, the button remains grayed out, and even making a .click call on the button just displays errors on the form telling you not to leave the fields blank. Apparently it only recognizes data when you use an input device?
The code for one of the required fields, pickupLocation, is the following when I enter it manually (and thus the button works and the form can be submitted):
<input
type="text"
id="pickUpLocation"
name="pickUpLocation"
class="penskeValidateField penskeGoogleTypeAhead penskeInlineError ng-isolate-scope ng-touched ng-focused ng-dirty ng-valid-penske-err_loc_empty_sa ng-valid ng-valid-parse ng-valid-required"
aria-invalid="false"
aria-required="false"
country="rentalEntryCtrl.formItems.country"
penske-validate-field="pickuplocation"
required=""
autocompelete="off"
data-penske-placeholder="rentalEntryCtrl.activePlaceHolders.pickUpLocation"
ng-model="rentalEntryCtrl.formItems.pickupLocationSearchCriteria.address"
autocomplete="off">
And when I enter the data automatically using my scraper the tag & attributes read as follows:
<input
type="text"
id="pickUpLocation"
name="pickUpLocation"
class="penskeValidateField penskeGoogleTypeAhead penskeInlineError ng-pristine ng-isolate-scope ng-invalid ng-invalid-required placeholder ng-touched"
aria-invalid="true"
aria-required="true"
country="rentalEntryCtrl.formItems.country"
penske-validate-field="pickuplocation"
required=""
autocomplete="off"
data-penske-placeholder="rentalEntryCtrl.activePlaceHolders.pickUpLocation"
ng-model="rentalEntryCtrl.formItems.pickupLocationSearchCriteria.address"
autocompelete="off">
So of course I tried to copy the fields in the first code block into the second code block using setAttribute(), but even though I could change the attributes, I still couldn't get the form to submit properly.
I've looked at others that have dealt with something somewhat similar with autocorrect; their solutions have involved looking at the header and responses and just using the straight XHR to loop through the autocomplete queries, but the pricing information I'm scraping comes after several pages of form submissions, so that's not an option here.
I'm stuck I think; any ideas on how to populate the form and click the button/submit via my scraper?
I wonder the difference between:
<form method="post" action="">
and
<form method="post" action=".">
I have read this interesting thread. It looks like blank action is handled by all browsers. Some say the period is not a good idea but they don't say why.
Furthermore, this thread is quite old now so i think it would be useful to have an update on the subject.
Thanks.
The blank represents that the result display of the form will display within the same page. Let say if you input the name, address, tel # etc.... and press the submit button. The collected information will display within the same page (probably below the form). I usually do this when i design a form to make sure it works. But there are various reason why they leave it blank instead putting another target page.
I am building a multi-page form for my website. Each page has several fields and a Back Button and Next Button. The Next Button takes the user to the next page of the form. I have achieved this by adding a input button like <input type="submit" value="Next Step">. The Form action is set to a different php page. A Back button lets user go back to the previous page and make changes if any. For this, I added <input type="button" value="Back" onClick="history.go(-1);">
I have also added header('Cache-Control: max-age=900'); to all my pages. I also use Sessions to store data.
On clicking the back button, I can see all my previously entered text in the first form. But, on clicking the Next button, text entered in the next form disappears.
My question is, how can the user entered data be stored inspite of clicking the Next button. The browser forward button keeps the data though!
I may prefer you to use more elegant way of storing your forms' data by using any kind of local storage api. There is already an api that will do that for you:
Garlic.js
I'm not the developer of this api and I haven't tasted it by myself, but I've seen other people suggesting it to people.
I'm creating a form where the user will enter data, then click "Review" to see the data they entered. Then after review, "Save" the record.
I'm using a <cfform> to submit the form but wonder how to submit the data to the database from the "Review" page since there's no form here.
Should I set variables like FORM.Name = VARIABLES.Name to display on the review page, then convert them back after they submit the "Save"?
Not really sure what to do here. Overthinking?
Just keep in form scope. Basic output of form values, using baked in form.fieldList:
<cfloop list="#form.fieldList#" item="fieldName">
<cfoutput>
#fieldName#: #form[fieldName]#<br>
<input type="hidden" name="#fieldName#" value="#form[fieldName]#">
</cfoutput>
</cfloop>
Link to original form or submit to page where you save it, using values from hidden fields (which should mirror original form values)
A few other ways you could do this, but this seems simplest to me.
Why not using a second form with hidden input fields for the review page? Confirm would be a submit button to the page that saves the data to the server.
Second possibility (not that proper): save the data directly into the database and load it for the review from there. Trick: use a flag with "confirmed" and set it if confirmed. Bad part about that: you have to clean up older data that has not been confirmed.
Improving on Billy Cravens answer. This protects against the fields having Embedded Attacks
<cfoutput>
#lcase(fieldName)#: #xmlFormat(form[fieldName])#<br>
<input type="hidden" name="#fieldName#" value="#xmlFormat(form[fieldName])#" />
</cfoutput>
Also this will not work for image uploads. The lcase(fieldName) is to keeps the fields from being displayed as all caps. Lowercase is often easier to read.
I need to have a form submitted using the enter key, however, I have to use a BUTTON instead of SUBMIT as the type in order for the page to not refresh. How can I get my BUTTON to act as a SUBMIT and be executed whenever someone pushes their enter key?
<form>
<input type=text ...>
<input type=button ...>
</form>
A lot of the information I found about this mentions Netscape/IE/lots of outdated material.
This is my HTML output, I'm looking to hide the submit button and use ENTER:
http://i.stack.imgur.com/Ohepe.png
with Javascript enabled
<input type="button" onclick="this.form.submit()" ... />
should work
I have to use a BUTTON instead of SUBMIT as the type in order for the page to not refresh
Nah. Use a normal submit button that refreshes the page. (And ideally, for accessibility, make it work!) Then add progressive enhancement to replace the submission action of the form with something smoother when JS is available. Use return false (or event.preventDefault() in the DOM 2 Events model) to stop the form submitting in this case.
<form id="foo" method="POST" action="dosomething.script">
...
<input type="submit" value="Do something"/>
</form>
document.getElement('foo').onsubmit= function() {
beginAJAXSubmission();
return false;
};
Catching the submit event of a form is generally better than trying to pick up click on buttons, because it will always fire when the form would normally be submitted, including on Enter keypresses. click on the first submit button in a form will usually be fired on an Enter keypress, but there are cases (depending on number of controls in the form and what browser it is) where it doesn't happen and so you can end up falling through to actually submitting the form.
as other said, you have to use Javascript. I recommend JQuery framework.
But i don't understand the refresh thing?
Normal way is you hit submit and your form will be sent over a request to the server.
Server process the data and return a response (HTML/JSon..etc) this response will normally be redirect to a result page (to avoid the famous warning about re-post on refresh).
Now if your form is only a little piece of a bigger page, you might want to use ajax to post the little form and then take the result and update your DOM.
All this said, nothing prevent you to use submit type for the button, it is actually the best way to make your enter key defaut to this action. All you have to do is to use Jquery and intercept the submit of your form and make an ajax call instead of going the normal way.
you will find plenty of example to use JQuery since its probably the most used javascript framework.
Hope it help