I'm writing a JQuery submission form validator, and every time I press the submit button my page reloads. The problem is that every time I loaded the page, I was passing information into the URL that told it which stylesheet to use. Is there a way I can tell the page to use that same URL (including the concatenated information) when it reloads?
How can I pass information into the page URL when I click the submit button and it reloads?
Just use the window.location property coming and going:
$('form').on('submit', function(evt){
evt.preventDefault(); // prevent normal submit mechanism
window.location = window.location; // redirect to current URL
});
Basically, when the user clicks the submit button, the event bubbles up to the form, which submits. If nothing interferes with this mechanism, the browser will submit the form using the form's action attribute. If the action attribute is absent, it will use the URL of the current page.
The code above intercepts the form submission, and substitutes your own code. Note that we could also intercept the button press ($('button').on('click')), but this is generally safer because it covers other ways that a form can get submitted, such as pressing enter on a default field.
To redirect the browser to any URL, all you have to do is set window.location. That property also stores the current URL, so setting it to itself, in essence, simply reloads the page. Of course if you needed to modify the URL, you could do it at this point.
By adding your css parameter as a hidden field in your form.
Then, depending on what you are calling through the form, a GET method would show up all your parameters in the url. If you are submitting as a POST, you can redirect the submition result and appending your css parameter into the URL.
Related
I have a form and I want to set focus on the status message when the form is submitted.
I have tried the following code.
$('form').on('submit', function(){
$('.messages--status').focus();
});
But the problem is that when I submit the form the page reloads and therefore my code is not working.
Is there any way to find on page reload that the form is submitted?
So that can I set the focus on the status message based on that condition?
Append a query parameter your url, and show the message based on that.
Eg. suppose your form action url is www.foo.com/form/submit then make it, www.foo.com/form/submit?submitted,
so when the page loads you can check whether submitted is there in the URL or not.
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.
Is it possible to replicate f5 action to link using jquery? I need to refresh the page and resend data using this link, I have tried :
location.reload(true); or document.location.reload(); or $.f5();
But did not satisfy me.
Steps to reproduce using f5 key :
1. fill form then submit
2. press f5 - confirm box will appear
The page that you're looking for used information that you entered.
Returning to that page might cause any action you took to be repeated.
Do you want to continue?
try using
window.location.reload(true);
if it wont resubmit the form. you have two more options.
Submit the form using ajax after once submitted and resubmit the form and second time refresh the page or clear the form
Or you can keep the post data in some session or in the post array [server side code] and refill the form and resubmit,
Make sure you keep the track of numbers of submit you made since it will cause you trap in some recursion.
BUT why you want to resubmit the form you already have data you can perform both actions,
And if you have to post the form to some other action for second submit you can do the same may be using CURL at server side.
Try this:
window.location.reload(false);
// If we needed to pull the document from
// the web-server again (such as where the document contents
// change dynamically) we would pass the argument as 'true'.
source
I am trying to dynamically change the URL of a Facebook Send button with Javascript, but I have had no success so far.
I have a page set up with a few inputs, and I would like the URL of the send button to take the fields value as parameters before it sends it. The problem is when I add the send button to the page, it generates the iframe code inside and even if I modify the href parameter later on, the iframe still keeps the original link in. I guess the solution would be to refresh the content of the send button somehow or add it after page load, once the fields have been completed, but I couldn't figure it out.
Thanks for your help.
You can try using the iFrame version of the like button instead the XFBML version. The like button can be post-loaded into the page after the form submission, via an AJAX call, in which you have passed the data filled up in the form.
You can't do this. Javascript can't be used to control an iFrame on a different domain than yours. This is due to the Same Origin Policy.
What you can do is change the parameters on you send button xfbml tag and then call FB.XFBML.parse(); so the button uses the new parameters.
I am currently working on a form which posts to a web service. The form validation is done at the web service and if a validation error occurs the user is presented with an error and a back button.
The form contains a number of default values which I am auto populating. These values then overwrite any values that the user has inserted when the back button is pressed.
Is there a way I can detect to see if the user has pressed the back button and prevent the auto population?
My guess would be you are filling these post load via JS? Because the value attribute should not override new values. If you are, I would just do a check to see if the field is empty before loading in the text.
Also, I would look into the placeholder attribute.
Pass a parameter as part of the URL that your back button sends the user to, then check to see if that parameter is part of the URL of the current page in your Javascript. If it's present simply don't populate with the default values.