I have an unusual problem with a form (here's a slimmed down version):
<script>
(function($){
$("form").submit(function(){
alert('Checkout time!');
});
$("button[name='process_order']").click(function(){
alert('Button Checkout time!');
});
$("button[name='back']").click(function(){
alert('Back Button');
});
})(jQuery);
</script>
<form>
<input type="text" name="moo1" tabindex="1" />
<input type="text" name="moo2" tabindex="2" />
<button name="back" tabindex="4">Back</button>
<button name="process_order" tabindex="3">Process Order</button>
</form>
The buttons work fine, however, if I hit enter when one of the textboxes that has focus, the 'Back Button' action is what fires... even though the form's submit handler is set to do "checkout"...
You could probably change the process_order tothis:
<input type="submit" name="process_order" value="Process Order" tabindex="3" />
And change to:
<form id="myForm">
Then, bind the .submit() handler to it
$('#myForm').submit(function()
{
alert('Button checkout time!');
return false; //we return false so that it doesn't refresh the page
});
Your form has two submit buttons, the form will submit with the enter key by activating the first submit button. change
<button name="back" tabindex="4">Back</button>
to
<button type="button" name="back" tabindex="4">Back</button>
to avoid the browser interpreting the first button as a submit button
Related
I have an HTML form as shown below with some form fields and a submit and a delete button:
There is also a floating component which appears whenever there are changes in the form as shown in the same diagram with text: You have unsaved changes. This is a common component which appears for all the forms in my website.
When I submit the form using the form's Submit button, it validates all the fields as per the validations.
(for example: <input type="number" min="0"> will check that the number should be positive)
But if I submit the form from the Save button on the floating element, it does not checks for any validation, and just posts the request.
I tried using the following code, but the reportValidity() function doesn't do anything.
if (!form.checkValidity()) {
form.reportValidity();
}
form.checkValidity() and form.reportValidity() both are returning false when I do a console.log.
What am I missing here, and how can I fix this?
P.S. I tried this on chrome v98.
Edit: Adding HTML code:
<form method="post" action="/products/manage/{{.Product.ID}}/submit/">
<div class="form-group col-md-5">
<label>Product Quantity</label>
<input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
</div>
<button type="submit" class="btn btn-success" value="Submit">Submit</button>
<button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>
Save button calls this function:
function submitForm(form, url) {
const form = $(form)[0]
if (!form.checkValidity()) { //<- Added the code here
form.reportValidity();
}
var serialized = serializeForm(form);
// Do some more things then use HTTP to request the API
}
You can easily use the jQuery event handlers do the work for you.
A simplified example below:
Give your form some identifier (example: id="form1")
Catch the click event on button click
Trigger the submit event to submit that form
$('.unsavedChangesBtn').on('click',function(){
$('#form1').submit();
});
In below example you can submit the form either by clicking the submit button or the save button.
$('document').ready(function(){
$('#form1').on('submit',function(){
alert("SUBMITTED");
});
$('.unsavedChangesBtn').on('click',function(){
$('#form1').submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form1" action="javascript:void(0);">
<div class="form-group col-md-5">
<label>Product Quantity</label>
<input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
</div>
<button type="submit" class="btn btn-success" value="Submit">Submit</button>
<button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>
<button class="unsavedChangesBtn"> SAVE </button>
I am having a form like this
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="button" value="download"/></form>
I need a click event for download button. Eg. If i click download it should submit as action.php and run $('#button').click(function(){ also. How can I do it.
Perform the operation on 'download' button click then trigger the form submit using trigger
$('.download').click(function(e){
alert('downloading!') //Your Download Logic HERE
$(this).parent().trigger('submit')//Trigger Form SUBMIT ONCE THE OPERATION IS DONE
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="button" value="download" class="download"></form>
Firstly note that <form> elements are not self closing, so your current HTML is invalid; the input elements need to be within the form itself.
Once that is fixed you can trigger() a submit event on the parent form to the #button element, like this:
$('#button').click(function() {
console.log('Custom logic here...');
$(this).closest('form').trigger('submit');
});
$('form').on('submit', function(e) {
e.preventDefault();
console.log('Submitting form...');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="submit" value="search" />
<input type="button" value="download" id="button" />
</form>
You can simply submit your form by javascript, after clicking download button:
$('#button').click(function(){
...
document.forms["myform"].submit();
I'm able to disable blank form fields, on submission, with:
<form method="GET" onsubmit="onsubmit1(this)">
...
<script type="text/javascript">
function onsubmit1(thiz) {
$(thiz).find(':input').each(
function() {
if (!$(this).val()) {
$(this).attr('disabled', true)
}
}
)
}
The problem is that the fields remain disabled, when the user selects to export a .CSV file, as the page doesn't refresh after the .CSV file is downloaded to the browser.
I would like the disabled input fields to be re-enabled, when the user selects to export a file.
Bonus points for solving this via the form's onsubmit handler, and not via the submit button's onclick handler as there are many submit buttons.
I have made demo please refer this Demo
See Demo
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="submit" value="Enabled" id="btn2">
<input type="submit" value="Disabled" id="btn1">
$('#btn1').on("click", function () {
alert($(this).val());
$('input:text').attr('disabled', true);
});
$('#btn2').on("click", function () {
alert($(this).val());
$('input:text').attr('disabled', false);
});
Here's the problem: I have a simple form with three buttons and some hidden input fields. Depending on the button pressed (different name="" values), the action does something different.
I am now trying to add a confirmation dialog box to this form by doing this:
<form method="POST" action="/action" onsubmit="return confirmFormSubmit(this);">
<input type="submit" name="one" value="This">
<input type="submit" name="two" value="That">
<input type="submit" name="three" value="Something else">
</form>
<script type="text/javascript">
function confirmFormSubmit(obj)
{
window.event.preventDefault();
jConfirm('Are you sure you want to do this?', 'Awaiting confirmation', function(r) {
if (r == true) {
obj.form.submit();
} else {
return false;
}
});
}
</script>
When I click OK, the action happens, but the input button is not submitted.
Doing 'document.location = obj.form.action;' is not an option because that will not submit the POST parameters.
How can I make the damn thing submit the input fields and not just call the action?
I think that it is because the onsumit method overrides the action in your form declaration.
I would actually change the button of the form and make it a button linked to a javascript method that performs required tests and submit values to the right action.
<form method="POST" action="/action">
<a href="javascript: confirmFormSubmit(this)">
<input type="button" name="three" value="Something else">
</a>
</form>
something like this should be working
I have two buttons, and I want to apply one action to another. For example.
<form>
<input type="submit" />
</form>
<input type="submit" />
I want to make the second button submit the form, despite being outside of the form.
You should make them of type button, and give your form an id.
Markup:
<form id="myForm">
<---STUFF---->
<input type='button' id='otherButton'>
</form>
<input type='button' id='someButton'>
jQuery:
$('#someButton').click(function() { $('#myForm').submit(); });
$(':input:last').click(function()
{
$('form').submit();
});
// enable form submit on the second <input>
$('input[type=submit]').click(function(){
$('form').submit();
});
// disable the inner <input>
$('form input[type=submit]').click(function(){
return false;
});
Something like this should do your trick.
If you want the second button to do everything the first can do (not just submit), you can try something like this:
html
<form>
<input id="insideButton" type="submit" />
</form>
<input id="outsideButton" type="submit" />
jsJQUERY
$("#outsideButton").click(function() {
$("#insideButton").trigger("click");
});
you can using jQuery $("#test").click() if you have jQuery instead of the document... stuff below or the way below will work without jQuery
<form name="testForm1">
<input type="submit" id="test" />
</form>
<!-- use this when not in a form: -->
<button onclick="button1_click();" id="button1"></button>
In your head tag
<script type="text/javascript">
function button1_click(){
document.forms.testForm1.submit();
}
</script>
Changed for the users that put performance under clean code