redirecting to next page - javascript

I wrote a javascript function to go to a particular page if it came from a particular page.
Function:
function proceed()
{
if( document.referer == "http://abcd.com/index.php?action=SignUp")
{
return document.location.href = "http://abcd.com/editprofile.php?action=editprofile";
}
}
Submit button for a form in current page(b):
What i want is to go through a sequence of pages a->b->c , where a is previous , b is current , and c is next in my case. b has a form, on submitting values to the form, it should also call the javascript function and then go to the page c.
Can anybody help me find out where is the mistake? Any help would be highly appreciated. Thanks.

Since you have a form I guess there's also some php/cgi script that will handle the form's data!?
In that case your form won't continue to that script if you override your submit button via javascript in such way that it loads another page (other cases like validation do work that way, of course).
So
Your submit button has spaces next to the onclick attribute: onclick = "javascript... should be onclick="javascript....
Your function proceed() should return true for the submit to perform.
Even after all syntax correction, there's still something odd. After all, you can only give one "next page" functionality to your submit button. So what should the form call:
your php or cgi script? Then you can build a redirect to page "c" into that one.
your page "c"? Then what do you need the form for?
both, but independently? In that case I suggest a javascript popup from proceed() displaying page "c" and returning true so the form continues with its script.

To be more accurate you will have to provide more of your application's code.
Solution seems to be the following. Use the submit attribute for your button:
<button type="button" onclick="proceed(); alert('You are not authorized to execute this action!');">Click Me!</button

Related

prevent multiple submission with button

I am currently viewing all the possibilities for preventing multiple submission with button tag. The problem I am facing is that if users click submit button really fast it will enable them to submit multiple posts. I would like to restrict the submission to just one submission. I tried to use onclick="this.disabled = true, but it makes the button not working at all. The current button tag looks like this:
return "<button class='button btn btn-primary' id='gform_submit_button' onclick='this.disabled = true' type='submit'><span>Submit!/span></button>";
Can anyone guide me as to how to achieve this?
Ultimately, you cannot prevent multiple submissions on the client-side. You would have to implement these security measures on the server-side, in whatever server-side language you are using (e.g., PHP).
On the client side, you could do something like this
var canSubmit = true;
$('.button').click(function(){
if(canSubmit)
{
// fire missiles
canSubmit = false;
}
else
{
// sorry missiles loading
}
});
Now since after clicking once canSubmit has been set to false, a second click would not run the code. After validating or processing your submitted data you can set canSubmit back to true.
When the button is onClicked call this function:
function submitFunc(formId){. document.getElementById(formId).submit();
}
Submitting a page is always going to be tricky. There are two challenges with submit
As you rightly mentioned that user can submit same page multiple times
After submitting page if user refresh the page then also page is going to be resubmitted
There is one trick to handle this challenge redirect the page with GET call. The GET call which you have used to load the data. Read more about it here.
So I would recommend to redirect page to GET once form is submitted.
In this process the new form will be loaded and if user try to submit the form validations will be fired that will handle 1st challenge.
And due to redirect as your last call is GET on refresh data will be loaded and there is no harm in it.

Javascript code not running after the page is refreshed or reloaded

I have a javascript code that, whenever a checkbox is checked, will reload my current page and then is supposed to grey out some input fields.
However, it is only doing the reload when the page is reloaded the input fields are never greyed out.
$(document).ready(function(){
$("#storePickUp").on("click", function () {
if ($(this).is(":checked")) {
document.getElementById("shippingForm").submit();
document.getElementById("shippingAdress").disabled = true;
document.getElementById("shippingState").disabled = true;
document.getElementById("shippingCity").disabled = true;
document.getElementById("shippingZip").disabled = true;
document.getElementById("shippingZipCode").disabled = true;
document.getElementById("shippingButton").disabled = true;
}
});
});
So in your code on the 4th line where you call .submit()... unless you have some extra magic on the page that you are not showing, this line will proceed to post/get your form to whatever url you have configured in that form.
What this means is that the lines underneath that do not matter at all, since they will not be executed on the forms target page.
To get around this if you truly need the form post in the middle, you would need to post to a specific url and use that url as a trigger on page load to disable those elements. Not directly after the click, but rather on the newly loaded page that is the target of the form... make sense?
I think that's because it's only disabling them when you click on #storePickUp but if your page is reloaded it will reset.
Method submit is executed, page reloads, code after submit is never executed. Even if that code would be executed, page refresh nullifies any changes.
You should probably do submitting with ajax, not with submit method. If you are using jQuery, it will make it easy for you:
http://api.jquery.com/category/ajax/

"Quiet" Form Submission with Ajax

