may i know how to use jquery to lock all the <input type="submit/button" .. and only allow submit when page is fully rendered?
Because of the use case, I might approach it differently. Instead of actually disabling the buttons, I would just not allow the submit action to work until the page is loaded. This doesn't require any changes to the existing HTML to work, and your pages won't be rendered useless when JS is disabled:
<script>
// Keep all submit buttons from working by returning false from onclick handlers
$('input:submit').live('click', function () {
return false;
});
// After everything loads, remove the the "live" restriction via "die"
$(window).load(function(){
$('input:submit').die();
});
</script>
Update: Forgot to mention to put both this and the script tag to load the jQuery library in your <head> if you want this solution to work. (Thanks for reminding me Mike Sherov).
By default, you have your submit buttons have the disabled attribute set to true:
<input type="submit" disabled="disabled" />
Then, once the page loads, you can do:
$('input').removeAttr('disabled');
jQuery
$(document).ready(function(){
$(":button,:submit").removeAttr("disabled");
});
HTML
<input type="button" id="button1" value="Button 1" disabled="disabled">
<input type="button" id="button2" value="Button 2" disabled="disabled">
<input type="button" id="button3" value="Button 3" disabled="disabled">
<input type="submit" id="submit" value="Submit" disabled="disabled">
<input id="form-submit" type="submit" disabled="disabled" value="Submit" />
$(document).ready(function() {
$("#form-submit").removeAttr('disabled');
});
Couldn't you do something like
window.onsubmit=function(){return false;}
window.onload=function(){window.onsubmit='';}
I am not sure how the event bubbling would work with an onsubmit. I'd have to test it. Also, I don't know jquery so I'm not sure how to integrate it.
Related
I am using this plugin to submit form with file upload.
Usually my forms are posted (without using this plugint) using:
<button id="send">Send</button>
and using js like this:
$('#send').click(function(){
ajaxSubmit();
});
This plugin is looking for the usual
<input type="submit" value="Send">
to send the form so that I can keep my buttons instead of the default buttons. My point is to update my click function to trigger form submitting via this plugin.
The plugin is initialized via:
$("#myForm").ajaxForm(options);
Any help?
My actual workaround is to style input buttons like my standard buttons but I'd prefer to keep all my code the same way (always using buttons to submit forms instead of inputs)
If you check the documentation, there are multiple ways of submitting the form with that plugin:
<input type="submit" name="submitButton" value="Submit1">
<input type="image" name="submitButton" value="Submit2" src="submit.gif">
<button type="submit" name="submitButton" value="Submit5"><span>submit 5</span></button>
You could use the last one. For that, just add type="submit" to your button, and it should be enough:
<button id="send" type="submit">Send</button>
Without seeing more code, the one thing I can say is that your javascript references an object with an ID of "send" but your input has no ID.
Try <input type="submit" id="send" value="Send"/>.
I have two <html:submit> buttons for validating both buttons by using common method form on submit(), both submit buttons are same value "save" how can I get which button is clicked in JavaScript for the purpose of separate validations..
using onclick attribute to check different validation:
<input type="submit" value="save" onclick="validate1();"/>
<input type="submit" value="save" onclick="validate2();"/>
and do different validation in two function.
With eg. jQuery you can utilize the target attribute that gets sent in the click()-function:
$( 'button' ).click(function( event ) {
console.log(event.target.nodeName );
});
Try this:
<form onsubmit="alert(this.submited); return false;">
<input onclick="this.form.submited=this.value;" type="submit" value="save" />
<input onclick="this.form.submited=this.value;" type="submit" value="save" />
</form>
JSFIDDLE DEMO
I have the following code:
<button data-dojo-type="dijit.form.Button" data-dojo-props='baseClass:"styleButton"'
name="_action_update"
type="submit"
label="Save"
>Save</button>
The problem is, that this doesnt seem to actually work as a submit action anymore. If I take away the dojo related stuff, it works as expected. I have used this baseClass method before to apply a style to a button, but not a submit button. How should I change this?
I think you need an input type="submit"
<input data-dojo-type="dijit.form.Button" data-dojo-props='baseClass:"styleButton"'
name="_action_update" type="submit" value="Save" />
Or if you really need a button tag, something ugly like this should work
<button onclick="document.getElementById('yourFormId').submit()" data-dojo-type="dijit.form.Button" data-dojo-props='baseClass:"styleButton"'
name="_action_update" label="Save">Save</button>
Or of course you could more elegantly attach the event handler without the dom level-0 cruft
<button id="formSubmitBtn" data-dojo-type="dijit.form.Button" data-dojo-props='baseClass:"styleButton"'
name="_action_update" label="Save">Save</button>
document.getElementById("formSubmitBtn").onclick = function() {
document.getElementById('yourFormId').submit();
};
You have not precised what version of Dojo you are using, but, and I believe that is the problem :
Dojo version < 1.7 do not support data-dojo-props + natural html properties
<input data-dojo-type="dijit.form.Button" data-dojo-props='baseClass:"styleButton"'
name="_action_update" type="submit" value="Save" />
Will not work, name, type and value will be ignored.
If your dojo version is 1.7 or 1.7.1, then the problem is elsewhere.
Try adding a data-dojo-type="dijit.form.Form to you form tag as such
<div dojoType="dijit.form.Form" id="myFormThree" jsId="myFormThree" encType="multipart/form-data"
action="" method="">
referrenced from: http://dojotoolkit.org/reference-guide/dijit/form/Form.html
here is the docs for dijit.form.Button, not sure how helpful they will be.
http://dojotoolkit.org/reference-guide/dijit/form/Button.html
In jQuery-Mobile I'm submitting a form programmatically and I want to capture the submit event to perform some validations before. I have already tried the following solution provided in other questions about jQuery:
$(document).ready(function(){
$('#my_form').bind('submit', function() {
alert('before submit');
...
});
});
But I cannot get the function executed and the alert displayed. Does anyone know any other way to achieve this?
My form is something like:
<form id="my_form" method="POST" action="..." data-theme="b">
And the way I am calling it programmatically, from another section of the same page is like this:
<input type="submit" onclick="document.forms['my_form'].submit(); return false;" value="Submit" data-theme="b"/>
Thank you in advance for your help.
The submit handler of the form is NOT executed when you submit the form programatically.
NOTE: Do NOT use a submit button to programatically submit a form. Instead use button or allow the submission from the submit button to be handled, i.e.
<input type="button" onclick="document.forms['my_form'].submit()" value="Submit another form" data-theme="b"/>
(the above is not correct anyway since it needs the form to have a NAME, not just an ID)
So
<input type="button" onclick="document.forms['my_form_NAME'].submit()" value="Submit another form" data-theme="b"/>
OR
<input type="button" onclick="document.getElementById('my_form_ID').submit()" value="Submit another form" data-theme="b"/>
OR since you have jQuery:
<input type="button" onclick="$('#my_form_ID'].submit()" value="Submit another form" data-theme="b"/>
OR if you can put the button in the form (best way):
<input type="submit" value="Submit THIS form" data-theme="b"/>
But since you want to bind - here is how to submit using another button instead of the better way using the form's own submit button:
<form id="actualForm">...
.
.
</form>
<input type="button" id="subbut" value="Submit another form on this page" data-theme="b"/>
$(document).ready(function(){
$('#subbut').bind('click', function() {
alert('before submit');
...
$("#actualForm").submit();
});
});
If there is hardcoded inline behaviour you cannot change, use the jQuery to remove it too
How can I remove an inline onclick attribute with a bookmarklet?
$(document).ready(function(){
$('#subbut').attr('onclick',""); // or $('#subbut').onclick=null;
$('#subbut').bind('click', function() {
alert('before submit');
...
$("#actualForm").submit();
});
});
Changing the return value of onClick to TRUE does the job:
<input type="submit" onclick="document.forms['my_form'].submit(); return ***true***;" vakue="Submit" data-theme="b"/>
I have 3 buttons in my form.
All the button actions goes to a same page after clicking it depending upon what button is clicked.
My query is: The name of the buttons are 'add','edit' and 'remove'
When the 'add' button is clicked, using js I need to get the value of that button and similarly for the other two buttons....
Can you please help?
<form>
<script type="text/javascript">
function doAction(value)
{
// Don't really have anything to set...just show the value
alert(value);
}
</script>
<input type="button" value="Add" onclick="doAction(this.value)">
<input type="button" value="Edit" onclick="doAction(this.value)">
<input type="button" value="Remove" onclick="doAction(this.value)">
</form>
There are other ways that involve not even passing the button's value, but they're not as compatible across browsers (IE uses a slightly different event model).
Of course, if you can get by without doing it in Javascript, and can just pass the clicked button to the server, it gets even easier than that...
<form>
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Remove">
</form>
and whichever button you click gets put into the url as action=Add or whatever.
What about:
var buttonValue = document.getElementById('IdOfYourButton').value
have you tried: document.getElementById('button_id').value in the js function that you'll call when the button is clicked?
There is target property which you can use.It targets the element which caused the event to occur.
button.addEventListener('click',function(e){
console.log(e.target.value);
});