I am trying to disable form submit button that is an image after it is clicked to prevent duplicate entries. The form goes to Netsuite which is a ERP/CRM and is often slow so we have been getting users clicking it multiple times causing multiple entries which is why we want to have it disabled after a user clicks on it.
This is the code we are currently using:
<INPUT TYPE="hidden" NAME="payment" VALUE="check" ##check## checked>
<br>
<INPUT type="image" onMouseOver="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;"
onMouseOut="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;"
src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" VALUE="order"
NAME="order" id="order" class="button" onclick="this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';return true;">
I have searched around and read a few suggestion with most saying to add this to onclick area:
this.disabled=true
However adding that code to the onclick does not seem to work. I have tried adding it before and after the netsuite submit portion but does not seem to make a difference.
Does anyone know how I can get this to work?
this.disabled=true will not work for input[type=image].
This has to handle in javascript.
<input type="image" onclick="return submitForm(this)"/>
<scritp>
var submitted = 0;
function submitForm(input){
input.src = "new image path";
if (submitted == 0) {
submitted = 1;
return true;
}
return false
}
</script>
Actually disabled=true doesn't prevent elements of firing the onclick event. You could, instead, a javascript function to perform your submit instructions, and lock it with a variable after the first execution.
Something like this:
var submitEnabled = true;
function Submit() {
if(submitEnabled) {
submitEnabled = false;
this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';
//Or any submitting code you have
}
}
And then, your image element:
<INPUT type="image" onclick="Submit()" ...
I did a quick test and it looks like if you disable the button onclick the form will never get submitted. I'm not sure if you have have the ability to change the <form> tag, but if you do you could add an onsubmit event that disables the submit button after the form has been submitted:
<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="document.getElementById('order').disabled=true;">
<input type="hidden" name="payment" value="check" checked>
<br>
<input type="image" onmouseover="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" onmouseout="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" value="order"name="order" id="order" class="button">
</form>
If you have the ability to add your own CSS and JavaScript you could clean this up even more.
The rollover image would be better handled by CSS
And simply disabling the submit button doesn't necessarily mean the form can't be submitted. For instance you can submit forms by hitting the enter key on your keyboard. It's better to prevent the submit event itself, rather than disabling a button that may or may not be used.
Example:
<style>
#order {
background: url('http://www.domain.com/pb/tpl/img/emailquote2.jpg') no-repeat;
width: 300px; /* sizing for example only */
height: 100px;
border: none;
}
#order:hover {
background: url('http://www.domain.com/pb/tpl/img/emailquote3.jpg') no-repeat;
}
</style>
<script>
var formSubmitted = false;
function handleSubmit() {
if (!formSubmitted) {
formSubmitted = true;
return false;
}
return false;
}
</script>
<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="return handleSubmit();">
<input type="hidden" name="payment" value="check" checked>
<br>
<input type="submit" name="order" id="order" class="button">
</form>
Related
I have a button submit inside a form and just a normal button outside of it. I want to validate a form:
function myButtonHandler(evt) {
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
}
This doesn't show the standard error tips inside of input elements when they're invalid when I click on a button -- ones shown by a browser when I click the submit button. How can I get these validation message to pop up when I click on my normal button when the form is invalid?
<form id="my_form">
<input type="text" placeholder="Name" required="true"/>
<input type="submit" id="submit" value="go" />
</form>
No jquery.
You'll need to add the code you've shown to a function that is set up as the click event callback for the normal button:
var myForm = document.querySelector("form"); // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button
// Set up click event handling function for normal button
btn.addEventListener("click", function(){
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
});
<form>
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="button">Check Validity</button>
If you just want to show the normal browser's validation errors, you can make the second button also a submit button. It's OK for the button to be outside of the form as long as you tie it back to the form with the form attribute.
<form id="theForm">
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="submit" form="theForm">Check Validity</button>
When I click on submit1 and then on submit2 everything is going well, but, when I press Enter Key on 1st input text I go to the second part
When I press Enter Key on the 2nd input text -> 1st JavaScript function executes which causes me trouble.
I don't want to disable Enter Key press, but that he executes the good submit input.
Is there a way to deactivate submit1 after he has been executed?
Or know from which input text Enter Key has been pressed?
HTML:
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
CSS:
#3, #4
{
display: none;
}
JavaScript:
$(document).ready(function() {
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});
Unless I misunderstood the question - you are simply trying to make sure that the correct event handler gets called based on which button is selected by the user. This will work fine as long as the buttons have unique IDs which they do - and you can associate them with the correct event handler (which it seems like you are doing in the shared code).
Also, you can disable any button using the disabled attribute (set it to true).
to disable
document.getElementById("submit1").disabled = true;
to enable:
document.getElementById("submit1").disabled = false;
From what I can tell your biggest problem here is that you seem to have two submit buttons in a single form tag. I would seriously recommend against this as it can cause issues like the one you are experiencing. Instead I would change both to buttons and add the submit functionality to JavaScript methods as you are kind of doing now.
Obviously though you would want to link the text boxes to a button then and for that I would take a look at this SO question How to trigger HTML button when you press Enter in textbox?
<input type="submit"> is a special control. It will cause the form to submit if the form has focus and the enter button is pressed. When using this you should make use of event.preventDefault() to cancel that behavior when binding to the click event. I suggest using <button type="button"><button> instead.
If you press ENTER on submit1, submit2 will not be selected unless you hit TAB. Are you doing this?
Anyway, you can do this:
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
This will force the user, the next time he hits ENTER, to submit the submit2 button.
But don't use .submit()... you should use the .submit() function instead of .click(), because I believe .click() only checks for mouse clicks?
$("#submit1").submit(function(){
/* Blah blah blah... */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
$("#submit2").submit(function(){
/* ... */
});
As other users have said, are submit1 and submit2 in the same <form> tag:
Yes, they were. But you shouldn't have 2 fields in the same <form> tag if you want to submit the data separately.
Do this:
HTML
<form>
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
</form>
<form>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
JQuery
$("#submit1").submit(function(e){
/* Blah blah blah... */
e.preventDefault(); // Keeps the user on the same page //
});
$("#submit2").submit(function(e){
/* ... */
e.preventDefault(); // Keeps the user on the same page //
});
I let it work like that:
Why should I have troubles with one form? IE < 6?
HTML:
<form>
<div id="1">
<input type="text" id="text1"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" id="text2"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
CSS:
#3, #4
{
display: none;
}
JAVASCRIPT:
$(document).ready(function() {
$('#text2').keypress(function(e){
if(e.keyCode==13)
$('#submit2').click();
});
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
document.querySelector("#submit1").disabled = true;
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});
I am trying to get a function to print out whatever the user inputs into the text-box. I am using onClick as an attribute on my submit button. I know I set it up properly because it flickers the answer, but only for a split second. How can I get the input to stay on the page? Here's the code: HTML: Type what you want to post to the website!
HTML:
<div id="main_div">
<section id="leftbox">
<form name="mybox">
Type what you want to post to the website!:
<br />
<input type="textbox" size="15" maxlength="15" name="text" id="text">
<br />
<input type="submit" value="Submit!" onClick="doFirst()">
</form>
</section>
</div>
<div id="insert"></div>
Javascript:
function doFirst(){
text = document.getElementById('text');
insert = document.getElementById('insert');
if(text.value == "")
{
insert.innerHTML = "Please input something!";
return false;
}
else
{
insert.innerHTML = text.value;
}
}
try this:
Using type=button
<input type="button" value="Submit!" onClick="doFirst()">
OR using type=submit
<form name="mybox" onsubmit="doFirst(); return false;">
<input type="submit" value="Submit!">
</form>
Explain:
The action for onclick in submit button DO executed. You keep see the page does not have any changes, because of there are a FORM. And the key point: the form handle the submit action after the JS function doFirst() immediately. Adding the onsubmit in the form with return false to stop default action, means:
<form name="mybox" onsubmit="return false;">
<input type="button" value="Submit!" onClick="doFirst()">
</form>
To simplify the changes, use button instead of submit type, or using onsubmit instead of onclick in form trigger.
onClick="doFirst()"
gets converted into an anonymous function:
function(){ doFirst() }
and whatever that function returns determines if the submit should be completed or aborted, so you should use:
onClick="return doFirst();"
In other words, it's not enough that doFirst return something, whatever doFirst returns should be returned again inside the onClick.
I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>
I can't get the following code working: when I press enter in the text-box, the function is not called. I can't see why though...
<form>
<p align="center">
<input type="password" class="password" name="text1" onkeypress="submitonenter(text1.value,"money","cash",event)" /><br>
<input type="button" value="Enter" style="width: 100px" name="Enter" onclick=javascript:validate(text1.value,"money","cash") />
</p>
</form>
<script type="text/javascript">
function submitonenter(text1,text2,text3,evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
// process event here
if ( evt.keyCode==13 || evt.which==13 ) {
if (text1==text2)
load('money/welcome.html');
else
{
if (text1==text3)
load('cash/welcome.html');
else
{
load('failure.html');
}
}
}
}
}
</script>
<script language = "javascript">
function validate(text1,text2,text3)
{
if (text1==text2)
load('money/welcome.html');
else
{
if (text1==text3)
load('cash/welcome.html');
else
{
load('failure.html');
}
}
}
function load(url)
{
location.href=url;
}
</script>
I'm not sure why you need the submitOnEnter function at all.
Why not just change the input type='button' to type='submit' and change the onclick keyword to onsubmit?
EDIT:
Apologies, of course the 'onsubmit' would need to be placed in the form tags, not the input.
Giving the following:
<form onsubmit=validate(text1.value,"money","cash") >
<p align="center">
<input type="password" class="password" name="text1" /><br>
<input type="submit" value="Enter" style="width: 100px" name="Enter" />
</p>
</form>
I would rewrite it all, and use a input type="submit" instead a button (I also changed the access to the password field, for being able to use it at Firefox):
<form id="myForm" method="POST" action="failure.html" onsubmit="return validate(document.getElementById('text1').value,'money','cash');">
<p align="center">
<input type="password" class="password" name="text1" id="text1"/><br>
<input type="submit" value="Enter" style="width: 100px" name="Enter" />
</p>
</form>
<script language = "javascript">
function validate(text1,text2,text3) {
var form=document.getElementById('myForm');
if (text1==text2)
form.action='money/welcome.html';
else {
if (text1==text3)
form.action='cash/welcome.html';
else {
form.action='failure.html';
}
}
return true;
}
</script>
Edited: Implementing the onSubmit as recommended by #mway (thanks).
Like the others said - remove the onclick event, change the button to a submit button, and put the rest of your code inside a function referenced by an onsubmit tag on the form if you need to process/reformat data before you submit it.
After you have confirmed that the enter key has been pressed you want to call "evt.preventDefault()" to prevent the default action (ie form submission) from happening. I believe what is happening is that you are setting the location.href but then the form is submitting before that load happens so it reloads the same page instead.
Others have mentioned server side processing and from a security point of view this is probably a good idea. Currently this page has no security whatsoever. Anybody can look at your javascript and choose to navigate to either of the two welcome pages (or the failure page) as if they had put in the password correctly. If this is meant to be secure then you might want to go and read articles about security. In summary though do password checks and following logic on the server and don't have passwords that are that easy to guess. :) Also you might want to include checking they have given the correct password on every page (eg the welcome pages). This can easily be done by setting a session variable once you have confirmed their password.