My intention is to submit data from a form to the server and not have the page reload. It does not even need to display updated data. I am developing using Firefox and I'm looking at two paths to get what I want:
I've discovered that if I place a button inside a form, the form will be submitted with the name of the page containing it as a "GET" request. The form tag in this case has not method attribute and the action tag is empty. I can input the function that I want into the action attribute, and the browser will apply the rest of the form fields to the request. I find the formulation of the form convenient, but the browser goes ahead and replaces the page with whatever the response is from the server, taking me away from the original page.
Taking the button out of the form and wiring it exclusivly to a javascript function allows me to register a function to the onreadystatechange event. This has the effect of running a function rather than reloading the page when the server responds. The down side of this seems to be that it is necessary for the function to formulate the "GET" request on it's own.
It seems to me that there should be a way for the javascript function to tell the form to submit using it's own devices, and then be ready to process the the response. Being new at this I am unfamiliar with what "Best Practice" would be for this requirement.
You can just use a <button> to post your details.
function ajaxPage(postPage, paramList) {
xmlhttp.open("POST",postPage,false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(paramList);
return xmlhttp.responseText;
}
In this case your postPage is a address to a piece of relevant code and paramList is a list of & delimited name value pairs.
Kind regards,
Westie
You can add an "onsubmit" function to your form.
It is important to return false or call event.preventDefault() in that function in order to prevent the browser from posting the form.
HTML:
<form onsubmit="javascript:myFunction()">
...
</form>
Script:
function myFunction(evt) {
// do your ajax call...
evt.preventDefault();
}
Not really need the "Submit" you can search for autocomplete suggestions implementation with ajax:
Onfocus On..Even you will send all form data to server side, you you want autocomplete with server side response than it a pus and you can explain for the user for that you need.
This link may help you a bit.
This is what I've Ended up with, going forward with pathway number 2 as described in the original question, The button invoking the script is outside the form, so there is no submit event. Data from the form is harvested by the script as described in this answer to a related question:
https://stackoverflow.com/a/589100/747544
From there, the "get" request is formulated by the script
XMLHttpRequest.open("GET", "/myCommand?"+queryString ,true);
XMLHttpRequest.send(null);
The form is in effect "scanned" by the script without ever having been submitted, so there is no need to prevent the default behavior with an onSubmit event returning false. or preventDefault().

jQuery countdown stops onLoad submission of form

I have a page which submits a form on page load and redirects the user to another site. The response from the other end can be a bit slow, so I created this page with a fake loading progress indicator to reassure users. For further reassurance I wanted to add a countdown message saying "You should be redirected to X in Y seconds".
I used this jQuery example, which updates an element with id "countdown" with the current number.
{$(function(){
var count = 7;
countdown = setInterval(function(){
$("#countdown").html(count);
if (count == 0) {
clearInterval(countdown);
$('#countdown_container').html("If you seem to be stuck <a href='javascript:the_form.submit();'>click here</a> to try again.");
}
count--;
}, 1000);
});}
I expected that the redirect would happen before the countdown reached 0.
Unfortunately I've found that the script actually stops submission of the form until it's finished running.. Doh! Can anyone suggest any way around this?
A bit later:
Just to clarify after Praveen's question, I have a normal form on the same page with method post and various hidden inputs containing data to be posted on to another site. In the body tag of my page I have an onload statement submitting this form, like onLoad="document.forms['the_form'].submit()". (I realise that's probably better done in a jQuery load event.)
You can always submit using $.get or $.post
Then when the callback is run, you can redirect or do as you like.
Doing it manually like this gives you more control as to what to do with the data returned
and if you would like to redirect to a different page after.
//html
<input type="text" name="firstname" value="some text" />
//jquery
$.get("mypage.php", { firstname: $("input [name=firstname]").first().val() },function(data){
//redirect, show popup, do as you like since the form has been submitted
//data contains the results that were printed
});
I read this question 3 times and still didn't understand it.
Also I didnt find any redirection code or other mechanism to redirect ( you have said I expected that the redirect.. )
I also didnt find submission code , you have said script actually stops submission...
I think you should show more or explain more.

jQuery onclick pass post variables and reload page

Can I pass post variables and reload a page on clicking an hyperlink?
To be clear I have something like this.
Click
If javascript is enabled,
I think I can use "event.preventDefault()" to suppress passing as GET variable.
So now onclick, name should be passed as post variable instead of get.
If javascript is disabled,
Then the above should work.
You could do it, by creating a new form element, pointing it at the href and calling .submit() on it.
<a class="postlink" href="test.php?name=test">Click</a>
<script type="text/javascript">
$('.postlink').click(function() {
var form= document.createElement('form');
form.method= 'post';
form.action= this.protocol+'//'+this.hostname+this.pathname;
$.each(this.search.slice(1).split(/[&;]/g), function() {
var ix= this.indexOf('=');
if (ix===-1) return;
var input= document.createElement('input');
input.type= 'hidden';
input.name= decodeURIComponent(this.slice(0, ix));
input.value= decodeURIComponent(this.slice(ix+1));
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
return false;
});
</script>
Or you could just do an AJAX request instead and reload() the page afterwards if you prefer.
However, I'm not sure why you'd want to do this. What use is a link that's usually POSTed, except when it's not? (Not just when JS is disabled/unavailable or when it's a search engine, but also when the user middle-clicks the link or tries to right-click-bookmark it or whatever.)
If all you want is something that behaves like a button to submit a POST form, better to actually use a real form and submit button, and then use CSS to restyle it to look like a link if that's what you want it to look like.
Very good hint....
I was first trying to send the form data via an Ajax Post call and reloading the page afterwards, but it was not working properly:
var biq_select_val = jQuery('#biq_search_select').val();
jQuery.post(window.location.href,
{ biq_amazon_item_list_search: biq_select_val},
function() {window.location.reload();}
);
Now I am using just a:
jQuery('#biq_amazon_item_list_search_form').submit();
and it is working fine.
I have some 10 links on a page. When user clicks on those links ajax-reload must take place.
To be clear I have something like this.
one
Two
If javascript is enabled,
Onclick, ajax load must take place.
If javascript is disabled, Then the above should work.
Basically I am using name to limit some values of my search page.

Categories