I have the following form:
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all.
In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
Would appreciate any ideas why it breaks in Chrome.
Thanks!
Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).
First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.
Now to make this work, you would have to submit the form from your function:
$(this).parents('form').submit()
You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.
And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();
Related
This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
Closed 2 years ago.
I know, the title seems to lead to a repetitive/useless question, but I can't find a solution in other questions. Let me explain better and read what follows before closing my question.
I created a form by learning from different sources. It all seems to work fine, until I have to click on submit button, with "Save as TXT" written on it. It happens quite a strange thing:
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
I think I found why this happens, but I can't fix it. It seems to be something which has to do with both my HTML code and my JavaScript code. Here it is a part of it:
Javascript
$(function(){
$("#submitLink").click(function(event){
// things to do on submit...
});
});
HTML
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
</div>
</form>
How can I change this part of the code in order to submit successfully by clicking anywhere on the button (and do what I write in the JS function)?
Thanks in advance,
happy coding everyone!
ps. I read this "famous" question you added by after closing my question, but it is not helping me. By writing type="button" instead of type="submit" I get no results, I'm sorry
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
When you click on the text itself, you are clicking the <a> element, and therefore triggering its event listener.
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
When you click on any part of the button, are triggering the <button>'s event listener.
Therefore, I suggest
So it seems like the solution is to taking the <a> element's event listener and attaching it to the <button>.
One way to do this is to replace
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
with
<button class="btn btn-primary btn-lg" id="align" onclick="{Save as TXT}" type="button">Save as TXT</button>
where "{Save as TXT}" was the code you previously had in the <a>'s href.
The reason you need to add type="button" is so you can disable the button's default behavior submitting the form (and therefore refreshing the page).
Then, since you got rid of the <a> tag, you need to attach any listeners that used to listen for clicks on the <a> tag to the <button> instead.
To do this, replace:
$("#submitLink").click(function(event){
// things to do on submit...
});
with
$("#align").click(function(event){
// things to do on submit...
});
See it in action:
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" onclick="console.log('Submitted')" type="button">Save as TXT</button>
</div>
</form>
You need for the BUTTON type 'button' but you had 'submit'. So it wants to submit the form which follows in a reloading, with button the action is needed to be done from you.
The A-tag is not needed so I deleted it. On the contrary if clicked at the corners anything happened, now this functions
<button type="button" id='btn'>Save as TXT</button>
Just test it.
$(function(){
$("#btn").click(function(event){
console.log('Submit');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="myForm" action="" id="formToSave">
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="btn" type="button">Save as TXT</button>
</div>
</form>
I have simple HTML form with submit button. After hitting this button I would like to the see div#my_id which is not visible before.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
How can I make it work?
Is your HTML contained within the <form> tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.
If this is the case, try changing the input type to button to see the effect.
For example:
#my_id {
display: none;
}
<form>
<input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
<div id="my_id"> My text </div>
</form>
It should work.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)
Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.
The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.
I want to abstract the file-browse dialog from the user and only show one button for upload, like so:
<input type="button" id="uploadFile" value="Upload" />
<div class="hidden">
<form id="uploadFileForm" method="post" enctype="multipart/form-data">
<input type="file" id="browseForFiles" />
<input type="button" id="submitFile" value="Submit File" runat="server"
onclick="return true;"
onserverclick="SubmitFile_Click" />
</form>
</div>
$("#uploadFile").click(function () {
// trigger hidden file dialog
$("#browseForFiles").click(); // works
});
$("#browseForFiles").change(function () {
$("#submitFile").click(); // doesn't work; doesn't call onserverclick
});
Physically clicking on the submitFile button works fine and calls the server-side method, but since I want the actual server-side button to be hidden, the user can't physically click it. How do you fake a physical click in jQuery/Javascript?
EDIT :
I also tried:
<input type="submit" id="submitFile" value="Submit File" runat="server"
onclick="return true;"
onserverclick="SubmitFile_Click" />
$("#uploadFileForm").submit(); // doesn't work either
Have you tried this?
$('#uploadFileForm').submit()
$("input[id$='submitFile']").click(); works.
I didn't realize that ASP.NET was replacing the ID of the element to something like ctl00_PlaceHolderMain_submitFile even if regular HTML controls were used!
$("input[id$='submitFile']")[0].click(); works as well.
I am working on a web project using structs2. I have a form with submit button and another button. I am using javascript functions for form validation. My problem is that when I click the other button the form validation function works.
my jsp:
<h2>New Form</h2>
<s:form action="aa.action" name="myform" method="post" onsubmit="return(validateForm())">
<s:textfield name="formnumber" size="20" />
.
.
<button value="add" name="add">Add</button>
.
.
<s:submit method="create" key="xxx" value="xxx" />
When i click anyone of the the button the validation function will excecute.I dont want excecute the validation function on add button click.
Default button always submit the form so add type="button" it will stop
<button type="button" value="add" name="add">Add</button>
OR Use
<input type="button" name="add" value="Add" />
Get rid of the onclick. You don't need it here. The type="add" already submits the form. Your concrete problem is likely caused because the onclick of the <form> has returned false.
<input type="button" name="method" value="Add" class="button"
onclick="location.href='Employeelist.jsp'" />
You should mention type="button".
Otherwise it will submit the current URL again.
<button type="button" value="Add" name="add"/>
details about "type" in html
http://www.w3schools.com/tags/att_button_type.asp
Java Script Form validation can be
w3schools
Tutorials point
javaScript Coder
if you familier with java script libraries you can use validate.js
type : What type of widget you want.
vlaue : The text what you want in that.
name : The id of that purticulat widget.
I have a form that contains this single input field, which is nothing more than a button to Print the current web page:
<div align="center">
<input type="image" src="../Images/print.jpg" value="Print" onclick="printpage();" /></div>
</div>
After the printing, the page re-submits itself (to itself). Why does it do this and can I stop it?
If I just change the type to "input", this code does not re-submit itself after printing:
<div align="center">
<input type="input" src="../Images/print.jpg" value="Print" onclick="printpage();" /></div>
</div>
Unfortunately, our style conventions require me to use that button image rather than the standard input button.
Change the onclick handler to onclick="printpage(); return false;" - that will prevent the button from doing anything besides running the JavaScript.
add 'return false;' to your onClick event:
onclick="printpage();return false;"
Have you tried adding a
return false;
at the end of your code
therefor
<input type="input" src="../Images/print.jpg" value="Print" onclick="printpage();return false;" /></div>