Block an Order Button - javascript

I am looking for a script that will block or remove an order button to prevent customers from double or triple ordering but clicking the button more then once. I don't know what something like this would be called. But the site was developed in Classic .asp. However I'm going to guess and say this would be javascript or jquery on an image button? Any suggestion or points for this would be a big help!!!!
Thanks,

Having seen your comment on ianpgall's answer, I think the best solution would be a server-side check of the customer's order.
When they click the button and submit the form, check to see if they have already added the product to their basket. If they have you can either choose not to add it again, or ask the user to confirm.
This allows users to click the button more than once if they want to, and also prevents adding the product erroneously if the user has javascript disabled.

I think you're referring to "disabling" the button. For example:
<input type="button" id="button1" value="Submit" />
$("#button1").click(function () {
this.disabled = true;
});
If you're using AJAX, you can disable the button when it's clicked, then remove the attribute when the AJAX completes.
UPDATE:
Just as a reminder, this will only work if the user has Javascript enabled. That's a pretty safe thing to expect, but I just wanted to let you know. If it's not enabled, I'm not sure how else to prevent multiple clicks, without enforcing the user to have Javascript enabled. If this is a serious problem, you may want to look into that.

You can disable the submit button once it has been clicked, which will prevent this in most cases. There are so many ways of doing this in JavaScript and jQuery.
This is one simple example using jQuery. It will disable any SUBMIT buttons in a form once the form has been submitted, preventing the submit button being pressed again.
<script type="text/javascript">
$("form").submit(function(){
$(this).find('input[type=submit]').attr("disabled", "disabled");
});
</script>
If you also want to protect against the user clicking back and submitting again then you need a different solution based on ASP sessions or cookies.

Related

Stop form from submitting without javascript

The problem is quite simple to understand but quite hard to execute. I am currently facing some clients that turn off their browser Javascript by default and this screw up my website a bit. Since my website send ajax requests on form submit, stop the form submit using Javascript, turning JS off means the form will be sent through and that's unexpectedly.
What I am trying to ask and achieve is whether it is possible to just using html purely to stop a form from submitting?
I think the best answer is; to have the original form action point to an error page, asking the user to turn on javascript.
Then let your javascript code fill in the form action parameter, once the ajax state is complete.
Alternatively or additionally, you could use a <noscript> tag as suggested in the comments, to generate a message on the original page.
I think you can simply change your submit button tag to an input and style it to look like a button and remove the type="submit" that's all. with out ajax it will not respond.

Selecting the correct element to trigger form submit from within a function

I have several forms on a page. The forms are actually PayPal "add to cart" buttons. When a user clicks on a button, an alert box asks for their zip code. If the zip code in in the array of okZips, I want to programmatically follow the link through the submit button to the cart, but I just can't quite get the correct element to attach .submit() to.
$(this).add("div.check-zip").add("form:first").submit();//this submits the first form on the page
$(this).add("div.check-zip").add("form").submit();//this submits the last form on the page
$(event.target).add("form").submit();//this doesn't submit anything
$(myEvent).add("form").submit();//this submits the last form where myEvent is a global variable
The pen can be found here:
http://codepen.io/enielsen0001/pen/KwEbzz
How do I select the correct element to apply the .submit()? Am I going about this all the wrong way?
You are not going all the wrong way but it is definitely the baddest and dirtiest way. It seems like you don't know what you are doing. Your classes are messed up, you are mixing jQuery and plain js, you are using while and for. It seems like you have deliberately copy pasted code with no idea what it is. Please have atleast beginner's js/jQuery knowledge before posting questions.
However, here is the updated pen http://codepen.io/anon/pen/NPJJwJ.
You would need the actual form object for submit to work.
// myEvent is event itself not element
$(myEvent.target).parent("form").submit();
I have refactored stuffs involving while and for loops you used. Compare your code with updated code. Hope it helps:

Multiple HTML forms with JS actions - how to disable second button (submit) until first (calculate) button clicked?

I've never done this double input thing and I'm scratching my head trying to disable the submit button on the "main form" until the preliminary form's calculation is done.
This must be done to pass along the values I need for the next page:
<input type="button" value="Calculate" onClick="calcRoute();">
And at the bottom of the page I have a submit button that goes to the next page, in a seperate form like this:
<form method="post" name="sendvalues" action="confirm_p2p.php" onsubmit="$.post('confirm_p2p.php';">
....
<input type="submit" name="submit" onclick="setValue();"/>
The problem is that the first calculate button is two input fields so the user ALWAYS presses enter after the second field is filled out. I've tried putting a line that says "click this button before submitting" but even in my small user testing thing everyone pressed enter after the calculation form was complete.
Is it possible to disable the enter submission until the first calculate button has been pressed? I've tried other disable things I found on here but it messes with the ability of the calc form to get the number I need to pass.
To disable a form from submitting, you need to call event.preventDefault when its onsubmit event occurs. You want it initially disabled, then enabled after the first button is clicked.
On the form sendvalues, set
onsubmit="event.preventDefault(); return false;"`
to disable it.
On the Calculate button, set
onclick="calcRoute(); document.getElementsByName('sendvalues')[0].onsubmit='$.post(\'confirm_p2p.php\');';"
Which will enable your other form and also do your POST request (make sure it's synchronous, otherwise the browser will have navigated to the action page before it completes).
You should note that the AJAX request will not send the form data. I don't know what you're trying to do, but your current setup won't work as expected.
Sure, you could do as you are requesting by doing the form submit through JavaScript and writing validation code; however, a better solution might be to use your input's onblur event to do the calculation without pressing a button.
It is difficult to tell without your full code but if you can show more I can probably explain better.

Correct way to have an input of type submit and avoid spam-bots?

I used to have a form which submit button was just a div, like this:
<div class='submit-form'>Submit</div>
However, that didn't let my users to submit the form when pressing the enter key, so I added the following
<div class='submit-form'>Submit</div>
<input type='submit'>
A submit button, that I hide with CSS, so it's transparent to the user, but it's still functional.
What has happened since I added that is that I have gotten several spam submissions. So, my question is:
Should I remove the input of type submit and somehow add a jQuery listener for the enter key in the form?
OR
Should I add some kind of anti spam security?
I would suggest to use standard html elements in forms, so you can have graceful degradation.
A form without a submit button can cause you more than one trouble (accessibility, javascript enabled in browser, etc...).
This is a general good rule.
Then you can implement a standard (do not reinvent the wheel!), accessible anti spam feature in your form, such as recaptcha.

Use JavaScript to disable all buttons on a page until a refresh

I have a page that will cause an error if a user tries to click too many buttons at one time (for the impatient user) and therefore need to DISable any button (all defined by a JS onclick function) on the page until it is refreshed (with new data sent via the server using Java.) What is the best method to do this, and is there a way to do it with jQuery?
You would have to find all types of buttons using something like this..
$('input[type="submit"], button')
and loop through the returned array and do .attr('disabled','disabled'); on the item in each iteration.
How about simply calling this when you want to disable the buttons:
jQuery('input[type="button"]').attr('disabled', 'disabled');
That will disable all inputs of type button on the page. Of course, as soon as you reload/replace the page contents, the new buttons will not be disabled. You can also just disable all inputs if that's easier.
Fiddle: http://jsfiddle.net/duffmaster33/xDMux/
The single best solution is to use the BlockUI plugin for jQuery. It accomplished everything I needed and more. http://www.malsup.com/jquery/block/

Categories