I have a situation where I have a form with multiple submit buttons and I want to update a remote frame. I've tried using a g:formremote with 2 g:actionsubmit buttons (which support javascript) but the multiple submit buttons have a glitch (described here: http://www.grails.org/Ajax under "Multiple buttons with formRemote").
I took the workaround, using 2 g:submittoremote buttons, which work the way I expect, but doesn't accept the javascript parameters like onClick (the buttons in question are accept/reject and I want to put an AYS on the reject so it isn't used accidentally).
Is there a way for javascript and multiple submit buttons in a remote form to exist peacefully?
Thanks in advance for your help...
Did you try the before parameter? It takes a JavaScript function, which will be executed before the remote function call. Just use it like this:
<g:submitToRemote value="Reject" update="feedback"
controller="test" action="reject"
before="if (!confirm('sure?')) {return false;}" />
Whatever JavaScript you put in the before parameter will be inserted into the onclick attribute right before your Ajax updater call. This way you can easily do validation, get confirmations etc. and even break from onclick handling before submitting the Ajax call. There is a similar after parameter.
Okay, I'm not saying this is beautiful, but I just messed around with this for a few minutes and have something that might work for you. Like I said... not the prettiest solution, but workarounds rarely are...
<html>
<head>
<g:javascript library="prototype" />
</head>
<body>
<script type="text/JavaScript">
function setReject()
{
document.getElementById('reject').value='true'
}
</script>
<g:formRemote name="test" update="updater" url="[ controller: 'date', action: 'test']" >
<g:hiddenField name="reject" value="false" />
<g:submitButton name="submit" value="something" onclick="setReject();return confirm('Are you sure???')" />
<g:submitToRemote update="updater" action="otherTest" controller="date" value="Go Ahead"/>
</g:formRemote>
<div id="updater">
</div>
</body>
</html>
Related
I have a form. Outside that form, I have a button. A simple button, like this:
<button>My Button</button>
Nevertheless, when I click it, it submits the form. Here's the code:
<form id="myform">
<label>Label
<input />
</label>
</form>
<button>My Button</button>
All this button should do is some JavaScript. But even when it looks just like in the code above, it submits the form. When I change the tag button to span, it works perfectly. But unfortunately, it needs to be a button. Is there any way to block that button from submitting the form? Like e. g.
<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
I think this is the most annoying little peculiarity of HTML... That button needs to be of type "button" in order to not submit.
<button type="button">My Button</button>
Update 5-Feb-2019: As per the HTML Living Standard (and also HTML 5 specification):
The missing value default and invalid value default are the Submit
Button state.
return false; at the end of the onclick handler will do the job. However, it's be better to simply add type="button" to the <button> - that way it behaves properly even without any JavaScript.
By default, html buttons submit a form.
This is due to the fact that even buttons located outside of a form act as submitters (see the W3Schools website: http://www.w3schools.com/tags/att_button_form.asp)
In other words, the button type is "submit" by default
<button type="submit">Button Text</button>
Therefore an easy way to get around this is to use the button type.
<button type="button">Button Text</button>
Other options include returning false at the end of the onclick or any other handler for when the button is clicked, or to using an < input> tag instead
To find out more, check out the Mozilla Developer Network's information on buttons: https://developer.mozilla.org/en/docs/Web/HTML/Element/button
Dave Markle is correct. From W3School's website:
Always specify the type attribute for
the button. The default type for
Internet Explorer is "button", while
in other browsers (and in the W3C
specification) it is "submit".
In other words, the browser you're using is following W3C's specification.
Another option that worked for me was to add onsubmit="return false;" to the form tag.
<form onsubmit="return false;">
Semantically probably not as good a solution as the above methods of changing the button type, but seems to be an option if you just want a form element that won't submit.
It's recommended not to use the <Button> tag. Use the <Input type='Button' onclick='return false;'> tag instead. (Using the "return false" should indeed not send the form.)
Some reference material
For accessibility reason, I could not pull it off with multiple type=submit buttons. The only way to work natively with a form with multiple buttons but ONLY one can submit the form when hitting the Enter key is to ensure that only one of them is of type=submit while others are in other type such as type=button. By this way, you can benefit from the better user experience in dealing with a form on a browser in terms of keyboard support.
Late in the game, but you don't need ANY JavaScript code to use a button as a button. The default behavior is to submit the form, most people don't realize that. The type parameter has three options: submit (default), button and reset. The cool thing about this is if you add an event handler it will bypass submitting the form.
<button type="button">My Button</button>
There is also way to prevent doing the submit when clicking the button.
To achieve this, you have to use event.preventDefault() method.
document.querySelector("button#myButton").addEventListener("click", (event) => {
document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you submit this!<br>";
event.preventDefault();
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<form id="myform">
<label>Label
<input />
</label>
<button id="myButton">My Button</button>
</form>
<div id="output-box"></div>
<script src="src/script.js"></script>
</body>
</html>
Let's keep this short and sweet.
Here is my header:
<head>
<title>4JSB Assignment</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/form.js"></script>
</head>
Note: <script type="text/javascript" src="javascript/form.js"></script>
Does not appear to be working.
I have a Submit button in the body that is part of a form. Here it is, located at the end of the aforementioned form:
<input type=submit name="submitForm" id="submitForm" onclick="submitForm()">
Here is my external javascript:
function submitForm() {
alert("Working");
}
Alas, "Working" never appears.
My folder structure is as follows:
root
css
....style.css
javascript
....form.js
form.html
The answer is more than likely trivial, but has had me stuck on this assignment for hours because of this one requirement that the javascript be linked from an outside source. I appreciate any attempt to point out this mundane and unfortunate mishap to me.
The issue is that you have id="submitForm" and function submitForm
Not sure why browsers do this, but any id is available as a global object
so,
console.log(submitForm);
would show the input element, rather than the function!!
use a different name for the id, or for the function
console.log(submitForm) actually shows the function!! but it's still a name conflict in the end.
Try changing the name and id of your submit button to something like "submitButton" so that it isn't exactly the same as your javascript function. I believe there is a name conflict.
It depends on what do you want to acomplish:
If you add a onclick function on your submit button it wont work for submit the form, so it will be pointless to have it as that.
If you want execute a javascript function before submit the form and or want to perform some validations that may or may not prevent the form for being submitted . The best way to do it:
<form onsubmit="return submitform();">
....
<input type=submit name="submitFormAny" id="submitFormAny">
</form>
Also as other contributors were saying, be careful, you can't have elements and functions with same id's
Can someone help me please. I had replies to a similar question but am unable to solve my problem so I have tried to be as detailed as I can here. Sorry if it's a repeat but I am really in need of help on this.
I am trying to submit three forms to the same asp page via a mouseover event. The asp page executes code to save an image according to which form was submitted and the data it contains. I have tried several ways to do this. Submitting in turn as shown below results in some or all of the images being created, but it is random and it seems subsequent submissions are overwriting previous calls.
function save_all_des(){
document.getElementById("form_zoom1").submit();
document.getElementById("form_zoom2").submit();
document.getElementById("form_zoom3").submit();
}
I have also tried using jquery like this:
$("#create_image").mouseover(function() {
$("#form_zoom1").submit(function() {
$("#form_zoom2").submit(function() {
$("#form_zoom3").submit();
});
});
});
This doesn't work at all, even if I try just one form. (The mouseover event itself fires ok.)
The three forms have the same input names (I've shown just one) but with different values. Individually they submit ok.
<form id="form_zoom1" name="form_zoom1" action="abc.asp" target="MyFrame">
<input type="hidden" name="tab" value="1">
</form>
<form id="form_zoom2" name="form_zoom2" action="abc.asp" target="MyFrame2">
<input type="hidden" name="tab" value="2">
</form>
<form id="form_zoom3" name="form_zoom3" action="abc.asp" target="MyFrame3">
<input type="hidden" name="tab" value="3">
</form>
<iframe id="MyFrame" name="MyFrame" style="display:none;"></iframe>
<iframe id="MyFrame2" name="MyFrame2" style="display:none;"></iframe>
<iframe id="MyFrame3" name="MyFrame3" style="display:none;"></iframe>
How do I make sure the code behind the one form submittal is fininshed before the second, then third, is submitted?
Any help appreciated.
Thanks
It sounds like you'd be better off using AJAX to send POST requests to the server, rather than actually submitting the form. You could possibly send all three requests at the same time, and have it work correctly, but that depends on exactly what you're doing with the response from the server after the submit.
Take a look at the jQuery Documentation for more information on using it to perform AJAX calls.
Sample code may look something like this:
function submitForm(form) {
$.ajax({
url: 'abc.asp',
method: 'post',
data: {
tab : $('input[name="tab"]',form).val()
},
success: function(data) {
/* handle the response from the server here
if you don't need to do anything to the structure of the page, you can probably just leave this blank
may want to put in some console.log or alert statements for debugging purposes
*/
}
});
}
$('#create_image').mouseover(function() {
submitForm($('#form_zoom1'));
submitForm($('#form_zoom2'));
submitForm($('#form_zoom3'));
});
Note that that sends three AJAX POST requests, one for each form, at roughly the same time. There's no guarantee that they'll complete in that order (though this doesn't seem important given the information you've provided).
I have a form which needs javascript to be enabled for validation, is there a way to disable submit button when javascript is disabled and warn user to enable it first ?
Disable it by default and use JavaScript to enable it.
<input type="submit" value="Submit" id="submitBtn" disabled />
<script type="text/javascript">
var _onload = window.onload || function()
{
document.getElementById('submitBtn').disabled = false;
}
_onload();
</script>
That way, if JavaScript is disabled then the button will also remain disabled.
jQuery version:
<script type="text/javascript">
$(function(){
$('#submitBtn').attr('disabled', false);
});
</script>
Have it disabled by default and if there is javascript, then enable it.
Don't define an HTML form action, but rather define only an onSubmit javascript event handler. If javascript is not enabled, the onSubmit will not fire, but since there is no form action, the submit button won't do anything either.
You could also opt to have the HTML form action go to an error page explaining that javascript must be enabled, so that the user has some sort of feedback.
Alternatively you can start with the button disabled (as other posters suggested). If you do that, you should also consider a message on the form indicating why the button is disabled. Remove that message with javascript if it is enabled at the same time you re-enable the button.
Because disabling a button programmatically depending on the environment and alerting him are both tasks depending on some kind of a scripting language ( like JavaScript ), the answer is no :-/
You got solution for enabling part. For Alerting part you can use good old tag. (-:
<noscript>
<H1> It Wont work w/o javascript. Please Enable</h1>
</noscript>
Excuse the late reply but this got me thinking on how to tackle this as I have a similar issue and it led me here. You should always program your site without javascript and add it after to enhance it, but in my case using things like lightbox are being used as input, which if javascript is disabled, doesn't work right (especially since mine passes values to its parent).
My suggestion is that hopefully you have PHP enabled, so you can simply put at the top of your document
<?php if (isset($_POST)) {
//redirect to page, or set a message variable saying "no results saved"
header('some_page');
$message = "We've detected you do not have " .
"javascript enabled. No results saved";
} ?>
From there, you will have to set all buttons on your page to say
<input name="button" id="button" type="submit" onclick="return false;" />
or you could more simply go
<form name="my_form" id="my_form" method="post" action="" onclick="return false;" />
Hope this helps!
I want to trigger the submit event of the form the current element is in. A method I know works sometimes is:
this.form.submit();
I'm wondering if there is a better solution, possibly using jQuery, as I'm not 100% sure method works in every browser.
Edit:
The situation I have is, as follows:
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select></label>
</p>
</form>
I want to be able to submit the form on change of the <select>.
What I'm looking for is a solution that works on any field within any form without knowing the id or name on the form. $('form:first') and $('form') won't work because the form could be the third on the page. Also, I am using jQuery on the site already, so using a bit of jQuery is not a big deal.
So, is there a way to have jQuery retrieve the form the input/select/textarea is in?
I think what you are looking for is something like this:
$(field).closest("form").submit();
For example, to handle the onchange event, you would have this:
$(select your fields here).change(function() {
$(this).closest("form").submit();
});
If, for some reason you aren't using jQuery 1.3 or above, you can call parents instead of closest.
this.form.submit();
This is probably your best bet. Especially if you are not already using jQuery in your project, there is no need to add it (or any other JS library) just for this purpose.
I have found that using jQuery the best solution is
$(this.form).submit()
Using this statement jquery plugins (e.g. jquery form plugin) works correctly and jquery DOM traversing overhead is minimized.
Similar to Matthew's answer, I just found that you can do the following:
$(this).closest('form').submit();
Wrong: The problem with using the parent functionality is that the field needs to be immediately within the form to work (not inside tds, labels, etc).
I stand corrected: parents (with an s) also works. Thxs Paolo for pointing that out.
You can always JQuery-ize your form.submit, but it may just call the same thing:
$("form").submit(); // probably able to affect multiple forms (good or bad)
// or you can address it by ID
$("#yourFormId").submit();
You can also attach functions to the submit event, but that is a different concept.
Your question in somewhat confusing in that that you don't explain what you mean by "current element".
If you have multiple forms on a page with all kinds of input elements and a button of type "submit", then hitting "enter" upon filling any of it's fields will trigger submission of that form. You don't need any Javascript there.
But if you have multiple "submit" buttons on a form and no other inputs (e.g. "edit row" and/or "delete row" buttons in table), then the line you posted could be the way to do it.
Another way (no Javascript needed) could be to give different values to all your buttons (that are of type "submit"). Like this:
<form action="...">
<input type="hidden" name="rowId" value="...">
<button type="submit" name="myaction" value="edit">Edit</button>
<button type="submit" name="myaction" value="delete">Delete</button>
</form>
When you click a button only the form containing the button will be submitted, and only the value of the button you hit will be sent (along other input values).
Then on the server you just read the value of the variable "myaction" and decide what to do.
In JQuery you can call
$("form:first").trigger("submit")
Don't know if that is much better. I think form.submit(); is pretty universal.
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select>
</label>
</p>
**<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
</form>
<!--
this.form.submit == this.form.elements['submit'];
-->